Titiritero: Element.hover () no existe

Question

Estoy usando titiritero para raspar algunas imágenes de un sitio junto con otros datos. Para cambiar las imágenes, necesito colocar el cursor sobre un elemento de la lista. Sigo encontrando documentación sobre .hover () pero no he tenido éxito. Sin embargo, .click () funciona perfectamente para otra parte de mi 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;
}

He visto soluciones en las que evalúas una página ejecutando el hover antes. Esto es un inconveniente ya que recopilo muchos otros puntos de datos y me gustaría mantener limpia mi solución en una solicitud de evaluación. ¿Estoy entendiendo .hover () incorrectamente?

Answer 1

Estás mezclando funciones de Titiritero con funciones evaluadas que se ejecutan en el contexto DOM. Si desea usar el desplazamiento del titiritero, debe usar referencias de imagen de la página. $$ consulta:

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

Si necesita hacerlo en la page.evaluatefunción, deberá imitar el desplazamiento mediante eventos de mouse DOM normales.

La razón por la que el click()método parece funcionar es que está disponible en ambos contextos, como un método DOM nativo y un método de manejo de elementos Puppeteer.