Puppeteer: Element.hover () ไม่มีอยู่จริง

Question

ฉันใช้นักเชิดหุ่นเพื่อขูดภาพบางส่วนออกจากไซต์พร้อมกับข้อมูลอื่น ๆ ในการเปลี่ยนภาพฉันต้องวางเมาส์เหนือรายการ ฉันมักจะอ่านเอกสารรอบ ๆ .hover () แต่ไม่ประสบความสำเร็จ อย่างไรก็ตาม. click () ทำงานได้อย่างสมบูรณ์แบบสำหรับส่วนอื่นของการขูดของฉัน

const pptr = require('puppeteer');

async function scrapeProduct(productID) {
    const browser = await pptr.launch();
    const page = await browser.newPage();
    await page.goto(`https://someplace.com`);
    let scrapeData = await page.evaluate(async () => {
        let productMap = [];

        //scrape other data...

        const imageItems = document.querySelectorAll('ul[class="images-view-list"] > li > div');
        for (let image of imageItems) {
            await image.hover();
            productMap.push({
                'Image Src': document.querySelector('div[class="image-view-magnifier-wrap"] > img').getAttribute('src'),
            });
        }
        return productMap;
    });
    await browser.close();
    return scrapeData;
}

ฉันเคยเห็นวิธีแก้ปัญหาที่คุณประเมินหน้าด้วยการดำเนินการวางเมาส์ก่อนหน้านี้ สิ่งนี้ไม่สะดวกเนื่องจากฉันรวบรวมจุดข้อมูลอื่น ๆ มากมายและต้องการให้โซลูชันของฉันสะอาดอยู่ในคำขอประเมินครั้งเดียว ฉันเข้าใจ. แต่ () ไม่ถูกต้องหรือไม่?

Answer 1

คุณกำลังผสมฟังก์ชัน Puppeteer กับฟังก์ชันที่ประเมินซึ่งดำเนินการในบริบท DOM หากคุณต้องการใช้ Puppeteer hover คุณจะต้องใช้การอ้างอิงรูปภาพจากหน้า $$ query:

let productMap = [];
const page = await browser.newPage();
await page.goto(`https://someplace.com`);
//get a collection of Puppeteer element handles
const imageItems = await page.$$('ul[class="images-view-list"] > li > div');
for (let image of imageItems) {
    //hover on each element handle
    await image.hover();
    //use elementHandle getProperty method to get the current src
    productMap.push({'Image Src': await (await image.getProperty('src')).jsonValue()});
}

หากคุณจำเป็นต้องทำในpage.evaluateฟังก์ชันนี้คุณจะต้องเลียนแบบการวางเมาส์โดยใช้เหตุการณ์ปกติของเมาส์ DOM

เหตุผลที่click()เมธอดใช้งานได้คือมีให้ใช้งานในทั้งสองบริบทเป็นเมธอด DOM ดั้งเดิมและเมธอดจัดการองค์ประกอบหุ่น