Puppeteer: Element.hover () tidak ada

Question

Saya menggunakan dalang untuk mengikis beberapa gambar dari situs bersama dengan beberapa data lainnya. Untuk mengubah gambar, saya perlu mengarahkan kursor ke item daftar. Saya terus menemukan dokumentasi seputar .hover () tetapi tidak berhasil. Namun, .click () berfungsi dengan sempurna untuk bagian lain dari goresan saya.

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;
}

Saya telah melihat solusi di mana Anda mengevaluasi halaman dengan menjalankan hover sebelumnya. Ini tidak nyaman karena saya mengumpulkan banyak poin data lainnya dan ingin menjaga solusi saya tetap bersih dalam satu permintaan evaluasi. Apakah saya salah memahami .hover ()?

Answer 1

Anda mencampur fungsi Puppeteer dengan fungsi yang dievaluasi yang dijalankan dalam konteks DOM. Jika Anda ingin menggunakan Puppeteer hover, maka Anda perlu menggunakan referensi gambar dari halaman. $$ 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()});
}

Jika Anda perlu melakukannya dalam page.evaluatefungsi tersebut, Anda perlu meniru gerakan kursor dengan menggunakan peristiwa mouse DOM normal.

Alasan click()metode tersebut tampaknya berfungsi adalah karena metode ini tersedia dalam kedua konteks, sebagai metode DOM asli dan metode penanganan elemen Puppeteer.