Puppeteer中Mutation Observer返回空对象数组的问题求助

问题出在MutationRecord对象包含DOM节点，这类浏览器环境的特殊对象无法直接通过JSON.stringify完整序列化——DOM节点存在循环引用、大量不可枚举属性，序列化后会丢失所有有效数据，最终得到空对象。

要获取新增元素的完整内容，需要在浏览器上下文里手动提取MutationRecord中的关键数据，转换成普通可序列化的JS对象后再传递到Puppeteer环境。以下是修改后的代码：

await page.exposeFunction("puppeteerLogMutation", (mutationData) => {
  console.log(mutationData);
});

await page.evaluate(() => {
  const target = document.querySelector("#SHORTCUT_FOCUSABLE_DIV");
  const observer = new MutationObserver((mutations) => {
    // 手动提取需要的Mutation数据，避免直接序列化DOM节点
    const mutationData = mutations.map(mutation => ({
      type: mutation.type,
      // 把新增节点转换为包含完整HTML的普通对象
      addedNodes: Array.from(mutation.addedNodes).map(node => ({
        outerHTML: node.outerHTML, // 包含节点本身及所有子元素的完整HTML
        tagName: node.tagName,
        id: node.id,
        textContent: node.textContent.trim()
      })),
      // 可选：如果需要监听移除的节点，同样处理
      removedNodes: Array.from(mutation.removedNodes).map(node => ({
        outerHTML: node.outerHTML
      }))
    }));
    puppeteerLogMutation(mutationData);
  });
  observer.observe(target, { 
    childList: true,
    subtree: true // 可选：如果需要监听目标节点子树的变化，开启此项
  });
});

关键说明： #

1. 用outerHTML获取完整元素内容：这个属性会返回节点本身及所有内部子元素的HTML字符串，完全满足你"获取新增的完整元素及其内部元素"的需求。
2. 转换DOM节点集合为数组：mutation.addedNodes是类数组的NodeList，需要用Array.from()转为普通数组才能遍历。
3. 按需提取属性：如果还需要节点的className、自定义属性等，直接在map函数里添加对应字段即可。
4. 避免跨上下文传递DOM对象：exposeFunction的参数只能是可结构化克隆的数据，DOM节点、MutationRecord这类浏览器专属对象跨上下文传递时会丢失所有有效信息。

内容的提问来源于stack exchange，提问作者HunterWhiteDev