Burattinaio: Element.hover () non esiste

Question

Sto usando il burattinaio per raschiare alcune immagini da un sito insieme ad altri dati. Per cambiare le immagini devo passare il mouse su un elemento dell'elenco. Continuo a trovare documentazione su .hover () ma non ho avuto successo. Tuttavia, .click () funziona perfettamente per un'altra parte del mio scrap.

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

Ho visto soluzioni in cui si valuta una pagina eseguendo il passaggio del mouse prima. Questo è scomodo poiché raccolgo molti altri punti dati e vorrei mantenere pulita la mia soluzione in una richiesta di valutazione. Sto capendo .hover () in modo errato?

Answer 1

Stai mescolando funzioni Puppeteer con funzioni valutate che vengono eseguite nel contesto DOM. Se desideri utilizzare il passaggio del mouse su Puppeteer, devi utilizzare i riferimenti alle immagini dalla pagina. $$ 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 è necessario farlo nella page.evaluatefunzione, sarà necessario imitare il passaggio del mouse utilizzando i normali eventi del mouse DOM.

Il motivo per cui il click()metodo sembra funzionare è che è disponibile in entrambi i contesti, come metodo DOM nativo e come metodo di gestione dell'elemento Puppeteer.