Description
Minimal, reproducible example
import puppeteer from "puppeteer";
import fs from "fs";
const pageContent = fs.readFileSync("test.html").toString();
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setContent(pageContent);
let shadowDiv = await page.waitForSelector("div[id=container]", {
timeout: 5000,
visible: true,
});
const shadowH1 = await shadowDiv.$eval(">>> h1", (h1) => h1.innerText);
console.log(shadowH1);
shadowDiv = await page.waitForSelector("div[id=container] >>> h2", {
timeout: 10000,
visible: true,
});
const shadowH2 = await shadowDiv.$eval(">>> h2", (h2) => h2.innerText);
console.log(shadowH2);
await browser.close();
})();
test.html:
<html data-lt-installed="true">
<head> </head>
<body>
<div id="container"></div>
<h1>DOM element</h1>
<script>
(function () {
var root = container.attachShadow({ mode: "open" });
//Inside element
var h1 = document.createElement("h1");
h1.textContent = "Inside Shadow DOM";
h1.id = "inside";
root.appendChild(h1);
function appendInterval() {
var h2 = document.createElement("h2");
h2.textContent = "Inside Shadow DOM setinterval";
h2.id = "inside";
root.appendChild(h2);
}
setTimeout(appendInterval, 5000);
})();
</script>
</body>
</html>Background
I have narrowed down the regression point to version 22.12.1, more precisely commit (56d1d3f).
Before changes to polling methods, this scenario used to work as expected.
Expectation
After element is added with setTimeout function, puppeteer shall be able to find it using waitForSelector method.
Reality
After shadow element is dynamically added, it is not possible to retreive it.
Puppeteer configuration file (if used)
No response
Puppeteer version
23.5.0
Node version
20.17
Package manager
yarn
Package manager version
3.5.1
Operating system
Linux