木偶：找不到Javascript加载的元素

Question

我一直在使用Puppeteer抓取一些网站，当我需要的元素位于DOM中时，它可以很好地工作；但是当通过Javascript加载元素时，我无法使其正常工作。例如。请在下面查看我的代码。更具体地说，page.waitForSelector总是触发超时错误。我尝试了page.screenshot，结果图像确实显示了一个完全加载的页面，其中包含此.evTextFont元素。

如何修改此代码以成功检索.evTextFont元素？

我尝试了两个Puppeteer版本1.11和1.17，但是两个版本都遇到了相同的问题

非常感谢

// Adapted from https://dev.to/napolux/how-to-scrap-that-web-page-with-nodejs-and-puppeteer-811

const puppeteer = require('puppeteer');
const URL = 'https://www.paintbar.com.au/events-1/moments-in-moonlight';

puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }).then(async browser => {
    const page = await browser.newPage();
    await page.setViewport({width: 1200, height: 600})
    await page.goto(URL, {waitUntil: 'networkidle0'});
    await page.waitForSelector('.evTextFont');
    await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
    // await page.screenshot({ path: './image.jpg', type: 'jpeg' });

    const result = await page.evaluate(() => {
        try {
            var data = [];

            $('.evTextFont').each(function() {
                const title = $(this).text();
                data.push({
                    'title' : title,
                });
            });
            return data;

        } catch(err) {
            console.log(err.toString());
        }
    });

    await browser.close();

    for(var i = 0; i < result.length; i++) {
        console.log('Data: ' + result[i].title);
    }

    process.exit();
}).catch(function(error) {
    console.error(error);
    process.exit();
});

Answer 1

之所以会这样，是因为您要查找的事件显示在另一个站点的iframe元素中，因此您需要先找到该iframe，然后对其进行操作。

await page.goto(URL, {waitUntil: 'networkidle0'});

// Looking for the iframe with the event
const frame = (await page.frames()).find(f => f.url().includes("events.wix.com"));

// Then do work as before, but on that frame
await frame.waitForSelector('.evTextFont');
await frame.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});

const result = await frame.evaluate(() => {...})