Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to inject mutationobserver to puppeteer

I want trace changed DOM like mutationobserver in headless chrome. So I learning puppeteer library, but don’t know how to use do that.

It’s possible to trace DOM change in puppeteer?? thanks

like image 976
booraik Avatar asked Dec 20 '17 10:12

booraik


1 Answers

Well,you can inject custom code to the browser.

One way:

await page.evaluate(() => {
   const observer = new MutationObserver(
   function() {
     // communicate with node through console.log method
     console.log('__mutation')
    }
   )
   const config = {
     attributes: true,
     childList: true,
     characterData: true,
     subtree: true
   }
   observer.observe(target, config)
})

In your node script:

page.on('console', async (msg) => {
   if (msg.text === '__mutation') {
     // do something...
   }
}) 
like image 200
X Rene Avatar answered Oct 27 '22 10:10

X Rene