使用 puppeteer 获取对象的更改答案

【问题标题】：Getting changes in object with puppeteer使用 puppeteer 获取对象的更改
【发布时间】：2021-03-13 12:04:40
【问题描述】：

我正在尝试学习如何跟踪 div 中的更改。我发现一个帖子显示了以下代码：

(async() => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.exposeFunction('onCustomEvent', text => console.log(text));
   await page.goto('https://www.time.ir', {waitUntil: 'networkidle0'});
   await page.evaluate(() => {
     $('#digitalClock').bind("DOMSubtreeModified", function(e) {
       window.onCustomEvent(e.currentTarget.textContent.trim());
     });
   });
 })();

当运行它时，它会从网页中提取时间，并且每隔一秒 console.logs 就会记录新的时间——这正是我正在寻找的。但是由于某种原因，我对任何其他页面都有问题。例如，下面非常相似的代码给了我一个错误： 'node:1801) UnhandledPromiseRejectionWarning: 错误: 评估失败: ReferenceError: $$ is not defined'

await page.exposeFunction('onCustomEvent', text => console.log(text));
await page.goto('https://www.clocktab.com', {waitUntil: 'networkidle0'});
  await page.evaluate(() => {
      $('#digit2').bind("DOMSubtreeModified", function(e) {
        window.onCustomEvent(e.currentTarget.textContent.trim());
      });
    });

我不确定它们之间的区别，除了我导航到的页面，以及我正在查看以查找变化值的元素。此外，我确实在某处读到过 DOMSubtreeModified 现在已弃用，所以如果有更好的方法来获得我正在寻找的东西，那就太好了！

提前致谢

【问题讨论】：

标签： node.js puppeteer

【解决方案1】：

不同的是，在第二个网站中没有jquery，并且在发送评估函数时，没有定义$。

替换成原版js：

document.querySelector('#digit2').addEventListener ("DOMSubtreeModified", function(e) {
    window.onCustomEvent(e.currentTarget.textContent.trim());
})

建议：当我使用 puppeeter 评估功能进行调试时，我会将其复制粘贴到页面中的浏览器控制台上。例如：

【讨论】：