@browserbasehq/orca 3.1.0-patch.0 → 3.1.0-patch.1

package/dist/cjs/lib/v3/tests/wait-for-selector.spec.js

@@ -0,0 +1,593 @@
+var import_test = require("@playwright/test");
+var import_v3 = require("../v3.js");
+var import_v3_dynamic_config = require("./v3.dynamic.config.js");
+var import_testUtils = require("./testUtils.js");
+import_test.test.describe.configure({ mode: "serial" });
+import_test.test.describe("Page.waitForSelector tests", () => {
+  let v3;
+  import_test.test.beforeAll(async () => {
+    v3 = new import_v3.V3(import_v3_dynamic_config.v3DynamicTestConfig);
+    await v3.init();
+  });
+  import_test.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: 15e3
+    });
+  });
+  import_test.test.afterAll(async () => {
+    await (0, import_testUtils.closeV3)(v3);
+  });
+  import_test.test.describe("Basic state tests", () => {
+    (0, import_test.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");
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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"
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 1e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Timeout behavior", () => {
+    (0, import_test.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;
+      }
+      (0, import_test.expect)(error).not.toBeNull();
+      (0, import_test.expect)(error?.message).toContain("Timeout");
+      (0, import_test.expect)(error?.message).toContain("#nonexistent");
+    });
+    (0, import_test.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 {
+      }
+      const elapsed = Date.now() - startTime;
+      (0, import_test.expect)(elapsed).toBeGreaterThanOrEqual(450);
+      (0, import_test.expect)(elapsed).toBeLessThan(2e3);
+    });
+  });
+  import_test.test.describe("CSS selector variants", () => {
+    (0, import_test.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']"
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Open shadow DOM", () => {
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#shadow-btn", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      let error = null;
+      try {
+        await page.waitForSelector("#shadow-only-btn", {
+          pierceShadow: false,
+          timeout: 300
+        });
+      } catch (e) {
+        error = e;
+      }
+      (0, import_test.expect)(error).not.toBeNull();
+      (0, import_test.expect)(error?.message).toContain("Timeout");
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#deep-element", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Closed shadow DOM (via piercer)", () => {
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#closed-btn", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#deeply-closed", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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>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);const openHost = document.getElementById("open-host");const openShadow = openHost.attachShadow({mode: "open"});openShadow.innerHTML = "<closed-inner></closed-inner>";</script>`
+        ),
+        { waitUntil: "load", timeoutMs: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#mixed-deep-btn", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      const result = await page.waitForSelector("#delayed-closed-btn", {
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("XPath selectors", () => {
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+        }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector(
+        "//button[@id='shadow-xpath-btn']",
+        {
+          pierceShadow: true,
+          timeout: 5e3
+        }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector(
+        "//span[@id='xpath-closed-target']",
+        {
+          pierceShadow: true,
+          timeout: 5e3
+        }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Iframe hop notation (>>)", () => {
+    (0, import_test.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: 5e3
+        }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3 }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+        }
+      );
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Visibility edge cases", () => {
+    (0, import_test.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>'
+        )
+      );
+      const attached = await page.waitForSelector("#vis-hidden", {
+        state: "attached"
+      });
+      (0, import_test.expect)(attached).toBe(true);
+      let error = null;
+      try {
+        await page.waitForSelector("#vis-hidden", {
+          state: "visible",
+          timeout: 200
+        });
+      } catch (e) {
+        error = e;
+      }
+      (0, import_test.expect)(error).not.toBeNull();
+    });
+    (0, import_test.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"
+      });
+      (0, import_test.expect)(attached).toBe(true);
+      let error = null;
+      try {
+        await page.waitForSelector("#transparent", {
+          state: "visible",
+          timeout: 200
+        });
+      } catch (e) {
+        error = e;
+      }
+      (0, import_test.expect)(error).not.toBeNull();
+    });
+    (0, import_test.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"
+      });
+      (0, import_test.expect)(attached).toBe(true);
+      let error = null;
+      try {
+        await page.waitForSelector("#zero-size", {
+          state: "visible",
+          timeout: 200
+        });
+      } catch (e) {
+        error = e;
+      }
+      (0, import_test.expect)(error).not.toBeNull();
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Dynamic DOM scenarios", () => {
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(50);
+      const result = await page.waitForSelector("#item-7", { timeout: 1e4 });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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 ? 1e3 : 200;
+      const addDelayMs = isBrowserbase ? 1600 : 500;
+      const waitTimeoutMs = isBrowserbase ? 1e4 : 5e3;
+      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;
+      (0, import_test.expect)(detached).toBe(true);
+      const visible = await page.waitForSelector("#toggle-me", {
+        state: "visible",
+        timeout: waitTimeoutMs
+      });
+      (0, import_test.expect)(visible).toBe(true);
+    });
+    (0, import_test.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: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 5e3 });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+  import_test.test.describe("Shadow DOM visibility changes", () => {
+    (0, import_test.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: 3e4 }
+      );
+      const result = await page.waitForSelector("#shadow-btn", {
+        state: "visible",
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+    (0, import_test.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: 3e4 }
+      );
+      await page.waitForTimeout(100);
+      const result = await page.waitForSelector("#hide-shadow-btn", {
+        state: "hidden",
+        pierceShadow: true,
+        timeout: 5e3
+      });
+      (0, import_test.expect)(result).toBe(true);
+    });
+  });
+});
+//# sourceMappingURL=wait-for-selector.spec.js.map