使用 puppeteer 和 MutationObserver 检测 DOM 更改

我想检测某些加载页面上的 DOM 更改（例如，本地新闻页面上添加的新文章）并在检测后执行某些操作（发送电子邮件）。 在此示例中，我尝试检测子节点是否已从父节点（目标 div 节点）添加或删除，并在检测后在控制台中输出某些内容。

我需要实现暴露功能吗？如果是的话，我该怎么做？

我正在使用 puppeteer 和 MutationObserver 但它不起作用。

这是我的代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');

  await page.evaluate(() => {
    const target = document.querySelector("body > div.container.upscore-pos-1 > section > div:nth-child(3) > div:nth-child(2) > div.row.hidden-xs > div > section");
    const observer = new MutationObserver( mutations => {
      for (const mutation of mutations) {
          if (mutation.type === 'childList') {
              console.log('Mutation Detected: A child node has been added or removed.');
            }
      }
    });
    observer.observe(target, { childList: true });
  });

})();

提前致谢！

Maybe page.exposeFunction()是最简单的方法：

'use strict';

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');

  await page.exposeFunction('puppeteerLogMutation', () => {
    console.log('Mutation Detected: A child node has been added or removed.');
  });

  await page.evaluate(() => {
    const target = document.querySelector('body');
    const observer = new MutationObserver( mutations => {
      for (const mutation of mutations) {
        if (mutation.type === 'childList') {
          puppeteerLogMutation();
        }
      }
    });
    observer.observe(target, { childList: true });
  });

  await page.evaluate(() => {
    document.querySelector('body').appendChild(document.createElement('br'));
  });

})();

But page.waitForSelector()（或其他一些waitFor...方法）在某些情况下也足够了：

'use strict';

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');

  await page.evaluate(() => {
    setTimeout(() => {
      document.querySelector('body')
        .appendChild(document.createElement('br')).className = 'puppeteer-test';
    }, 5000);
  });

  await page.waitForSelector('body br.puppeteer-test');

  console.log('Mutation Detected: A child node has been added or removed.');
})();