feat(dom-snapshot): implement cursor: pointer detection for interactive elements and enhance test coverage

Author: jk4235

packages/dom-snapshot/src/__tests__/dom-automation.test.ts

@@ -315,6 +315,35 @@ describe("DOM snapshot collector", () => {
     expect(labelledDiv?.name).toBe("Description Label");
   });
 
+  it("captures span with aria-label inside nested structure (real-world icon button)", () => {
+    setHtml(`
+      <div class="ant-space-item">
+        <span aria-describedby="rh">
+          <span class="anticon zcp-icon" aria-label="Show Deploy Detail" data-testid="action-detail" style="font-size: 16px;">
+            <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
+              <path d="M833.013155 249.550056L468.049052"></path>
+            </svg>
+          </span>
+        </span>
+      </div>
+    `);
+
+    const snapshot = collectDomSnapshot(document);
+    const nodes = Object.values(snapshot.idToNode);
+
+    // The span with aria-label="Show Deploy Detail" should be captured
+    const iconSpan = nodes.find((n) => n.name === "Show Deploy Detail");
+    expect(iconSpan).toBeTruthy();
+    expect(iconSpan?.tagName).toBe("span");
+    expect(iconSpan?.name).toBe("Show Deploy Detail");
+
+    // Search should find it
+    const searchResult = searchAndFormat(snapshot, "Show Deploy Detail");
+    expect(searchResult).not.toBeNull();
+    expect(searchResult).toContain("Show Deploy Detail");
+    expect(searchResult).not.toContain("No matches found");
+  });
+
   it("captures nested text content through multiple skipped generic elements", () => {
     setHtml(`
       <div>
@@ -1944,3 +1973,197 @@ describe("searchAndFormat", () => {
     expect(result).toContain("Cancel");
   });
 });
+
+describe("cursor: pointer detection", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("includes elements with cursor: pointer style as interactive", () => {
+    // Add a style element with cursor: pointer
+    document.body.innerHTML = `
+      <style>
+        .clickable-card { cursor: pointer; }
+      </style>
+      <div class="clickable-card">
+        <span>Card Title</span>
+        <span>Card Description</span>
+      </div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const nodes = Object.values(snapshot.idToNode);
+
+    // The clickable-card div should be captured as a node (not just its text children)
+    const cardNode = nodes.find(
+      (n) =>
+        n.tagName === "div" &&
+        n.children &&
+        n.children.some(
+          (c) => c.role === "StaticText" && c.name === "Card Title",
+        ),
+    );
+
+    expect(cardNode).toBeDefined();
+    expect(cardNode?.id).toBeTruthy();
+  });
+
+  it("includes inline cursor: pointer elements", () => {
+    document.body.innerHTML = `
+      <div style="cursor: pointer;">Clickable Inline</div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const nodes = Object.values(snapshot.idToNode);
+
+    // Should capture the div with cursor: pointer
+    const clickableDiv = nodes.find(
+      (n) =>
+        n.tagName === "div" &&
+        n.children?.some(
+          (c) => c.role === "StaticText" && c.name === "Clickable Inline",
+        ),
+    );
+
+    expect(clickableDiv).toBeDefined();
+  });
+
+  it("assigns node IDs to cursor: pointer elements for automation", () => {
+    document.body.innerHTML = `
+      <style>.clickable { cursor: pointer; }</style>
+      <div class="clickable">Click Me</div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const clickableEl = document.querySelector(".clickable");
+    const nodeId = clickableEl?.getAttribute("data-aipex-nodeid");
+
+    expect(nodeId).toBeTruthy();
+    expect(snapshot.idToNode[nodeId!]).toBeDefined();
+  });
+
+  it("captures card component with cursor-pointer (simulating shadcn/ui card)", () => {
+    document.body.innerHTML = `
+      <style>.cursor-pointer { cursor: pointer; }</style>
+      <div data-slot="card" class="cursor-pointer bg-card rounded-xl border shadow-sm">
+        <div data-slot="card-header" class="flex flex-row items-center">
+          <div class="p-2 rounded-md bg-gray-100">
+            <svg class="size-4"></svg>
+          </div>
+          <div>
+            <div data-slot="card-title" class="text-base font-semibold">
+              deploy-k8s-workloads
+            </div>
+            <div class="text-sm text-gray-600 mt-1">
+              Usage zam and kapp deploy k8s workloads
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const cardEl = document.querySelector('[data-slot="card"]');
+    const nodeId = cardEl?.getAttribute("data-aipex-nodeid");
+
+    expect(nodeId).toBeTruthy();
+    expect(snapshot.idToNode[nodeId!]).toBeDefined();
+    expect(snapshot.idToNode[nodeId!]?.tagName).toBe("div");
+  });
+
+  it("searchAndFormat finds text within cursor-pointer card", () => {
+    document.body.innerHTML = `
+      <style>.cursor-pointer { cursor: pointer; }</style>
+      <div class="cursor-pointer">
+        <span>deploy-k8s-workloads</span>
+        <span>Usage zam and kapp deploy</span>
+      </div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const result = searchAndFormat(snapshot, "deploy-k8s-workloads");
+
+    expect(result).not.toBeNull();
+    expect(result).toContain("deploy-k8s-workloads");
+    expect(result).not.toContain("No matches found");
+  });
+
+  it("captures nested cursor-pointer elements with separate IDs", () => {
+    document.body.innerHTML = `
+      <style>
+        .outer-card { cursor: pointer; }
+        .inner-tag { cursor: pointer; }
+      </style>
+      <div class="outer-card">
+        <h3>Card Title</h3>
+        <span class="inner-tag">Clickable Tag</span>
+      </div>
+    `;
+
+    collectDomSnapshot(document);
+    const outerEl = document.querySelector(".outer-card");
+    const innerEl = document.querySelector(".inner-tag");
+
+    expect(outerEl?.getAttribute("data-aipex-nodeid")).toBeTruthy();
+    expect(innerEl?.getAttribute("data-aipex-nodeid")).toBeTruthy();
+    expect(outerEl?.getAttribute("data-aipex-nodeid")).not.toBe(
+      innerEl?.getAttribute("data-aipex-nodeid"),
+    );
+  });
+
+  it("captures ant-tag with cursor-pointer as clickable element", () => {
+    document.body.innerHTML = `
+      <style>.cursor-pointer { cursor: pointer; }</style>
+      <span class="ant-tag cursor-pointer text-blue-500">
+        dev/main/va1/meta
+      </span>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const tagEl = document.querySelector(".ant-tag");
+    const nodeId = tagEl?.getAttribute("data-aipex-nodeid");
+
+    expect(nodeId).toBeTruthy();
+    expect(snapshot.idToNode[nodeId!]).toBeDefined();
+    expect(snapshot.idToNode[nodeId!]?.tagName).toBe("span");
+  });
+
+  it("does not treat cursor: default elements as interactive", () => {
+    document.body.innerHTML = `
+      <style>.not-clickable { cursor: default; }</style>
+      <div class="not-clickable">Not Clickable</div>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const nodes = Object.values(snapshot.idToNode);
+
+    // Should not include the div as a separate node since it has cursor: default
+    // The text should still be captured as StaticText
+    const staticTextNode = nodes.find(
+      (n) => n.role === "StaticText" && n.name === "Not Clickable",
+    );
+    expect(staticTextNode).toBeDefined();
+  });
+
+  it("captures table row with cursor-pointer for row click actions", () => {
+    document.body.innerHTML = `
+      <style>.clickable-row { cursor: pointer; }</style>
+      <table>
+        <tbody>
+          <tr class="clickable-row">
+            <td>Row Data 1</td>
+            <td>Row Data 2</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+
+    const snapshot = collectDomSnapshot(document);
+    const rowEl = document.querySelector(".clickable-row");
+    const nodeId = rowEl?.getAttribute("data-aipex-nodeid");
+
+    expect(nodeId).toBeTruthy();
+    expect(snapshot.idToNode[nodeId!]).toBeDefined();
+    expect(snapshot.idToNode[nodeId!]?.tagName).toBe("tr");
+  });
+});

packages/dom-snapshot/src/collector.ts

@@ -352,6 +352,23 @@ function hasExplicitAccessibleLabel(
   return false;
 }
 
+/**
+ * Check if an element has cursor: pointer style, indicating it's clickable via CSS/JS.
+ * This helps identify interactive elements that don't use semantic HTML.
+ */
+function hasCursorPointer(element: Element, rootDocument: Document): boolean {
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+
+  const style = rootDocument.defaultView?.getComputedStyle(element);
+  if (!style) {
+    return false;
+  }
+
+  return style.cursor === "pointer";
+}
+
 function shouldIncludeElement(
   element: Element,
   options: CollectorOptions,
@@ -377,6 +394,11 @@ function shouldIncludeElement(
     return true;
   }
 
+  // Include elements with cursor: pointer style (clickable via CSS/JS)
+  if (hasCursorPointer(element, rootDocument)) {
+    return true;
+  }
+
   if (role === "image") {
     const img = element as HTMLImageElement;
     return Boolean(img.alt && img.alt.trim().length > 0);