Кукловод: 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;
}

Я видел решения, в которых вы оцениваете страницу, предварительно выполняя наведение. Это неудобно, поскольку я собираю много других точек данных и хочу, чтобы мое решение было чистым в одном запросе оценки. Я неправильно понимаю .hover ()?

Answer 1

Вы смешиваете функции Puppeteer с оцениваемыми функциями, которые выполняются в контексте DOM. Если вы хотите использовать наведение курсора на Puppeteer, вам необходимо использовать ссылки на изображения со страницы. $$ 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 и метод дескриптора элемента Puppeteer.