Marionnettiste: Element.hover () n'existe pas

Question

J'utilise marionnettiste pour gratter des images d'un site avec d'autres données. Pour modifier les images, je dois passer la souris sur un élément de la liste. Je n'arrête pas de rencontrer de la documentation autour de .hover () mais je n'ai eu aucun succès. Cependant, .click () fonctionne parfaitement pour une autre partie de mon 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;
}

J'ai vu des solutions où vous évaluez une page en exécutant le survol avant. Cela n'est pas pratique car je collecte de nombreux autres points de données et je souhaite garder ma solution propre en une seule demande d'évaluation. Est-ce que je comprends mal .hover ()?

Answer 1

Vous mélangez des fonctions Puppeteer avec des fonctions évaluées qui s'exécutent dans le contexte DOM. Si vous souhaitez utiliser le survol de Puppeteer, vous devez utiliser les références d'image de la page. $$ 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()});
}

Si vous devez le faire dans la page.evaluatefonction, vous devrez imiter le survol en utilisant des événements de souris DOM normaux.

La raison pour laquelle la click()méthode semble fonctionner est qu'elle est disponible dans les deux contextes, en tant que méthode DOM native et méthode de poignée d'élément Puppeteer.