fix: handle empty quads from getContentQuads for proximity selectors

.github/workflows/taiko.yml

@@ -45,8 +45,17 @@ jobs:
         uses: biomejs/setup-biome@v2
       - run: biome check packages/taiko
       - name: Run unit tests
+        if: matrix.os != 'windows-latest'
         run: npm run test:unit:silent
 
+      - name: Run unit tests (windows, with retry)
+        if: matrix.os == 'windows-latest'
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 10
+          max_attempts: 2
+          command: npm run test:unit:silent
+
   functional-tests:
     needs: unit-tests
     name: FTs - NodeJS ${{ matrix.node_version }} & ${{ matrix.os }}
@@ -82,8 +91,17 @@ jobs:
             libgbm-dev \
             libasound-dev
       - name: functional-tests
+        if: matrix.os != 'windows-latest'
         run: npm run test-functional
 
+      - name: functional-tests (windows, with retry)
+        if: matrix.os == 'windows-latest'
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 15
+          max_attempts: 2
+          command: npm run test-functional
+
       - name: Upload html report
         uses: actions/upload-artifact@v6
         if: failure()

packages/taiko/lib/elements/elementHelper.js

@@ -12,9 +12,16 @@ const highlightElement = async (element) => {
 
   if (await element.isVisible()) {
     const result = await domHandler.getBoxModel(element.get());
-    await overlayHandler.highlightQuad(result.model.border);
-    await wait(1000);
-    await overlayHandler.hideHighlight();
+    if (result) {
+      await overlayHandler.highlightQuad(result.model.border);
+      await wait(1000);
+      await overlayHandler.hideHighlight();
+    } else {
+      console.warn(
+        "WARNING: Taiko cannot highlight element — no rendered content quads " +
+          "(element may be off-screen, zero-sized, or not yet laid out).",
+      );
+    }
   } else {
     console.warn("WARNING: Taiko cannot highlight hidden elements.");
   }

packages/taiko/lib/handlers/domHandler.js

@@ -139,6 +139,9 @@ async function getBoxModel(e) {
   const result = await dom.getContentQuads({
     objectId: isElement(e) ? e.objectId : e,
   });
+  if (!result.quads || result.quads.length === 0) {
+    return null;
+  }
   return { model: { border: result.quads[0] } };
 }
 
@@ -159,6 +162,9 @@ async function getBoundingClientRect(e) {
 const getPositionalDifference = async (nodeA, nodeB) => {
   const r = await getBoundingClientRect(nodeA);
   const v = await getBoundingClientRect(nodeB);
+  if (!r || !v) {
+    return Number.POSITIVE_INFINITY;
+  }
   const topDiff = Math.abs(r.top - v.top);
   const leftDiff = Math.abs(r.left - v.left);
   const bottomDiff = Math.abs(r.bottom - v.bottom);

tests/unit-tests/evaluate.test.js

@@ -12,7 +12,10 @@ const {
   closeBrowser,
   setConfig,
 } = require("taiko");
-const expect = require("chai").expect;
+const chai = require("chai");
+const chaiAsPromised = require("chai-as-promised");
+chai.use(chaiAsPromised);
+const expect = chai.expect;
 const testName = "Evaluate";
 
 describe(testName, () => {

tests/unit-tests/proximitySelectors/proximitySelector.test.js

@@ -0,0 +1,99 @@
+const chai = require("chai");
+const expect = chai.expect;
+const chaiAsPromised = require("chai-as-promised");
+chai.use(chaiAsPromised);
+const {
+  openBrowser,
+  goto,
+  closeBrowser,
+  text,
+  toRightOf,
+  toLeftOf,
+  above,
+  below,
+  near,
+  setConfig,
+} = require("taiko");
+const {
+  createHtml,
+  removeFile,
+  openBrowserArgs,
+  resetConfig,
+} = require("../test-util");
+const test_name = "proximitySelector";
+
+describe(test_name, () => {
+  let filePath;
+  before(async () => {
+    const innerHtml =
+      '<div style="display:flex; gap:20px; align-items:center;">' +
+      '  <span id="label-left">LabelLeft</span>' +
+      '  <span id="label-right">LabelRight</span>' +
+      "</div>" +
+      '<div style="display:flex; flex-direction:column; gap:20px;">' +
+      '  <span id="label-top">LabelTop</span>' +
+      '  <span id="label-bottom">LabelBottom</span>' +
+      "</div>" +
+      '<div style="position:relative;">' +
+      '  <span id="label-near">LabelNear</span>' +
+      '  <span id="target-near" style="margin-left:10px;">TargetNear</span>' +
+      "</div>" +
+      // hidden element — triggers empty quads[] from getContentQuads (regression for #2757)
+      '<button style="display:none">HiddenButton</button>' +
+      '<span style="display:none">HiddenText</span>';
+
+    filePath = createHtml(innerHtml, test_name);
+    await openBrowser(openBrowserArgs);
+    await goto(filePath);
+    setConfig({
+      waitForNavigation: false,
+      retryTimeout: 10,
+      retryInterval: 10,
+    });
+  });
+
+  after(async () => {
+    resetConfig();
+    await closeBrowser();
+    removeFile(filePath);
+  });
+
+  describe("proximity selectors", () => {
+    it("toRightOf should not throw TypeError", async () => {
+      expect(
+        await text("LabelRight", toRightOf("LabelLeft")).exists(),
+      ).to.be.true;
+    });
+
+    it("toLeftOf should not throw TypeError", async () => {
+      expect(
+        await text("LabelLeft", toLeftOf("LabelRight")).exists(),
+      ).to.be.true;
+    });
+
+    it("below should not throw TypeError", async () => {
+      expect(
+        await text("LabelBottom", below("LabelTop")).exists(),
+      ).to.be.true;
+    });
+
+    it("above should not throw TypeError", async () => {
+      expect(await text("LabelTop", above("LabelBottom")).exists()).to.be.true;
+    });
+
+    it("near should not throw TypeError", async () => {
+      expect(
+        await text("TargetNear", near("LabelNear")).exists(),
+      ).to.be.true;
+    });
+
+    // Regression test for issue #2757:
+    // hidden elements return empty quads[] from getContentQuads,
+    // which previously caused TypeError: Cannot read properties of undefined (reading '1')
+    it("proximity search near a hidden element should not crash", async () => {
+      await expect(
+        text("LabelNear", near("HiddenText")).exists(),
+      ).to.not.be.rejectedWith(TypeError);
+    });
+  });
+});