кукольник ждет обновления страницы / DOM - отвечает на новые элементы, которые добавляются после начальной загрузки

Question

Я хочу использовать Puppeteer для ответа на обновления страницы. На странице отображаются элементы, и когда я покидаю страницу, со временем могут появляться новые элементы. Например. каждые 10 секунд добавляется новый элемент.

Я могу использовать следующее для ожидания элемента при начальной загрузке страницы:

await page.waitFor(".item");
console.log("the initial items have been loaded")

Как я могу ждать / ловить будущие предметы? Я хотел бы добиться чего-то вроде этого (псевдокод):

await page.goto('http://mysite');
await page.waitFor(".item");
// check items (=these initial items)

// event when receiving new items:
// check item(s) (= the additional [or all] items)

Answer 1

Вы можете использовать exposeFunction для предоставления локальной функции:

await page.exposeFunction('getItem', function(a) {
    console.log(a);
});

Затем вы можете использовать page.evaluate для создания наблюдателя и прослушивания новых узлов, созданных внутри родительского узла.

Этот пример очищает (это просто идея, а не окончательная работа) чат python в переполнении стека и печатает новые элементы, создаваемые в этом чате.

var baseurl =  'https://chat.stackoverflow.com/rooms/6/python';
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto(baseurl);

await page.exposeFunction('getItem', function(a) {
    console.log(a);
});

await page.evaluate(() => {
    var observer = new MutationObserver((mutations) => { 
        for(var mutation of mutations) {
            if(mutation.addedNodes.length) {
                getItem(mutation.addedNodes[0].innerText);
            }
        }
    });
    observer.observe(document.getElementById("chat"), { attributes: false, childList: true, subtree: true });
});