@browserbasehq/orca 3.4.0-preview.0 → 3.5.0-preview.0

package/dist/esm/tests/integration/wait-for-selector.spec.js

@@ -1,681 +0,0 @@
-import { expect, test } from "@playwright/test";
-import { V3 } from "../../lib/v3/v3.js";
-import { v3DynamicTestConfig } from "./v3.dynamic.config.js";
-import { closeV3 } from "./testUtils.js";
-test.describe.configure({ mode: "serial" });
-test.describe("Page.waitForSelector tests", () => {
-    let v3;
-    test.beforeAll(async () => {
-        v3 = new V3(v3DynamicTestConfig);
-        await v3.init();
-    });
-    test.beforeEach(async () => {
-        const pages = v3.context.pages();
-        if (pages.length === 0) {
-            await v3.context.newPage("about:blank");
-            return;
-        }
-        const [primary, ...extras] = pages;
-        for (const page of extras) {
-            await page.close().catch(() => { });
-        }
-        v3.context.setActivePage(primary);
-        await primary.goto("about:blank", {
-            waitUntil: "load",
-            timeoutMs: 15_000,
-        });
-    });
-    test.afterAll(async () => {
-        await closeV3(v3);
-    });
-    test.describe("Basic state tests", () => {
-        test("resolves when element is already visible", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<button id="submit-btn">Submit</button>'));
-            const result = await page.waitForSelector("#submit-btn");
-            expect(result).toBe(true);
-        });
-        test("resolves when element appears after delay", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<div id='container'></div>" +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  const btn = document.createElement('button');" +
-                    "  btn.id = 'delayed-btn';" +
-                    "  btn.textContent = 'Delayed Button';" +
-                    "  document.getElementById('container').appendChild(btn);" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#delayed-btn", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("state 'attached' resolves for hidden elements", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="hidden-div" style="display: none;">Hidden Content</div>'));
-            const result = await page.waitForSelector("#hidden-div", {
-                state: "attached",
-            });
-            expect(result).toBe(true);
-        });
-        test("state 'visible' waits for element to become visible", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="show-later" style="display: none;">Now Visible</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  document.getElementById('show-later').style.display = 'block';" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#show-later", {
-                state: "visible",
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("state 'hidden' waits for element to become hidden", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="hide-later" style="display: block;">Will Hide</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  document.getElementById('hide-later').style.display = 'none';" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#hide-later", {
-                state: "hidden",
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("state 'detached' waits for element to be removed", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="remove-me">Will Be Removed</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  const el = document.getElementById('remove-me');" +
-                    "  el.parentNode.removeChild(el);" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#remove-me", {
-                state: "detached",
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("state 'detached' resolves immediately for non-existent element", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," + encodeURIComponent("<div>Content</div>"));
-            const result = await page.waitForSelector("#does-not-exist", {
-                state: "detached",
-                timeout: 1000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Timeout behavior", () => {
-        test("throws on timeout when element never appears", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," + encodeURIComponent("<div>No button here</div>"));
-            let error = null;
-            try {
-                await page.waitForSelector("#nonexistent", { timeout: 300 });
-            }
-            catch (e) {
-                error = e;
-            }
-            expect(error).not.toBeNull();
-            expect(error?.message).toContain("Timeout");
-            expect(error?.message).toContain("#nonexistent");
-        });
-        test("respects custom timeout duration", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," + encodeURIComponent("<div>Content</div>"));
-            const startTime = Date.now();
-            try {
-                await page.waitForSelector("#nonexistent", { timeout: 500 });
-            }
-            catch {
-                // Expected to timeout
-            }
-            const elapsed = Date.now() - startTime;
-            // Should timeout around 500ms (allow some margin)
-            expect(elapsed).toBeGreaterThanOrEqual(450);
-            expect(elapsed).toBeLessThan(2000);
-        });
-    });
-    test.describe("CSS selector variants", () => {
-        test("handles complex CSS selectors", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div class="container">' +
-                    '<form id="login-form">' +
-                    '<button type="submit">Login</button>' +
-                    "</form>" +
-                    "</div>"));
-            const result = await page.waitForSelector(".container #login-form button[type='submit']");
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Open shadow DOM", () => {
-        test("finds element inside open shadow DOM with pierceShadow: true", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="host"></div>' +
-                    "<script>" +
-                    'const host = document.getElementById("host");' +
-                    'const shadow = host.attachShadow({mode: "open"});' +
-                    'shadow.innerHTML = "<button id=\\"shadow-btn\\">Shadow Button</button>";' +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("#shadow-btn", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("does NOT find shadow DOM element with pierceShadow: false", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="host"></div>' +
-                    "<script>" +
-                    'const host = document.getElementById("host");' +
-                    'const shadow = host.attachShadow({mode: "open"});' +
-                    'shadow.innerHTML = "<button id=\\"shadow-only-btn\\">Shadow Only</button>";' +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            let error = null;
-            try {
-                await page.waitForSelector("#shadow-only-btn", {
-                    pierceShadow: false,
-                    timeout: 300,
-                });
-            }
-            catch (e) {
-                error = e;
-            }
-            expect(error).not.toBeNull();
-            expect(error?.message).toContain("Timeout");
-        });
-        test("finds element in nested open shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="outer-host"></div>' +
-                    "<script>" +
-                    'const outerHost = document.getElementById("outer-host");' +
-                    'const outerShadow = outerHost.attachShadow({mode: "open"});' +
-                    'outerShadow.innerHTML = "<div id=\\"inner-host\\"></div>";' +
-                    'const innerHost = outerShadow.getElementById("inner-host");' +
-                    'const innerShadow = innerHost.attachShadow({mode: "open"});' +
-                    'innerShadow.innerHTML = "<span id=\\"deep-element\\">Deep!</span>";' +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("#deep-element", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Closed shadow DOM (via piercer)", () => {
-        test("finds element inside closed shadow DOM via custom element", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<closed-shadow-host></closed-shadow-host>" +
-                    "<script>" +
-                    "class ClosedShadowHost extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<button id=\\"closed-btn\\">Closed Shadow Button</button>";' +
-                    "  }" +
-                    "}" +
-                    "customElements.define('closed-shadow-host', ClosedShadowHost);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            // The piercer hooks attachShadow and stores closed shadow roots
-            const result = await page.waitForSelector("#closed-btn", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element in nested closed shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<outer-closed></outer-closed>" +
-                    "<script>" +
-                    "class InnerClosed extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<span id=\\"deeply-closed\\">Deeply Nested Closed</span>";' +
-                    "  }" +
-                    "}" +
-                    "customElements.define('inner-closed', InnerClosed);" +
-                    "" +
-                    "class OuterClosed extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<inner-closed></inner-closed>";' +
-                    "  }" +
-                    "}" +
-                    "customElements.define('outer-closed', OuterClosed);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("#deeply-closed", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element in mixed open/closed nested shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="open-host"></div>' +
-                    "<script>" +
-                    // Inner closed component
-                    "class ClosedInner extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<button id=\\"mixed-deep-btn\\">Mixed Deep Button</button>";' +
-                    "  }" +
-                    "}" +
-                    "customElements.define('closed-inner', ClosedInner);" +
-                    // Outer open shadow
-                    'const openHost = document.getElementById("open-host");' +
-                    'const openShadow = openHost.attachShadow({mode: "open"});' +
-                    'openShadow.innerHTML = "<closed-inner></closed-inner>";' +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("#mixed-deep-btn", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("waits for element to appear inside closed shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<delayed-closed-host></delayed-closed-host>" +
-                    "<script>" +
-                    "class DelayedClosedHost extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<div id=\\"container\\"></div>";' +
-                    "    setTimeout(() => {" +
-                    '      shadow.getElementById("container").innerHTML = ' +
-                    '        "<button id=\\"delayed-closed-btn\\">Appeared!</button>";' +
-                    "    }, 300);" +
-                    "  }" +
-                    "}" +
-                    "customElements.define('delayed-closed-host', DelayedClosedHost);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            const result = await page.waitForSelector("#delayed-closed-btn", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("XPath selectors", () => {
-        test("finds element with basic XPath", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<button id="xpath-btn">XPath Button</button>'));
-            const result = await page.waitForSelector("//button[@id='xpath-btn']", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element with xpath= prefix", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="container"><span class="target">Target</span></div>'));
-            const result = await page.waitForSelector("xpath=//span[@class='target']", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("waits for element to appear with XPath", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<div id='container'></div>" +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    '  document.getElementById("container").innerHTML = ' +
-                    '    "<span id=\\"delayed-xpath\\">Delayed XPath</span>";' +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("//span[@id='delayed-xpath']", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element in open shadow DOM with XPath", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="host"></div>' +
-                    "<script>" +
-                    'const host = document.getElementById("host");' +
-                    'const shadow = host.attachShadow({mode: "open"});' +
-                    'shadow.innerHTML = "<button id=\\"shadow-xpath-btn\\">Shadow XPath</button>";' +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("//button[@id='shadow-xpath-btn']", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element in closed shadow DOM with XPath", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<xpath-closed-host></xpath-closed-host>" +
-                    "<script>" +
-                    "class XPathClosedHost extends HTMLElement {" +
-                    "  constructor() {" +
-                    "    super();" +
-                    '    const shadow = this.attachShadow({mode: "closed"});' +
-                    '    shadow.innerHTML = "<span id=\\"xpath-closed-target\\">Closed XPath Target</span>";' +
-                    "  }" +
-                    "}" +
-                    "customElements.define('xpath-closed-host', XPathClosedHost);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("//span[@id='xpath-closed-target']", {
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Iframe hop notation (>>)", () => {
-        test("finds element inside single iframe", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<button id="main-btn">Main Button</button>' +
-                    '<iframe id="my-frame"></iframe>' +
-                    "<script>" +
-                    'const frame = document.getElementById("my-frame");' +
-                    "const doc = frame.contentDocument;" +
-                    "doc.open();" +
-                    'doc.write("<button id=\\"frame-btn\\">Frame Button</button>");' +
-                    "doc.close();" +
-                    "</script>"));
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("iframe#my-frame >> #frame-btn", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("finds element through multiple iframe hops", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<iframe id="outer-frame"></iframe>' +
-                    "<script>" +
-                    'const outerFrame = document.getElementById("outer-frame");' +
-                    "const outerDoc = outerFrame.contentDocument;" +
-                    "outerDoc.open();" +
-                    'outerDoc.write("<iframe id=\\"inner-frame\\"></iframe>");' +
-                    "outerDoc.close();" +
-                    "setTimeout(() => {" +
-                    '  const innerFrame = outerDoc.getElementById("inner-frame");' +
-                    "  const innerDoc = innerFrame.contentDocument;" +
-                    "  innerDoc.open();" +
-                    '  innerDoc.write("<div id=\\"nested-content\\">Deeply Nested</div>");' +
-                    "  innerDoc.close();" +
-                    "}, 100);" +
-                    "</script>"));
-            await page.waitForTimeout(300);
-            const result = await page.waitForSelector("iframe#outer-frame >> iframe#inner-frame >> #nested-content", { timeout: 5000 });
-            expect(result).toBe(true);
-        });
-        test("waits for element to appear inside iframe", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<iframe id="delay-frame"></iframe>' +
-                    "<script>" +
-                    'const frame = document.getElementById("delay-frame");' +
-                    "const doc = frame.contentDocument;" +
-                    "doc.open();" +
-                    'doc.write("<div id=\\"container\\"></div>");' +
-                    "doc.close();" +
-                    "setTimeout(() => {" +
-                    '  doc.getElementById("container").innerHTML = ' +
-                    '    "<span id=\\"delayed-in-frame\\">Appeared!</span>";' +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("iframe#delay-frame >> #delayed-in-frame", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Visibility edge cases", () => {
-        test("visibility: hidden is not visible", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="vis-hidden" style="visibility: hidden;">Hidden</div>'));
-            // Should be attached but not visible
-            const attached = await page.waitForSelector("#vis-hidden", {
-                state: "attached",
-            });
-            expect(attached).toBe(true);
-            let error = null;
-            try {
-                await page.waitForSelector("#vis-hidden", {
-                    state: "visible",
-                    timeout: 200,
-                });
-            }
-            catch (e) {
-                error = e;
-            }
-            expect(error).not.toBeNull();
-        });
-        test("opacity: 0 is not visible", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="transparent" style="opacity: 0;">Transparent</div>'));
-            const attached = await page.waitForSelector("#transparent", {
-                state: "attached",
-            });
-            expect(attached).toBe(true);
-            let error = null;
-            try {
-                await page.waitForSelector("#transparent", {
-                    state: "visible",
-                    timeout: 200,
-                });
-            }
-            catch (e) {
-                error = e;
-            }
-            expect(error).not.toBeNull();
-        });
-        test("zero dimensions is not visible", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="zero-size" style="width: 0; height: 0;">Zero</div>'));
-            const attached = await page.waitForSelector("#zero-size", {
-                state: "attached",
-            });
-            expect(attached).toBe(true);
-            let error = null;
-            try {
-                await page.waitForSelector("#zero-size", {
-                    state: "visible",
-                    timeout: 200,
-                });
-            }
-            catch (e) {
-                error = e;
-            }
-            expect(error).not.toBeNull();
-        });
-        test("detects visibility change via class toggle", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<style>.hidden { display: none; }</style>" +
-                    '<div id="class-toggle" class="hidden">Class Toggle</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  document.getElementById('class-toggle').classList.remove('hidden');" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#class-toggle", {
-                state: "visible",
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("detects visibility change via style attribute", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="style-toggle" style="display: none;">Style Toggle</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    "  document.getElementById('style-toggle').style.display = 'block';" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#style-toggle", {
-                state: "visible",
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Dynamic DOM scenarios", () => {
-        test("handles rapid DOM mutations", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent("<div id='container'></div>" +
-                    "<script>" +
-                    "let count = 0;" +
-                    "const interval = setInterval(() => {" +
-                    "  count++;" +
-                    "  const div = document.createElement('div');" +
-                    "  div.id = 'item-' + count;" +
-                    "  div.textContent = 'item';" +
-                    "  document.getElementById('container').appendChild(div);" +
-                    "  if (count >= 10) clearInterval(interval);" +
-                    "}, 50);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            // Small delay to ensure script starts
-            await page.waitForTimeout(50);
-            const result = await page.waitForSelector("#item-7", { timeout: 10000 });
-            expect(result).toBe(true);
-        });
-        test("handles element removed and re-added", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="toggle-me">Toggle</div>'));
-            const browserTarget = (process.env.STAGEHAND_BROWSER_TARGET ?? "local").toLowerCase();
-            const isBrowserbase = browserTarget === "browserbase";
-            const removeDelayMs = isBrowserbase ? 1000 : 200;
-            const addDelayMs = isBrowserbase ? 1600 : 500;
-            const waitTimeoutMs = isBrowserbase ? 10000 : 5000;
-            // Start waiting before scheduling DOM changes to avoid racey timing in CI.
-            const detachedPromise = page.waitForSelector("#toggle-me", {
-                state: "detached",
-                timeout: waitTimeoutMs,
-            });
-            await page.evaluate(({ removeDelay, addDelay }) => {
-                const el = document.getElementById("toggle-me");
-                const parent = el?.parentNode;
-                if (!el || !parent)
-                    return;
-                setTimeout(() => parent.removeChild(el), removeDelay);
-                setTimeout(() => parent.appendChild(el), addDelay);
-            }, { removeDelay: removeDelayMs, addDelay: addDelayMs });
-            const detached = await detachedPromise;
-            expect(detached).toBe(true);
-            // Then wait for visible again
-            const visible = await page.waitForSelector("#toggle-me", {
-                state: "visible",
-                timeout: waitTimeoutMs,
-            });
-            expect(visible).toBe(true);
-        });
-        test("handles dynamically replaced innerHTML", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="container">Loading...</div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    '  document.getElementById("container").innerHTML = ' +
-                    '    "<button id=\\"loaded-btn\\">Loaded!</button>";' +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#loaded-btn", {
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("handles element created via insertAdjacentHTML", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="anchor"></div>' +
-                    "<script>" +
-                    "setTimeout(() => {" +
-                    '  document.getElementById("anchor").insertAdjacentHTML(' +
-                    '    "afterend", "<div id=\\"inserted\\">Inserted</div>"' +
-                    "  );" +
-                    "}, 300);" +
-                    "</script>"));
-            const result = await page.waitForSelector("#inserted", { timeout: 5000 });
-            expect(result).toBe(true);
-        });
-    });
-    test.describe("Shadow DOM visibility changes", () => {
-        test("detects element becoming visible inside open shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="host"></div>' +
-                    "<script>" +
-                    'const host = document.getElementById("host");' +
-                    'const shadow = host.attachShadow({mode: "open"});' +
-                    'shadow.innerHTML = "<button id=\\"shadow-btn\\" style=\\"display:none\\">Shadow</button>";' +
-                    "setTimeout(() => {" +
-                    '  shadow.getElementById("shadow-btn").style.display = "block";' +
-                    "}, 300);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            const result = await page.waitForSelector("#shadow-btn", {
-                state: "visible",
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-        test("detects element becoming hidden inside shadow DOM", async () => {
-            const page = v3.context.pages()[0];
-            await page.goto("data:text/html," +
-                encodeURIComponent('<div id="host"></div>' +
-                    "<script>" +
-                    'const host = document.getElementById("host");' +
-                    'const shadow = host.attachShadow({mode: "open"});' +
-                    'shadow.innerHTML = "<button id=\\"hide-shadow-btn\\">Will Hide</button>";' +
-                    "setTimeout(() => {" +
-                    '  shadow.getElementById("hide-shadow-btn").style.display = "none";' +
-                    "}, 300);" +
-                    "</script>"), { waitUntil: "load", timeoutMs: 30000 });
-            await page.waitForTimeout(100);
-            const result = await page.waitForSelector("#hide-shadow-btn", {
-                state: "hidden",
-                pierceShadow: true,
-                timeout: 5000,
-            });
-            expect(result).toBe(true);
-        });
-    });
-});
-//# sourceMappingURL=wait-for-selector.spec.js.map