Puppeteer:找不到 Javascript 加载的元素

Puppeteer: Cannot find element loaded by Javascript

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

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

我已经尝试了 Puppeteer 版本 1.11 和 1.17,但是我遇到了同样的问题

非常感谢

改编自here

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

这是因为您要查找的事件显示在另一个站点的 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(() => {...})