Кукольник: не удается найти элемент, загруженный 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(() => {...})