我想使用 Puppeteer 来响应页面更新。 该页面显示项目,当我打开页面时,随着时间的推移,新项目可能会出现。 例如。每 10 秒添加一个新项目。
我可以使用以下命令来等待页面初始加载时的项目:
await page.waitFor(".item");
console.log("the initial items have been loaded")
我如何等待/捕获 future 的元素? 我想实现这样的目标(伪代码):
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)
最佳答案
您可以使用exposeFunction公开本地函数:
await page.exposeFunction('getItem', function(a) {
console.log(a);
});
然后你可以使用page.evaluate创建 observer并监听父 Node 内创建的新 Node 。
这个例子抓取了(这只是一个想法,不是最终作品)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 });
});
关于javascript - puppeteer 等待页面/DOM 更新 - 响应初始加载后添加的新项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54109078/