如何向puppeteer注入mutationobserver

Question

我想要跟踪更改的 DOM，就像无头 Chrome 中的mutationobserver 一样。 所以我学习了 puppeteer 库，但不知道如何使用。

可以在 puppeteer 中追踪 DOM 变化吗？谢谢

Answer 1

好吧，您可以将自定义代码注入浏览器。

一种方法：

await page.evaluate(() => {
   const observer = new MutationObserver(
   function() {
     // communicate with node through console.log method
     console.log('__mutation')
    }
   )
   const config = {
     attributes: true,
     childList: true,
     characterData: true,
     subtree: true
   }
   observer.observe(target, config)
})

在您的节点脚本中：

page.on('console', async (msg) => {
   if (msg.text === '__mutation') {
     // do something...
   }
}) 

Answer 2

比监听控制台更好的方法是使用 Page.exposeFunction()

await page.exposeFunction(
  "myProjectsPrefix_handleMyElemMutation",
  function (mutationType) {
    console.log("here it is", mutationType);
  }
);

await page.evaluate((_) => {
  new MutationObserver((mutationList) => {    
    window.myProjectsPrefix_handleMyElemMutation(
      mutationList[0]?.type
    );
  }).observe(myElem);
});

注意浏览器处理程序只能将可序列化的参数传递给公开的函数（在本例中我使用了

mutationList[0]?.type

），因为Puppeteer只能将可序列化的数据从浏览器上下文传递回覆盖脚本。

JSON.stringify(mutationList)

是我的第一个想法，但我怀疑它会起作用，它可能只会返回“{}”。