Puppeteer: How To Listen For On Innerhtml Change

I have a chat app with status represented by this line: Offline and I want Puppeteer to log every time the text within this span changes. Sa

Solution 1:

I'd just set a recursive function with a callback:

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