Puppeteer: Element.hover () mevcut değil

Question

Diğer verilerle birlikte bir siteden bazı görüntüleri kazımak için kuklacı kullanıyorum. Resimleri değiştirmek için bir liste öğesinin üzerine gelmem gerekiyor. Hover () ile ilgili belgelerle karşılaşmaya devam ediyorum, ancak başarılı olamadım. Ancak, .click () kazımamın başka bir kısmı için mükemmel çalışıyor.

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

Önceden fareyle üzerine gelme işlemini uygulayarak bir sayfayı değerlendirdiğiniz çözümler gördüm. Bu, diğer birçok veri noktasını topladığım ve çözümümü tek bir değerlendirme isteğinde temiz tutmak istediğim için sakıncalı. .Hover () öğesini yanlış mı anlıyorum?

Answer 1

Puppeteer işlevlerini DOM bağlamında çalışan değerlendirilmiş işlevlerle karıştırıyorsunuz. Puppeteer hover kullanmak istiyorsanız, sayfadaki resim referanslarını kullanmanız gerekir . $$ 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()});
}

İşlevde yapmanız gerekiyorsa page.evaluate, normal DOM fare olaylarını kullanarak fareyle üzerine gelmeyi taklit etmeniz gerekecektir.

click()Yöntemin işe yarıyor gibi görünmesinin nedeni, her iki bağlamda da yerel bir DOM yöntemi ve Kuklacı öğe işleme yöntemi olarak mevcut olmasıdır.