feat(extension): support OOPIF refs with unified frame geometry

apps/extension/src/tools/vom/__tests__/capture.test.ts

@@ -698,7 +698,7 @@ describe("captureViewModel", () => {
     const { nodes } = await captureViewModel(cdp, 4);
     const div = nodes.find((n) => n.backendNodeId === 12);
     expect(div?.localRect?.y).toBe(-200);
-    expect(div?.rect).toMatchObject({ y: -200, h: 800 });
+    expect(div?.rect).toMatchObject({ y: 0, h: 600 });
   });
 
   it("normalizes device-pixel bounds by devicePixelRatio", async () => {
@@ -919,7 +919,7 @@ describe("captureViewModel", () => {
     expect(input?.attrs.type).toBe("text");
     expect(input?.ownerFrameBackendNodeId).toBe(13);
     expect(input?.localRect).toEqual({ x: 0, y: 0, w: 200, h: 40 });
-    expect(input?.rect).toBeNull();
+    expect(input?.rect).toEqual({ x: 100, y: 300, w: 200, h: 40 });
     expect(rootFrameId).toBe("main-frame");
     expect(frameNodes?.get("child-frame")).toBe(subNodes);
     expect(frameOwnerBackendNodeIds?.get("child-frame")).toBe(13);
@@ -1091,10 +1091,10 @@ describe("captureViewModel", () => {
     const input = iframeNodes.get(23)?.find((n) => n.backendNodeId === 31);
 
     expect(nestedIframe?.localRect).toEqual({ x: 5, y: 6, w: 100, h: 80 });
-    expect(nestedIframe?.rect).toBeNull();
+    expect(nestedIframe?.rect).toEqual({ x: 15, y: 26, w: 100, h: 80 });
     expect(input?.ownerFrameBackendNodeId).toBe(23);
     expect(input?.localRect).toEqual({ x: 1, y: 2, w: 40, h: 20 });
-    expect(input?.rect).toBeNull();
+    expect(input?.rect).toEqual({ x: 16, y: 28, w: 40, h: 20 });
   });
 
   it("normalizes bounds then subtracts CSS scroll at dpr>1", async () => {

apps/extension/src/tools/vom/__tests__/frame-capture.test.ts

@@ -3,61 +3,133 @@ import type { CdpRunner } from "../../shared";
 import type { CapturedNode, CapturedViewModel } from "../capture";
 import { captureFrameData } from "../frame-capture";
 
-function node(frameId: string, backendNodeId: number): CapturedNode {
+function ownerNode(backendNodeId: number, x: number): CapturedNode {
   return {
     backendNodeId,
-    parentBackendNodeId: null,
-    frameId,
-    tag: "div",
+    parentBackendNodeId: 1,
+    frameId: "main",
+    ownerFrameBackendNodeId: null,
+    tag: "iframe",
     attrs: {},
-    rect: null,
-    localRect: { x: 0, y: 0, w: 20, h: 20 },
-    paintOrder: 0,
+    rect: { x, y: 100, w: 300, h: 200 },
+    localRect: { x, y: 100, w: 300, h: 200 },
+    paintOrder: 1,
     position: "static",
     pointerEvents: "auto",
   };
 }
 
+function childSnapshot(frameId: string, backendNodeId: number) {
+  const strings = [frameId, "body", "button", "static", "auto", "pointer"];
+  return {
+    strings,
+    documents: [
+      {
+        frameId,
+        nodes: {
+          parentIndex: [-1, 0],
+          nodeName: [1, 2],
+          backendNodeId: [backendNodeId - 1, backendNodeId],
+          attributes: [[], []],
+        },
+        layout: {
+          nodeIndex: [0, 1],
+          styles: [
+            [3, 4, 4],
+            [3, 4, 5],
+          ],
+          bounds: [
+            [0, 0, 300, 200],
+            [10, 20, 100, 40],
+          ],
+          paintOrders: [0, 1],
+        },
+      },
+    ],
+  };
+}
+
 describe("captureFrameData", () => {
-  it("captures AX trees for every same-target frame found in the DOM snapshot", async () => {
+  it("captures and positions multiple OOPIF documents missing from the root snapshot", async () => {
+    const leftOwner = ownerNode(10, 50);
+    const rightOwner = ownerNode(20, 500);
     const captured: CapturedViewModel = {
-      nodes: [node("main", 1)],
+      nodes: [leftOwner, rightOwner],
       viewport: { width: 1000, height: 800 },
-      iframeNodes: new Map([[10, [node("child", 101)]]]),
-      frameNodes: new Map([
-        ["main", [node("main", 1)]],
-        ["child", [node("child", 101)]],
-      ]),
-      frameOwnerBackendNodeIds: new Map([["child", 10]]),
-      frameParentIds: new Map([["child", "main"]]),
+      iframeNodes: new Map(),
+      frameNodes: new Map([["main", [leftOwner, rightOwner]]]),
+      frameOwnerBackendNodeIds: new Map(),
       rootFrameId: "main",
       excludedBackendNodeIds: new Set(),
     };
-    const send = vi.fn(async (_tabId: number, method: string, params?: object) => {
-      if (method === "Accessibility.enable") return {};
-      if (method === "Accessibility.getFullAXTree") {
-        const frameId = (params as { frameId?: string })?.frameId ?? "main";
-        return {
-          nodes: [
-            {
-              nodeId: `${frameId}-root`,
-              frameId,
-              backendDOMNodeId: frameId === "main" ? 1 : 101,
-            },
-          ],
-        };
+    const sendToTarget = vi.fn(async (target, method) => {
+      if (method === "Page.getLayoutMetrics") {
+        return { cssLayoutViewport: { clientWidth: 300, clientHeight: 200, pageX: 0, pageY: 0 } };
       }
+      if (method === "DOMSnapshot.enable" || method === "Accessibility.enable") return {};
+      if (method === "DOMSnapshot.captureSnapshot") {
+        return target.sessionId === "left-session"
+          ? childSnapshot("left", 101)
+          : childSnapshot("right", 201);
+      }
+      if (method === "Accessibility.getFullAXTree") return { nodes: [] };
       throw new Error(`unexpected ${method}`);
     });
+    const cdp: CdpRunner = {
+      send: vi.fn(async (_tabId, method, params) => {
+        if (method === "Accessibility.enable") return {};
+        if (method === "Accessibility.getFullAXTree") return { nodes: [] };
+        if (method === "DOM.getBoxModel") {
+          const backendNodeId = (params as { backendNodeId?: number })?.backendNodeId;
+          const x = backendNodeId === 10 ? 50 : 500;
+          return { model: { content: [x, 100, x + 300, 100, x + 300, 300, x, 300] } };
+        }
+        if (method === "Page.getLayoutMetrics") {
+          return { cssLayoutViewport: { clientWidth: 1000, clientHeight: 800 } };
+        }
+        throw new Error(`unexpected root ${method}`);
+      }) as CdpRunner["send"],
+      sendToTarget: sendToTarget as unknown as NonNullable<CdpRunner["sendToTarget"]>,
+      getFrameGraph: vi.fn(async () => ({
+        rootFrameId: "main",
+        frames: [
+          { frameId: "main", target: { tabId: 4 } },
+          {
+            frameId: "left",
+            parentFrameId: "main",
+            ownerBackendNodeId: 10,
+            target: { tabId: 4, sessionId: "left-session" },
+          },
+          {
+            frameId: "right",
+            parentFrameId: "main",
+            ownerBackendNodeId: 20,
+            target: { tabId: 4, sessionId: "right-session" },
+          },
+        ],
+      })),
+    };
 
-    const documents = await captureFrameData({ send } as CdpRunner, 4, captured);
+    const trees = await captureFrameData(cdp, 4, captured);
 
-    expect(send).toHaveBeenCalledWith(4, "Accessibility.enable", {});
-    expect(documents.map((document) => document.frameId)).toEqual(["main", "child"]);
-    expect(documents.find((document) => document.frameId === "child")).toMatchObject({
-      parentFrameId: "main",
-      ownerBackendNodeId: 10,
-      axNodes: [{ nodeId: "child-root", frameId: "child", backendDOMNodeId: 101 }],
-    });
+    expect(trees.map((tree) => tree.frameId)).toEqual(["main", "left", "right"]);
+    expect(
+      captured.frameNodes?.get("left")?.find((node) => node.backendNodeId === 101)?.rect,
+    ).toEqual({ x: 60, y: 120, w: 100, h: 40 });
+    expect(
+      captured.frameNodes?.get("right")?.find((node) => node.backendNodeId === 201)?.rect,
+    ).toEqual({ x: 510, y: 120, w: 100, h: 40 });
+    expect(captured.frameOwnerBackendNodeIds).toEqual(
+      new Map([
+        ["left", 10],
+        ["right", 20],
+      ]),
+    );
+    expect(captured.frameParentIds).toEqual(
+      new Map([
+        ["left", "main"],
+        ["right", "main"],
+      ]),
+    );
   });
 });

apps/extension/src/tools/vom/__tests__/frame-document.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import type { CdpFrameGraph } from "@/browser-driver/frame-graph";
 import type { CapturedNode, CapturedViewModel } from "../capture";
 import { buildFrameDocuments, type FrameAxBatch, type FrameOwnedAxNode } from "../frame-document";
 
@@ -9,8 +10,7 @@ function domNode(frameId: string, backendNodeId: number): CapturedNode {
     frameId,
     tag: "div",
     attrs: {},
-    rect: null,
-    localRect: { x: 0, y: 0, w: 20, h: 20 },
+    rect: { x: 0, y: 0, w: 20, h: 20 },
     paintOrder: 0,
     position: "static",
     pointerEvents: "auto",
@@ -30,9 +30,16 @@ function captured(frameNodes: Map<string, CapturedNode[]>): CapturedViewModel {
 
 describe("buildFrameDocuments", () => {
   it("partitions mixed AX results by node ownership and cuts cross-frame parent edges", () => {
+    const graph: CdpFrameGraph = {
+      rootFrameId: "main",
+      frames: [
+        { frameId: "main", target: { tabId: 4 } },
+        { frameId: "child", parentFrameId: "main", target: { tabId: 4 } },
+      ],
+    };
     const batches: FrameAxBatch<FrameOwnedAxNode>[] = [
       {
-        frameId: "main",
+        frame: graph.frames[0],
         nodes: [
           { nodeId: "root", frameId: "main", backendDOMNodeId: 1, childIds: ["h"] },
           {
@@ -48,6 +55,7 @@ describe("buildFrameDocuments", () => {
     ];
 
     const documents = buildFrameDocuments(
+      graph,
       batches,
       captured(
         new Map([
@@ -64,14 +72,28 @@ describe("buildFrameDocuments", () => {
     expect(childNodes.find((node) => node.nodeId === "virtual")?.frameId).toBe("child");
   });
 
-  it("deduplicates overlapping AX results using the strongest ownership", () => {
+  it("deduplicates overlapping same-target AX results using the strongest ownership", () => {
+    const graph: CdpFrameGraph = {
+      rootFrameId: "main",
+      frames: [
+        { frameId: "main", target: { tabId: 4 } },
+        { frameId: "child", parentFrameId: "main", target: { tabId: 4 } },
+      ],
+    };
     const childNode = { nodeId: "shared", backendDOMNodeId: 100 };
     const batches: FrameAxBatch<FrameOwnedAxNode>[] = [
-      { frameId: "main", nodes: [{ ...childNode, frameId: "child" }] },
-      { frameId: "child", nodes: [childNode] },
+      {
+        frame: graph.frames[0],
+        nodes: [{ ...childNode, frameId: "child" }],
+      },
+      {
+        frame: graph.frames[1],
+        nodes: [childNode],
+      },
     ];
 
     const documents = buildFrameDocuments(
+      graph,
       batches,
       captured(
         new Map([
@@ -85,22 +107,64 @@ describe("buildFrameDocuments", () => {
     expect(documents.find((document) => document.frameId === "child")?.axNodes).toHaveLength(1);
   });
 
+  it("uses target-scoped backend ownership when OOPIF backend ids collide", () => {
+    const graph: CdpFrameGraph = {
+      rootFrameId: "main",
+      frames: [
+        { frameId: "main", target: { tabId: 4 } },
+        {
+          frameId: "left",
+          parentFrameId: "main",
+          target: { tabId: 4, sessionId: "left-session" },
+        },
+        {
+          frameId: "right",
+          parentFrameId: "main",
+          target: { tabId: 4, sessionId: "right-session" },
+        },
+      ],
+    };
+    const batches: FrameAxBatch<FrameOwnedAxNode>[] = graph.frames.slice(1).map((frame) => ({
+      frame,
+      nodes: [{ nodeId: `${frame.frameId}-node`, backendDOMNodeId: 7 }],
+    }));
+
+    const documents = buildFrameDocuments(
+      graph,
+      batches,
+      captured(
+        new Map([
+          ["main", []],
+          ["left", [domNode("left", 7)]],
+          ["right", [domNode("right", 7)]],
+        ]),
+      ),
+    );
+
+    expect(documents.find((document) => document.frameId === "left")?.axNodes[0]?.nodeId).toBe(
+      "left-node",
+    );
+    expect(documents.find((document) => document.frameId === "right")?.axNodes[0]?.nodeId).toBe(
+      "right-node",
+    );
+  });
+
   it("uses captured frame parent identity instead of guessing from backend ids", () => {
     const frameNodes = new Map([
       ["main", [domNode("main", 1)]],
       ["left", [domNode("left", 7)]],
-      ["right", [domNode("right", 8)]],
+      ["right", [domNode("right", 7)]],
       ["child", [domNode("child", 9)]],
     ]);
     const capture = captured(frameNodes);
     capture.frameOwnerBackendNodeIds = new Map([["child", 7]]);
     capture.frameParentIds = new Map([["child", "left"]]);
-    const batches = ["main", "left", "right", "child"].map((frameId) => ({
-      frameId,
+    const frames = ["main", "left", "right", "child"].map((frameId) => ({
+      frame: { frameId, target: { tabId: 4 } },
       nodes: [],
     }));
 
-    const documents = buildFrameDocuments(batches, capture);
+    const documents = buildFrameDocuments(null, frames, capture);
 
     expect(documents.find((document) => document.frameId === "child")).toMatchObject({
       parentFrameId: "left",