Titereiro: Element.hover () não existe

Question

Estou usando o titereiro para raspar algumas imagens de um site junto com alguns outros dados. Para alterar as imagens, preciso passar o mouse sobre um item da lista. Eu continuo encontrando documentação sobre .hover (), mas não tive sucesso. No entanto, .click () funciona perfeitamente para outra parte do meu scrape.

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

Já vi soluções em que você avalia uma página com a execução do foco anterior. Isso é inconveniente, pois eu coleto muitos outros pontos de dados e gostaria de manter minha solução limpa em uma solicitação de avaliação. Estou entendendo .hover () incorretamente?

Answer 1

Você está misturando funções de Puppeteer com funções avaliadas que são executadas no contexto DOM. Se você quiser usar o foco do Puppeteer, será necessário usar referências de imagem da página. $$ 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()});
}

Se precisar fazer isso na page.evaluatefunção, você precisará imitar o foco usando eventos de mouse DOM normais.

O motivo pelo qual o click()método parece funcionar é que ele está disponível em ambos os contextos, como um método DOM nativo e um método de manipulação de elemento Puppeteer.