使用puppeteer和MutationObserver检测DOM变化。

Question

我想检测某些加载页面的DOM变化（例如，在本地新闻页面上添加了新的文章），并在检测后做一些事情（发送电子邮件）.在这个例子中，我试图检测子节点是否已从父节点（目标div节点）中添加或删除，并在检测后在控制台输出一些东西。

我需要实现expose函数吗？如果需要，我怎么做？

我使用了pupetter和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 });
  });

})();

先谢谢你！

Answer 1

可能是 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'));
  });

})();

但是... 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.');
})();

Answer 2

你可以直接等待那些console.logs并捕捉它们:

let msg = await page.evaluate(() => new Promise((resolve, reject) => {
  console.log = (msg) => resolve(msg)
}))

或者你可以添加一个page.on('console')监听器。