Puppeteer新手咨询：如何监听新增<tr>元素并触发执行函数？

关于waitForSelector的适用性 #

waitForSelector只适合等待某个选择器匹配的元素首次出现——如果页面初始就有<tr>元素，它会立即返回，没法检测后续新增的元素。所以如果你的场景是监控已有列表的新增项，这个方法并不适用，得用下面两种更灵活的方案：

方案1：一次性检测新增元素（适合单次监听） #

先获取初始<tr>的数量，再用waitForFunction等待数量增加，触发指定函数：

// 获取页面当前的<tr>总数
const initialTrCount = await page.$$eval('tr', elements => elements.length);

// 等待<tr>数量超过初始值
await page.waitForFunction(
  (initialCount) => document.querySelectorAll('tr').length > initialCount,
  {}, // 可选配置项（比如timeout）
  initialTrCount // 传递给页面函数的参数
);

// 执行你的指定函数
await yourTargetFunction(page); // 替换成你实际要执行的函数

方案2：持续监听新增元素（适合实时监控） #

用浏览器原生的MutationObserver监听<tr>父元素的DOM变化，一旦有新<tr>添加就触发函数，支持持续监控：

// 自定义处理新增<tr>的逻辑函数
const handleNewTr = (addedTrs) => {
  // 这里写你要执行的逻辑，比如打印新增元素内容
  addedTrs.forEach(tr => console.log('新增行:', tr.textContent));
};

// 在页面中启动MutationObserver
await page.evaluate((callback) => {
  // 找到<tr>的父容器（比如table，根据你的页面结构调整）
  const parentContainer = document.querySelector('table');
  if (!parentContainer) return;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 筛选出新增的<tr>节点
      const newTrs = Array.from(mutation.addedNodes).filter(node => 
        node.tagName === 'TR' // 注意标签名是大写的
      );
      
      if (newTrs.length > 0) {
        callback(newTrs); // 触发自定义处理函数
      }
    });
  });

  // 配置监听规则：监听子节点添加，不监听子树（可根据需求调整）
  observer.observe(parentContainer, { childList: true, subtree: false });
}, handleNewTr);

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