[Question] Can I watch for changes in a specific element?

Hi!

I’m trying watch for changes in a certain div that keeps getting new elements added to it. I couldn’t seem to find a proper way of listening to such “change” event via the API, am I missing something?

Thanks in advance.

P.S: I though about using MutationObserver but page.$$('.someClass') isn’t returning a Node type object (not to mention the workaround of using window in a nodejs environment just to be able to use MutationObserver).

[dgozman]

There is no such API. Using MutationObserver is a good way to achieve this. Note that you have to evaluate the whole script in the page context:

// Get a handle to the div.
const divHandle = await page.$('text=Target div');
await divHandle.evaluate(div => {
  new MutationObserver((mutationsList, observer) => {
    // Handle mutations.
  }).observe(div, { childList: true, subtree: true });
});

Does this answer your question?

[Ron-SSG]

Thanks a lot for all the help!

I ended up using page.exposeFunction() to allow me to use the Node.js API like so:

const myClassHandle = await page.$('.myClass');

page.exposeFunction('myNodeFunc', async () => {
	externalNodeFunc(myClassHandle);
});

await myClassHandle.evaluate((div) => {
  return new Promise(resolve => {
    new window.MutationObserver((mutationsList, observer) => {
      if (div.childElementCount >= 1) {
        myNodeFunc();
        resolve();
      }
    }).observe(div, { childList: true });
  });
});

// Find the latest element added to the div and get its internals
const externalNodeFunc = (myClassHandle) => {
  const whatIWantedToFind = await myClassHandle.$$('.mySubClass');
  const lastChildAdded = await whatIWantedToFind[ whatIWantedToFind.length -1 ].$$('.inner-element');
}

Hope this could help someone in the future 😄 Thanks again @dgozman !