Puppeteer：如何监听 innerHTML 的变化

Question

我有一个聊天应用，其状态由这条线表示：

<span id='status'>Offline</span> 

并且我希望 Puppeteer 每次在此范围内的文本发生更改时都进行记录。

比如说，一开始状态是“离线”，然后又变成了“在线”，过了一段时间又变成了“离开”等等。我希望 Puppeteer 捕捉那些时刻和状态（离线>在线>离开）

我设法做到以下几点：

const page = await browser.newPage();
await page.goto('https://chat.com');
const statusHandle = await page.$('span#status');
let statusText = await page.evaluate(() => document.querySelector('#status').innerText);
let iniVal = {statusHandle,statusText };

此时我有statusHandle 和初始状态。

现在，我的理解（根据1 和2）是我需要将两者结合起来

await page.waitForFunction(
  (iniVal) => iniVal.statusHandle.innerHTML !== iniVal.statusText, 
  { timeout: 0 }, 
  iniVal
) 

并将它放在一个循环中。这就是我苦苦挣扎的地方。

首先它给出了一个类型错误“TypeError: Converting circular structure to JSON”，这是由于传递的键值对不是原语，但即使我过度简化并且只是这样做（根据1）：

await page.waitForFunction(
  'document.querySelector("span#status").inner‌​Text === "Online"'
)

它什么也没产生。

总结：我期待

1. 让 Puppeteer 评估 document.querySelector('#status').innerText !== statusText 中的更改

2. 返回新的状态值

3. 让进程循环运行

Answer 1

我只是设置了一个带有回调的递归函数：

async function monitor (selector, callback, prevValue) {
  const newVal = await page.$(selector);
  if (newVal !== prevValue) {
    callback(newVal);
  }
  /* add some delay */
  await new Promise(_ => setTimeout(_, 1000))
  /* call recursively */
  monitor (selector, callback, newVal);
}

monitor('span#status', status => {
  // Fires whenever `status` changes
})