Select 页面上新创建的元素 - puppeteer

Question

I can't select newly created elements made by JS after I process selected task, let's say click on button. Exmp: obr. .

How can you see I click on button and JS adds new <tr> to current table. This <tr> can't be seen even with

await page.evaluate(() => document.querySelector('*').outerHTML)

even I tryed to wait

await page.waitForSelector(selector, { timeout: 2000 });

also with/without parametr visibility: true.

Is there a way to research content or get changed dom? Thank you for help

Answer 1

You can use MutationObserver with only childList option true . Something like this:

 const table = document.getElementById('myTable'); const observerConfig = { childList: true }; const observerCallback = (mutationsList, observer) => { for(const mutation of mutationsList) mutation.addedNodes.forEach(node => console.log(node)); }; const observer = new MutationObserver(observerCallback); observer.observe(table, observerConfig); // sample code just for adding new rows const btn = document.getElementById('myBtn'); btn.addEventListener("click",()=>{ const tr = document.createElement("TR"); const td = document.createElement("TD"); td.innerText = "I'm new"; tr.append(td); table.append(tr); });

 <table id="myTable"> <tr><td>1</td></tr> </table> <button type="button" id="myBtn">Add</button>