Puppenspieler: Element.hover () existiert nicht

Question

Ich benutze Puppenspieler, um einige Bilder zusammen mit einigen anderen Daten von einer Site zu kratzen. Um Bilder zu ändern, muss ich mit der Maus über ein Listenelement fahren. Ich stoße immer wieder auf Dokumentation zu .hover (), habe aber keinen Erfolg gehabt. .Click () funktioniert jedoch perfekt für einen anderen Teil meines Kratzers.

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

Ich habe Lösungen gesehen, bei denen Sie eine Seite mit vorheriger Ausführung des Hovers auswerten. Dies ist unpraktisch, da ich viele andere Datenpunkte sammle und meine Lösung in einer Bewertungsanforderung sauber halten möchte. Verstehe ich .hover () falsch?

Answer 1

Sie verwechseln Puppenspielerfunktionen mit ausgewerteten Funktionen, die im DOM-Kontext ausgeführt werden. Wenn Sie den Puppenspieler-Hover verwenden möchten, müssen Sie Bildreferenzen von Seite verwenden. $$ Abfrage:

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

Wenn Sie dies in der page.evaluateFunktion tun müssen, müssen Sie den Schwebeflug mithilfe normaler DOM-Mausereignisse nachahmen.

Der Grund, warum die click()Methode zu funktionieren scheint, ist, dass sie in beiden Kontexten als native DOM-Methode und als Puppeteer-Element-Handle-Methode verfügbar ist.