操纵up等待页面/ DOM更新-响应在初始加载后添加的新项目

时间:2019-01-09 11:27:10

标签: puppeteer

我想使用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)

1 个答案:

答案 0 :(得分:1)

您可以使用exposeFunction公开本地函数:

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

然后,您可以使用page.evaluate创建一个observer并侦听在父节点内部创建的新节点。

此示例抓取python chat in Stack Overflow(只是一个想法,而不是最后的工作),并打印在该聊天中创建的新项目。

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