javascript Puppeteer：如何监听innerHTML的变化

5ktev3wc 于 2023-05-27 发布在 Java

关注(0)|答案(2)|浏览(192)

我有一个聊天应用程序，状态由这行表示：

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

我要人偶师记录下这段文字的每次变化。
比方说，在开始时状态是“离线”，然后它被更改为“在线”，然后在一段时间后更改为“离开”等等。我希望人偶师能捕捉到这些瞬间和状态（离线>在线>离开）
我设法做到了以下几点：

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：将循环结构转换为JSON”，这是由于传递的键值对不是原语，但即使我过度简化并只是这样做（按照1）：

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

它不会产生任何东西。
总结一下：我期待
1.让人偶师评估document.querySelector('#status').innerText !== statusText的变化
1.返回新的状态值
1.让流程循环运行

JavaScript

来源：https://stackoverflow.com/questions/50392736/puppeteer-how-to-listen-for-on-innerhtml-change

2条答案

按热度按时间

r1zhe5dt1#

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

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
})

赞(0）回复(0）举报 2023-05-27

flseospp2#

与其使用递归和setTimeout进行轮询，不如像this answer那样使用MutationObserver。

赞(0）回复(0）举报 2023-05-27

我来回答

javascript Puppeteer：如何监听innerHTML的变化

2条答案

相关问题

热门标签

最新问答