Кукловод: как прислушиваться к изменениям innerHTML

Question

У меня есть приложение чата, статус которого представлен этой строкой:

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

и я хочу, чтобы 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: Преобразование циклической структуры в 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
})