mirror of
https://github.com/Tencent/BrowserSkill.git
synced 2026-09-10 13:01:23 +08:00
fix(interaction): honor scroll cancellation and visible bounds
This commit is contained in:
drakezhang
@@ -602,6 +602,7 @@ describe("ToolDispatcher", () => {
|
||||
it.each([
|
||||
"focus",
|
||||
"blur",
|
||||
"scroll_to",
|
||||
] as const)("routes %s with hover cleanup and cooperative cancellation", async (action) => {
|
||||
const tab = { id: 7, windowId: 4242, active: true };
|
||||
vi.stubGlobal("chrome", {
|
||||
@@ -654,7 +655,15 @@ describe("ToolDispatcher", () => {
|
||||
});
|
||||
expect(cdp.send).not.toHaveBeenCalledWith(7, "DOM.focus", expect.anything());
|
||||
expect(cdp.send).not.toHaveBeenCalledWith(7, "Runtime.callFunctionOn", expect.anything());
|
||||
expect(cdp.send).toHaveBeenCalledWith(7, "Runtime.releaseObject", { objectId: "focus-target" });
|
||||
if (action === "scroll_to") {
|
||||
expect(cdp.send).toHaveBeenCalledWith(7, "Runtime.releaseObjectGroup", {
|
||||
objectGroup: expect.any(String),
|
||||
});
|
||||
} else {
|
||||
expect(cdp.send).toHaveBeenCalledWith(7, "Runtime.releaseObject", {
|
||||
objectId: "focus-target",
|
||||
});
|
||||
}
|
||||
expect(chrome.tabs.sendMessage).toHaveBeenCalledWith(
|
||||
7,
|
||||
expect.objectContaining({ enabled: false }),
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
// @vitest-environment node
|
||||
// Opt in with BSK_SCROLL_CHROME=/path/to/chrome. Uses an isolated browser/profile.
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { CdpFrame, CdpFrameGraph, CdpTarget } from "@/browser-driver/frame-graph";
|
||||
import { SessionManager } from "@/session-manager/manager";
|
||||
import type { ViewportRect } from "../geometry";
|
||||
import { handleScrollTo } from "../scroll";
|
||||
import type { CdpRunner } from "../shared";
|
||||
|
||||
type Send = <T = Record<string, unknown>>(
|
||||
method: string,
|
||||
params?: object,
|
||||
sessionId?: string,
|
||||
) => Promise<T>;
|
||||
type Tree = { frame: { id: string; parentId?: string; name?: string }; childFrames?: Tree[] };
|
||||
|
||||
async function withBrowser(
|
||||
run: (h: Awaited<ReturnType<typeof harness>>) => Promise<void>,
|
||||
zoom = 1,
|
||||
) {
|
||||
const { withChrome } = await import(
|
||||
new URL(
|
||||
"../../../../../evals/browser/cases/regression/snapshot-coordinates/chrome.mjs",
|
||||
import.meta.url,
|
||||
).href
|
||||
);
|
||||
await withChrome(
|
||||
{ executable: process.env.BSK_SCROLL_CHROME, deviceScale: 1, zoom },
|
||||
async (send: Send) => run(await harness(send)),
|
||||
);
|
||||
}
|
||||
|
||||
async function harness(send: Send) {
|
||||
const { targetId } = await send<{ targetId: string }>("Target.createTarget", {
|
||||
url: "about:blank",
|
||||
});
|
||||
const { sessionId: rootSession } = await send<{ sessionId: string }>("Target.attachToTarget", {
|
||||
targetId,
|
||||
flatten: true,
|
||||
});
|
||||
await send("Page.bringToFront", {}, rootSession);
|
||||
const manager = new SessionManager({
|
||||
agentWindow: {
|
||||
create: async () => 100,
|
||||
remove: async () => {},
|
||||
ensureActiveTab: async () => 4,
|
||||
},
|
||||
});
|
||||
const ctx = await manager.start("aa11");
|
||||
const calls: { method: string; sessionId?: string }[] = [];
|
||||
const after = { command: (_method: string) => {} };
|
||||
const sessionFor = (target: CdpTarget) => target.sessionId ?? rootSession;
|
||||
const forward = async <T>(target: CdpTarget, method: string, params?: object): Promise<T> => {
|
||||
calls.push({ method, sessionId: target.sessionId });
|
||||
const result = await send<T>(method, params, sessionFor(target));
|
||||
after.command(method);
|
||||
return result;
|
||||
};
|
||||
const cdp: CdpRunner = {
|
||||
send: (_tab, method, params) => forward({ tabId: 4 }, method, params),
|
||||
sendToTarget: forward,
|
||||
};
|
||||
const evaluate = async <T>(expression: string, frame?: CdpFrame): Promise<T> => {
|
||||
const session = frame ? sessionFor(frame.target) : rootSession;
|
||||
const world = frame
|
||||
? await send<{ executionContextId: number }>(
|
||||
"Page.createIsolatedWorld",
|
||||
{
|
||||
frameId: frame.frameId,
|
||||
worldName: "scroll-oracle",
|
||||
},
|
||||
session,
|
||||
)
|
||||
: undefined;
|
||||
const reply = await send<{ result: { value: T }; exceptionDetails?: unknown }>(
|
||||
"Runtime.evaluate",
|
||||
{
|
||||
expression,
|
||||
contextId: world?.executionContextId,
|
||||
returnByValue: true,
|
||||
awaitPromise: true,
|
||||
},
|
||||
session,
|
||||
);
|
||||
expect(reply.exceptionDetails).toBeUndefined();
|
||||
return reply.result.value;
|
||||
};
|
||||
const rememberRef = (frame: CdpFrame, backendNodeId: number) =>
|
||||
ctx.refStore.set("e1", backendNodeId, {
|
||||
tabId: 4,
|
||||
frameId: frame.frameId,
|
||||
cdpSessionId: frame.target.sessionId,
|
||||
});
|
||||
const ref = async (frame: CdpFrame, selector = "#probe") => {
|
||||
const { executionContextId } = await send<{ executionContextId: number }>(
|
||||
"Page.createIsolatedWorld",
|
||||
{
|
||||
frameId: frame.frameId,
|
||||
worldName: "scroll-oracle",
|
||||
},
|
||||
sessionFor(frame.target),
|
||||
);
|
||||
const { result } = await send<{ result: { objectId: string } }>(
|
||||
"Runtime.evaluate",
|
||||
{
|
||||
expression: `document.querySelector(${JSON.stringify(selector)})`,
|
||||
contextId: executionContextId,
|
||||
},
|
||||
sessionFor(frame.target),
|
||||
);
|
||||
const { node } = await send<{ node: { backendNodeId: number } }>(
|
||||
"DOM.describeNode",
|
||||
{ objectId: result.objectId },
|
||||
sessionFor(frame.target),
|
||||
);
|
||||
await send("Runtime.releaseObject", { objectId: result.objectId }, sessionFor(frame.target));
|
||||
rememberRef(frame, node.backendNodeId);
|
||||
};
|
||||
const scroll = (target: { selector: string } | { ref: string }, signal?: AbortSignal) =>
|
||||
handleScrollTo(
|
||||
manager,
|
||||
{ session_id: "aa11", ...target },
|
||||
{
|
||||
cdp,
|
||||
signal,
|
||||
tabsApi: {
|
||||
get: async (id) => ({ id, windowId: 100, active: true }) as chrome.tabs.Tab,
|
||||
query: async () => [{ id: 4, windowId: 100, active: true } as chrome.tabs.Tab],
|
||||
},
|
||||
},
|
||||
);
|
||||
const loadFrames = async () => {
|
||||
const { targetInfos } = await send<{ targetInfos: { targetId: string; type: string }[] }>(
|
||||
"Target.getTargets",
|
||||
);
|
||||
const sessions = [rootSession];
|
||||
for (const target of targetInfos.filter((t) => t.type === "iframe")) {
|
||||
const { sessionId } = await send<{ sessionId: string }>("Target.attachToTarget", {
|
||||
targetId: target.targetId,
|
||||
flatten: true,
|
||||
});
|
||||
sessions.push(sessionId);
|
||||
}
|
||||
const frames: (CdpFrame & { name: string })[] = [];
|
||||
for (const session of sessions) {
|
||||
const { frameTree } = await send<{ frameTree: Tree }>("Page.getFrameTree", {}, session);
|
||||
const target = { tabId: 4, ...(session !== rootSession ? { sessionId: session } : {}) };
|
||||
const visit = (tree: Tree, parentFrameId = tree.frame.parentId) => {
|
||||
frames.push({ frameId: tree.frame.id, parentFrameId, target, name: tree.frame.name ?? "" });
|
||||
for (const child of tree.childFrames ?? []) visit(child, tree.frame.id);
|
||||
};
|
||||
visit(frameTree);
|
||||
}
|
||||
for (const frame of frames) {
|
||||
if (!frame.parentFrameId) continue;
|
||||
const parent = frames.find((f) => f.frameId === frame.parentFrameId)!;
|
||||
const owner = await send<{ backendNodeId: number }>(
|
||||
"DOM.getFrameOwner",
|
||||
{ frameId: frame.frameId },
|
||||
sessionFor(parent.target),
|
||||
);
|
||||
frame.ownerBackendNodeId = owner.backendNodeId;
|
||||
}
|
||||
const graph: CdpFrameGraph = { rootFrameId: frames[0].frameId, frames };
|
||||
cdp.getFrameGraph = async () => graph;
|
||||
return frames;
|
||||
};
|
||||
return { send, rootSession, evaluate, ref, rememberRef, scroll, loadFrames, calls, after };
|
||||
}
|
||||
|
||||
function intersection(a: ViewportRect, b: ViewportRect): ViewportRect | null {
|
||||
const x = Math.max(a.x, b.x),
|
||||
y = Math.max(a.y, b.y);
|
||||
const right = Math.min(a.x + a.width, b.x + b.width),
|
||||
bottom = Math.min(a.y + a.height, b.y + b.height);
|
||||
return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
|
||||
}
|
||||
|
||||
function expectRect(actual: unknown, expected: ViewportRect) {
|
||||
expect(actual).not.toHaveProperty("code");
|
||||
for (const key of ["x", "y", "width", "height"] as const)
|
||||
expect(Math.abs((actual as ViewportRect)[key] - expected[key]), key).toBeLessThan(2);
|
||||
}
|
||||
|
||||
describe.skipIf(!process.env.BSK_SCROLL_CHROME)("real browser scroll-to", () => {
|
||||
it("scrolls ordinary elements and reports the clipped portion of nested scrollers", async () => {
|
||||
await withBrowser(async (h) => {
|
||||
for (const html of [
|
||||
'<div style="height:2200px"></div><div id="target" style="width:100px;height:40px"></div>',
|
||||
'<div style="height:200px"></div><div id="clip" style="height:80px;width:200px;overflow:auto"><div id="target" style="width:100px;height:400px"></div></div>',
|
||||
'<div style="height:200px"></div><div id="clip" style="height:80px;width:200px;overflow:auto;transform:scale(1.25);transform-origin:0 0"><div id="target" style="width:100px;height:400px"></div></div>',
|
||||
]) {
|
||||
await h.evaluate(`document.body.innerHTML = ${JSON.stringify(html)}`);
|
||||
const result = await h.scroll({ selector: "#target" });
|
||||
const oracle = await h.evaluate<{ rect: ViewportRect; clip?: ViewportRect }>(`({
|
||||
rect: document.querySelector('#target').getBoundingClientRect().toJSON(),
|
||||
clip: document.querySelector('#clip')?.getBoundingClientRect().toJSON()
|
||||
})`);
|
||||
expectRect(result, oracle.clip ? intersection(oracle.rect, oracle.clip)! : oracle.rect);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it.each([
|
||||
"visibility:hidden",
|
||||
"opacity:0",
|
||||
"display:none",
|
||||
"content-visibility:hidden",
|
||||
])("rejects %s targets", async (style) => {
|
||||
await withBrowser(async (h) => {
|
||||
await h.evaluate(
|
||||
`document.body.innerHTML = '<div style="${style}"><button id="target">Target</button></div>'`,
|
||||
);
|
||||
expect(await h.scroll({ selector: "#target" })).toMatchObject({
|
||||
code: "permission_denied",
|
||||
data: { reason: "element_not_visible" },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("rejects targets fully outside an overflow:clip ancestor", async () => {
|
||||
await withBrowser(async (h) => {
|
||||
await h.evaluate(
|
||||
`document.body.innerHTML = '<div style="height:80px;overflow:clip"><div style="height:150px"></div><button id="target">Target</button></div>'`,
|
||||
);
|
||||
expect(await h.scroll({ selector: "#target" })).toMatchObject({ code: "permission_denied" });
|
||||
});
|
||||
});
|
||||
|
||||
it.each(["open", "closed"])("clips %s shadow-root refs", async (mode) => {
|
||||
await withBrowser(async (h) => {
|
||||
await h.evaluate(`(() => {
|
||||
const host = document.createElement('div'); document.body.append(host);
|
||||
const root = host.attachShadow({mode:'${mode}'});
|
||||
root.innerHTML = '<div style="height:60px;overflow:auto"><button id="probe" style="height:200px;width:100px">Target</button></div>';
|
||||
window.probe = root.querySelector('#probe');
|
||||
})()`);
|
||||
const frames = await h.loadFrames();
|
||||
const { result } = await h.send<{ result: { objectId: string } }>(
|
||||
"Runtime.evaluate",
|
||||
{ expression: "window.probe" },
|
||||
h.rootSession,
|
||||
);
|
||||
// Build the ref from the actual closed-root node, as an observation does.
|
||||
const { node } = await h.send<{ node: { backendNodeId: number } }>(
|
||||
"DOM.describeNode",
|
||||
{ objectId: result.objectId },
|
||||
h.rootSession,
|
||||
);
|
||||
await h.send("Runtime.releaseObject", { objectId: result.objectId }, h.rootSession);
|
||||
h.rememberRef(frames[0], node.backendNodeId);
|
||||
expect(await h.scroll({ ref: "e1" })).toMatchObject({ height: 60 });
|
||||
});
|
||||
});
|
||||
|
||||
it("cancels after scrolling and releases the measurement object without follow-up reads", async () => {
|
||||
await withBrowser(async (h) => {
|
||||
await h.evaluate("document.body.innerHTML = '<button id=target>Target</button>'");
|
||||
const abort = new AbortController();
|
||||
h.after.command = (method) => {
|
||||
if (method === "DOM.resolveNode") abort.abort();
|
||||
};
|
||||
expect(await h.scroll({ selector: "#target" }, abort.signal)).toMatchObject({
|
||||
code: "cancelled",
|
||||
});
|
||||
expect(h.calls.at(-1)!.method).toBe("Runtime.releaseObjectGroup");
|
||||
expect(h.calls.some((call) => call.method === "Runtime.callFunctionOn")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
it.each([
|
||||
{ fixture: "snapshot-coordinates", zoom: 1 },
|
||||
{ fixture: "snapshot-coordinates", zoom: 1.25 },
|
||||
{ fixture: "oopif-scrollbars", zoom: 1 },
|
||||
{ fixture: "oopif-scrollbars", zoom: 0.8 },
|
||||
])("scrolls nested frames: $fixture at zoom $zoom", async ({ fixture, zoom }) => {
|
||||
const { createEvalServer } = await import(
|
||||
new URL("../../../../../evals/browser/lib/server.mjs", import.meta.url).href
|
||||
);
|
||||
const server = createEvalServer();
|
||||
const { baseUrl } = await server.start();
|
||||
try {
|
||||
await withBrowser(async (h) => {
|
||||
await h.send("Page.navigate", { url: `${baseUrl}/${fixture}?run=scroll` }, h.rootSession);
|
||||
await expect
|
||||
.poll(
|
||||
() =>
|
||||
server
|
||||
.snapshot("scroll")
|
||||
.events.some(
|
||||
(e: { type: string; data: { root?: boolean } }) =>
|
||||
e.type === "geometry.ready" && e.data.root,
|
||||
),
|
||||
{ timeout: 10_000 },
|
||||
)
|
||||
.toBe(true);
|
||||
const frames = await h.loadFrames();
|
||||
expect(frames.length).toBe(fixture === "snapshot-coordinates" ? 5 : 3);
|
||||
for (const frame of frames) {
|
||||
await h.ref(frame);
|
||||
const result = await h.scroll({ ref: "e1" });
|
||||
// Independent DOM oracle: CSS border boxes plus this fixture's known
|
||||
// axis-aligned iframe scales. Re-read after each scroll changes layout.
|
||||
let rect = await h.evaluate<ViewportRect>(
|
||||
"document.querySelector('#probe').getBoundingClientRect().toJSON()",
|
||||
frame,
|
||||
);
|
||||
let current = frame;
|
||||
while (true) {
|
||||
const viewport = await h.evaluate<ViewportRect>(
|
||||
"({ x:0, y:0, width:document.documentElement.clientWidth, height:document.documentElement.clientHeight })",
|
||||
current,
|
||||
);
|
||||
rect = intersection(rect, viewport)!;
|
||||
if (!current.parentFrameId) break;
|
||||
const parent = frames.find((f) => f.frameId === current.parentFrameId)!;
|
||||
const owner = await h.evaluate<{ x: number; y: number; scale: number }>(
|
||||
`(() => {
|
||||
const iframe = document.querySelector('iframe[name="${current.name}"]');
|
||||
const r = iframe.getBoundingClientRect(); const s = getComputedStyle(iframe);
|
||||
const scale = r.width / iframe.offsetWidth;
|
||||
return { x:r.x + (iframe.clientLeft + parseFloat(s.paddingLeft))*scale,
|
||||
y:r.y + (iframe.clientTop + parseFloat(s.paddingTop))*scale, scale };
|
||||
})()`,
|
||||
parent,
|
||||
);
|
||||
rect = {
|
||||
x: owner.x + rect.x * owner.scale,
|
||||
y: owner.y + rect.y * owner.scale,
|
||||
width: rect.width * owner.scale,
|
||||
height: rect.height * owner.scale,
|
||||
};
|
||||
current = parent;
|
||||
}
|
||||
expectRect(result, rect);
|
||||
}
|
||||
const child = frames.find((frame) => frame.parentFrameId === frames[0].frameId)!;
|
||||
await h.ref(child);
|
||||
await h.evaluate(
|
||||
`document.querySelector('iframe[name="${child.name}"]').style.opacity = '0'`,
|
||||
);
|
||||
expect(await h.scroll({ ref: "e1" })).toMatchObject({ code: "permission_denied" });
|
||||
}, zoom);
|
||||
} finally {
|
||||
await server.stop();
|
||||
}
|
||||
}, 30_000);
|
||||
});
|
||||
@@ -1,63 +1,121 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import type { CdpFrameGraph, CdpTarget } from "@/browser-driver/frame-graph";
|
||||
import { SessionManager } from "@/session-manager/manager";
|
||||
import type { CdpRunner } from "@/tools/shared";
|
||||
import type { JavaScriptDialogInfo, ScrollToParams } from "@/transport/types";
|
||||
import type { ViewportRect } from "../geometry";
|
||||
import { handleScrollTo } from "../scroll";
|
||||
import type { CdpRunner } from "../shared";
|
||||
|
||||
function fakeAgentWindow(ids: number[]) {
|
||||
let i = 0;
|
||||
return {
|
||||
create: vi.fn(async () => {
|
||||
const id = ids[i++];
|
||||
if (id === undefined) throw new Error("ran out of fake ids");
|
||||
return id;
|
||||
}),
|
||||
remove: vi.fn(async () => {}),
|
||||
ensureActiveTab: vi.fn(async () => {}),
|
||||
};
|
||||
interface Call {
|
||||
target: CdpTarget;
|
||||
method: string;
|
||||
params?: Record<string, unknown>;
|
||||
aborted: boolean;
|
||||
}
|
||||
|
||||
function makeFakeCdp(handlers: Record<string, (params: unknown) => unknown>) {
|
||||
const sent: Array<{ tabId: number; method: string; params?: object }> = [];
|
||||
const sendImpl = async (tabId: number, method: string, params?: object) => {
|
||||
sent.push({ tabId, method, params });
|
||||
const handler = handlers[method];
|
||||
if (!handler && method === "Page.getLayoutMetrics") {
|
||||
return { cssLayoutViewport: { clientWidth: 1280, clientHeight: 720 } };
|
||||
}
|
||||
if (!handler) throw new Error(`unexpected CDP call ${method}`);
|
||||
return handler(params);
|
||||
async function fixture(frame: "top" | "same-target" | "oopif" = "top") {
|
||||
const manager = new SessionManager({
|
||||
agentWindow: {
|
||||
create: async () => 100,
|
||||
remove: async () => {},
|
||||
ensureActiveTab: async () => 4,
|
||||
},
|
||||
});
|
||||
const ctx = await manager.start("aa11");
|
||||
ctx.refStore.set("e3", 1234, {
|
||||
tabId: 4,
|
||||
...(frame !== "top" ? { frameId: "child" } : {}),
|
||||
...(frame === "oopif" ? { cdpSessionId: "child-session" } : {}),
|
||||
});
|
||||
const abort = new AbortController();
|
||||
const graph: CdpFrameGraph = {
|
||||
rootFrameId: "main",
|
||||
frames: [
|
||||
{ frameId: "main", target: { tabId: 4 } },
|
||||
{
|
||||
frameId: "child",
|
||||
parentFrameId: "main",
|
||||
ownerBackendNodeId: 99,
|
||||
target: { tabId: 4, ...(frame === "oopif" ? { sessionId: "child-session" } : {}) },
|
||||
},
|
||||
],
|
||||
};
|
||||
const rectangles = new Map<number, ViewportRect | null>([
|
||||
[1234, { x: 10, y: 20, width: 100, height: 40 }],
|
||||
[99, { x: 204, y: 306, width: 400, height: 200 }],
|
||||
]);
|
||||
const calls: Call[] = [];
|
||||
const hooks = {
|
||||
after: (_call: Call) => {},
|
||||
reply: (_call: Call): object | undefined => undefined,
|
||||
};
|
||||
const send = async <T>(target: CdpTarget, method: string, params?: object): Promise<T> => {
|
||||
const call = {
|
||||
target,
|
||||
method,
|
||||
params: params as Call["params"],
|
||||
aborted: abort.signal.aborted,
|
||||
};
|
||||
calls.push(call);
|
||||
const override = hooks.reply(call);
|
||||
hooks.after(call);
|
||||
if (override) return override as T;
|
||||
const args = call.params ?? {};
|
||||
const replies: Record<string, unknown> = {
|
||||
"DOM.getDocument": { root: { nodeId: 1 } },
|
||||
"DOM.querySelector": { nodeId: 2 },
|
||||
"DOM.describeNode": { node: { backendNodeId: 1234 } },
|
||||
"DOM.scrollIntoViewIfNeeded": {},
|
||||
"DOM.resolveNode": { object: { objectId: String(args.backendNodeId) } },
|
||||
"Runtime.callFunctionOn": {
|
||||
result: {
|
||||
value: String(args.functionDeclaration).includes("IntersectionObserver")
|
||||
? rectangles.get(Number(args.objectId))
|
||||
: { width: 200, height: 100 },
|
||||
},
|
||||
},
|
||||
"Runtime.releaseObject": {},
|
||||
"Runtime.releaseObjectGroup": {},
|
||||
"Runtime.evaluate": { result: { value: { width: 200, height: 100 } } },
|
||||
"Page.getLayoutMetrics": {
|
||||
cssLayoutViewport: {
|
||||
clientWidth: target.sessionId ? 185 : 1280,
|
||||
clientHeight: target.sessionId ? 89 : 720,
|
||||
},
|
||||
},
|
||||
"DOM.getBoxModel": { model: { content: [204, 306, 604, 306, 604, 506, 204, 506] } },
|
||||
};
|
||||
if (!(method in replies)) throw new Error(`unexpected CDP call ${method}`);
|
||||
return replies[method] as T;
|
||||
};
|
||||
const cdp: CdpRunner = {
|
||||
send: vi.fn(sendImpl) as unknown as CdpRunner["send"],
|
||||
send: (tabId, method, params) => send({ tabId }, method, params),
|
||||
sendToTarget: send,
|
||||
getFrameGraph: vi.fn(async () => {
|
||||
hooks.after({ target: { tabId: 4 }, method: "getFrameGraph", aborted: abort.signal.aborted });
|
||||
return graph;
|
||||
}),
|
||||
trackSessionTab: vi.fn(),
|
||||
};
|
||||
const tabsApi = {
|
||||
get: vi.fn(
|
||||
async (tabId: number) => ({ id: tabId, windowId: 100, active: true }) as chrome.tabs.Tab,
|
||||
),
|
||||
get: vi.fn(async (id: number) => ({ id, windowId: 100, active: true }) as chrome.tabs.Tab),
|
||||
query: vi.fn(async () => [{ id: 4, windowId: 100, active: true } as chrome.tabs.Tab]),
|
||||
};
|
||||
return { cdp, tabsApi, sent };
|
||||
const run = (params: Partial<ScrollToParams> = {}) =>
|
||||
handleScrollTo(
|
||||
manager,
|
||||
{ session_id: "aa11", ref: "@e3", ...params },
|
||||
{ cdp, tabsApi, signal: abort.signal },
|
||||
);
|
||||
return { ctx, cdp, graph, rectangles, calls, hooks, abort, tabsApi, run };
|
||||
}
|
||||
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
describe("handleScrollTo", () => {
|
||||
it("scrolls a ref into view and returns its visible top-viewport bounds", async () => {
|
||||
const manager = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
|
||||
const ctx = await manager.start("aa11");
|
||||
ctx.refStore.set("e3", 1234, { tabId: 4 });
|
||||
const fake = makeFakeCdp({
|
||||
"DOM.scrollIntoViewIfNeeded": () => ({}),
|
||||
"DOM.getContentQuads": () => ({ quads: [[10, 20, 110, 20, 110, 60, 10, 60]] }),
|
||||
});
|
||||
|
||||
const result = await handleScrollTo(
|
||||
manager,
|
||||
{ session_id: "aa11", ref: "@e3" },
|
||||
{ cdp: fake.cdp, tabsApi: fake.tabsApi },
|
||||
);
|
||||
|
||||
if ("code" in result) throw new Error(`unexpected error: ${JSON.stringify(result)}`);
|
||||
expect(result).toMatchObject({
|
||||
it("scrolls a ref and returns renderer-clipped bounds", async () => {
|
||||
const f = await fixture();
|
||||
expect(await f.run()).toMatchObject({
|
||||
tab_id: 4,
|
||||
used_ref: "e3",
|
||||
x: 10,
|
||||
@@ -65,85 +123,188 @@ describe("handleScrollTo", () => {
|
||||
width: 100,
|
||||
height: 40,
|
||||
});
|
||||
expect(fake.sent.map((call) => call.method)).toEqual([
|
||||
"DOM.scrollIntoViewIfNeeded",
|
||||
"DOM.getContentQuads",
|
||||
"Page.getLayoutMetrics",
|
||||
]);
|
||||
expect(f.calls[0]).toMatchObject({
|
||||
method: "DOM.scrollIntoViewIfNeeded",
|
||||
params: { backendNodeId: 1234 },
|
||||
});
|
||||
const group = f.calls.find((call) => call.method === "DOM.resolveNode")!.params!.objectGroup;
|
||||
expect(f.calls.at(-1)).toMatchObject({
|
||||
method: "Runtime.releaseObjectGroup",
|
||||
params: { objectGroup: group },
|
||||
});
|
||||
});
|
||||
|
||||
it("scrolls OOPIF refs through their parent frame and CDP session", async () => {
|
||||
const manager = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
|
||||
const ctx = await manager.start("aa11");
|
||||
ctx.refStore.set("e3", 1234, {
|
||||
tabId: 4,
|
||||
frameId: "child-frame",
|
||||
cdpSessionId: "child-session",
|
||||
it("resolves a selector and tracks the attached tab even when it is missing", async () => {
|
||||
const f = await fixture();
|
||||
expect(await f.run({ ref: undefined, selector: "#target" })).toMatchObject({
|
||||
used_selector: "#target",
|
||||
});
|
||||
const fake = makeFakeCdp({
|
||||
"DOM.scrollIntoViewIfNeeded": () => ({}),
|
||||
"DOM.getBoxModel": () => ({
|
||||
model: { content: [204, 306, 604, 306, 604, 506, 204, 506] },
|
||||
}),
|
||||
f.hooks.reply = ({ method }) => (method === "DOM.querySelector" ? { nodeId: 0 } : undefined);
|
||||
expect(await f.run({ ref: undefined, selector: "#missing" })).toMatchObject({
|
||||
code: "not_found",
|
||||
data: { reason: "selector_not_found" },
|
||||
});
|
||||
fake.cdp.getFrameGraph = vi.fn(async () => ({
|
||||
rootFrameId: "main",
|
||||
frames: [
|
||||
{ frameId: "main", target: { tabId: 4 } },
|
||||
{
|
||||
frameId: "child-frame",
|
||||
parentFrameId: "main",
|
||||
ownerBackendNodeId: 99,
|
||||
target: { tabId: 4, sessionId: "child-session" },
|
||||
},
|
||||
],
|
||||
}));
|
||||
const targetCalls: Array<{ sessionId?: string; method: string }> = [];
|
||||
fake.cdp.sendToTarget = vi.fn(async (target, method) => {
|
||||
targetCalls.push({ sessionId: target.sessionId, method });
|
||||
if (method === "DOM.scrollIntoViewIfNeeded") return {};
|
||||
if (method === "DOM.getContentQuads") {
|
||||
return { quads: [[10, 20, 110, 20, 110, 60, 10, 60]] };
|
||||
}
|
||||
if (method === "Runtime.evaluate") {
|
||||
return { result: { value: { width: 200, height: 100 } } };
|
||||
}
|
||||
if (method === "Page.getLayoutMetrics") {
|
||||
return { cssLayoutViewport: { clientWidth: 200, clientHeight: 100 } };
|
||||
}
|
||||
throw new Error(`unexpected child CDP call ${method}`);
|
||||
}) as CdpRunner["sendToTarget"];
|
||||
|
||||
const result = await handleScrollTo(
|
||||
manager,
|
||||
{ session_id: "aa11", ref: "@e3" },
|
||||
{ cdp: fake.cdp, tabsApi: fake.tabsApi },
|
||||
);
|
||||
|
||||
if ("code" in result) throw new Error(`unexpected error: ${JSON.stringify(result)}`);
|
||||
expect(result).toMatchObject({ x: 224, y: 346, width: 200, height: 80 });
|
||||
expect(targetCalls).toEqual([
|
||||
{ sessionId: "child-session", method: "DOM.scrollIntoViewIfNeeded" },
|
||||
{ sessionId: "child-session", method: "DOM.getContentQuads" },
|
||||
{ sessionId: "child-session", method: "Page.getLayoutMetrics" },
|
||||
{ sessionId: "child-session", method: "Runtime.evaluate" },
|
||||
]);
|
||||
expect(f.cdp.trackSessionTab).toHaveBeenCalledWith("aa11", 4);
|
||||
});
|
||||
|
||||
it("does not issue CDP calls after an early cancellation", async () => {
|
||||
const manager = new SessionManager({ agentWindow: fakeAgentWindow([100]) });
|
||||
await manager.start("aa11");
|
||||
const abort = new AbortController();
|
||||
abort.abort();
|
||||
const fake = makeFakeCdp({});
|
||||
it.each([
|
||||
"same-target",
|
||||
"oopif",
|
||||
] as const)("projects %s refs and scrolls their owners", async (frame) => {
|
||||
const f = await fixture(frame);
|
||||
expect(await f.run()).toMatchObject({ x: 224, y: 346, width: 200, height: 80 });
|
||||
expect(
|
||||
f.calls
|
||||
.filter((call) => call.method === "DOM.scrollIntoViewIfNeeded")
|
||||
.map((call) => call.params!.backendNodeId),
|
||||
).toEqual([99, 1234]);
|
||||
expect(f.cdp.getFrameGraph).toHaveBeenCalledTimes(1);
|
||||
if (frame === "oopif")
|
||||
expect(f.calls.find((call) => call.params?.backendNodeId === 1234)!.target.sessionId).toBe(
|
||||
"child-session",
|
||||
);
|
||||
});
|
||||
|
||||
const result = await handleScrollTo(
|
||||
manager,
|
||||
{ session_id: "aa11", selector: "#target" },
|
||||
{ cdp: fake.cdp, tabsApi: fake.tabsApi, signal: abort.signal },
|
||||
);
|
||||
it("clips OOPIF bounds to occupied scrollbars without changing the frame scale", async () => {
|
||||
const f = await fixture("oopif");
|
||||
f.rectangles.set(1234, { x: 180, y: 80, width: 5, height: 9 });
|
||||
expect(await f.run()).toMatchObject({ x: 564, y: 466, width: 10, height: 18 });
|
||||
});
|
||||
|
||||
expect(result).toMatchObject({ code: "cancelled" });
|
||||
expect(fake.cdp.send).not.toHaveBeenCalled();
|
||||
it("clips against the iframe owner's ordinary DOM ancestors", async () => {
|
||||
const f = await fixture("oopif");
|
||||
f.rectangles.set(99, { x: 204, y: 306, width: 400, height: 80 });
|
||||
expect(await f.run()).toMatchObject({ x: 224, y: 346, width: 200, height: 40 });
|
||||
});
|
||||
|
||||
it.each([1234, 99])("rejects a hidden or fully clipped node %i", async (node) => {
|
||||
const f = await fixture("oopif");
|
||||
f.rectangles.set(node, null);
|
||||
expect(await f.run()).toMatchObject({
|
||||
code: "permission_denied",
|
||||
data: { reason: "element_not_visible" },
|
||||
});
|
||||
expect(f.calls.at(-1)!.method).toBe("Runtime.releaseObjectGroup");
|
||||
});
|
||||
|
||||
it.each([
|
||||
{ ref: undefined },
|
||||
{ selector: "#target" },
|
||||
{ timeout_ms: 0 },
|
||||
])("rejects invalid params %j", async (params) => {
|
||||
const f = await fixture();
|
||||
expect(await f.run(params)).toMatchObject({ code: "invalid_params" });
|
||||
expect(f.calls).toEqual([]);
|
||||
});
|
||||
|
||||
it.each(["stale", "other-tab"])("rejects %s refs before scrolling", async (mode) => {
|
||||
const f = await fixture();
|
||||
if (mode === "stale") f.ctx.refStore.clear();
|
||||
else f.ctx.refStore.set("e3", 1234, { tabId: 8 });
|
||||
expect(await f.run()).toMatchObject({ code: "not_found", data: { reason: "ref_not_found" } });
|
||||
expect(f.calls).toEqual([]);
|
||||
});
|
||||
|
||||
it("enforces the Agent Window boundary", async () => {
|
||||
const f = await fixture();
|
||||
f.tabsApi.query.mockResolvedValue([{ id: 4, windowId: 200, active: true } as chrome.tabs.Tab]);
|
||||
f.tabsApi.get.mockResolvedValue({ id: 4, windowId: 200, active: true } as chrome.tabs.Tab);
|
||||
expect(await f.run({ tab_id: 4 })).toMatchObject({ code: "permission_denied" });
|
||||
expect(f.calls).toEqual([]);
|
||||
});
|
||||
|
||||
it.each([
|
||||
"getFrameGraph",
|
||||
"DOM.scrollIntoViewIfNeeded",
|
||||
"DOM.resolveNode",
|
||||
"Runtime.callFunctionOn",
|
||||
"Page.getLayoutMetrics",
|
||||
"Runtime.evaluate",
|
||||
"DOM.getBoxModel",
|
||||
])("honors cancellation during %s and only cleans up afterwards", async (method) => {
|
||||
const f = await fixture("oopif");
|
||||
f.hooks.after = (call) => {
|
||||
if (call.method === method) f.abort.abort();
|
||||
};
|
||||
expect(await f.run()).toMatchObject({ code: "cancelled" });
|
||||
expect(
|
||||
f.calls.filter((call) => call.aborted && call.method !== "Runtime.releaseObjectGroup"),
|
||||
).toEqual([]);
|
||||
});
|
||||
|
||||
it.each([
|
||||
"DOM.getDocument",
|
||||
"DOM.querySelector",
|
||||
"DOM.describeNode",
|
||||
])("cancels selector resolution during %s", async (method) => {
|
||||
const f = await fixture();
|
||||
f.hooks.after = (call) => {
|
||||
if (call.method === method) f.abort.abort();
|
||||
};
|
||||
expect(await f.run({ ref: undefined, selector: "#target" })).toMatchObject({
|
||||
code: "cancelled",
|
||||
});
|
||||
expect(f.calls.filter((call) => call.aborted)).toEqual([]);
|
||||
});
|
||||
|
||||
it("does not start after early cancellation", async () => {
|
||||
const f = await fixture();
|
||||
f.abort.abort();
|
||||
expect(await f.run()).toMatchObject({ code: "cancelled" });
|
||||
expect(f.calls).toEqual([]);
|
||||
expect(f.tabsApi.query).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not issue fallback scrolling after cancellation", async () => {
|
||||
const f = await fixture();
|
||||
f.hooks.reply = ({ method }) => {
|
||||
if (method === "DOM.scrollIntoViewIfNeeded") {
|
||||
f.abort.abort();
|
||||
throw new Error("scroll failed");
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
expect(await f.run()).toMatchObject({ code: "cancelled" });
|
||||
expect(f.calls.map((call) => call.method)).toEqual(["DOM.scrollIntoViewIfNeeded"]);
|
||||
});
|
||||
|
||||
it("stops target scrolling after a deadline expires while scrolling its owner", async () => {
|
||||
const f = await fixture("oopif");
|
||||
const now = vi.spyOn(Date, "now").mockReturnValue(100);
|
||||
f.hooks.after = ({ method }) => {
|
||||
if (method === "DOM.scrollIntoViewIfNeeded") now.mockReturnValue(201);
|
||||
};
|
||||
expect(await f.run({ timeout_ms: 100 })).toMatchObject({ code: "timeout" });
|
||||
expect(f.calls.filter((call) => call.method === "DOM.scrollIntoViewIfNeeded")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("reports measurement exceptions and releases objects even if cleanup fails", async () => {
|
||||
const f = await fixture();
|
||||
f.hooks.reply = ({ method }) => {
|
||||
if (method === "Runtime.callFunctionOn")
|
||||
return { exceptionDetails: { text: "measurement failed" } };
|
||||
if (method === "Runtime.releaseObjectGroup") throw new Error("target closed");
|
||||
return undefined;
|
||||
};
|
||||
expect(await f.run()).toMatchObject({ code: "cdp_failed", message: "measurement failed" });
|
||||
expect(f.calls.at(-1)!.method).toBe("Runtime.releaseObjectGroup");
|
||||
});
|
||||
|
||||
it("attaches dialogs observed during scrolling", async () => {
|
||||
const f = await fixture();
|
||||
f.cdp.dialogCursor = () => 5;
|
||||
const dialogs: JavaScriptDialogInfo[] = [
|
||||
{
|
||||
sequence: 6,
|
||||
tab_id: 4,
|
||||
type: "alert",
|
||||
message: "scrolled",
|
||||
handled: "accepted",
|
||||
url: "https://example.test",
|
||||
},
|
||||
];
|
||||
f.cdp.dialogsSince = vi.fn(() => dialogs);
|
||||
expect(await f.run()).toHaveProperty("dialogs", dialogs);
|
||||
expect(f.cdp.dialogsSince).toHaveBeenCalledWith(4, 5);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { cdpTargetKey } from "@/browser-driver/frame-graph";
|
||||
import type { NodeAddress } from "./frame-geometry";
|
||||
import {
|
||||
clipPolygon,
|
||||
projectRegionToViewport,
|
||||
type Region,
|
||||
rectPolygon,
|
||||
regionBounds,
|
||||
type ViewportRect,
|
||||
} from "./geometry";
|
||||
import { GeometryContext } from "./geometry/frame-context";
|
||||
import { type CdpRunner, sendToCdpTarget } from "./shared";
|
||||
|
||||
// Ask the renderer to apply containing-block clips (including shadow DOM),
|
||||
// instead of treating layout quads as visible pixels. Each document is measured
|
||||
// locally; the existing frame projections supply the top-viewport coordinates.
|
||||
// IntersectionObserver reports a bounding rectangle, not an occlusion/hit test.
|
||||
const VISIBLE_RECT = `function(timeoutMs) {
|
||||
const element = this;
|
||||
const visible = () => element.isConnected && element.checkVisibility({
|
||||
checkOpacity: true, checkVisibilityCSS: true, contentVisibilityAuto: true
|
||||
});
|
||||
if (typeof element.checkVisibility !== 'function' || !visible()) return null;
|
||||
return new Promise((resolve, reject) => {
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
clearTimeout(timer);
|
||||
observer.disconnect();
|
||||
const rect = entry.intersectionRect;
|
||||
resolve(visible() && entry.isIntersecting && rect.width > 0 && rect.height > 0
|
||||
? { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
|
||||
: null);
|
||||
}, { root: element.ownerDocument });
|
||||
const timer = setTimeout(() => {
|
||||
observer.disconnect();
|
||||
reject(new Error('scroll-to visibility measurement timed out'));
|
||||
}, timeoutMs);
|
||||
observer.observe(element);
|
||||
});
|
||||
}`;
|
||||
|
||||
async function visibleRect(
|
||||
cdp: CdpRunner,
|
||||
address: NodeAddress,
|
||||
deadline: number,
|
||||
): Promise<ViewportRect | null> {
|
||||
const resolved = await sendToCdpTarget<{ object?: { objectId?: string } }>(
|
||||
cdp,
|
||||
address.target,
|
||||
"DOM.resolveNode",
|
||||
{ backendNodeId: address.backendNodeId },
|
||||
);
|
||||
if (!resolved.object?.objectId) throw new Error("scroll-to could not resolve the target element");
|
||||
const reply = await sendToCdpTarget<{
|
||||
result?: { value?: ViewportRect | null };
|
||||
exceptionDetails?: { text?: string; exception?: { description?: string } };
|
||||
}>(cdp, address.target, "Runtime.callFunctionOn", {
|
||||
objectId: resolved.object.objectId,
|
||||
functionDeclaration: VISIBLE_RECT,
|
||||
// Bound this read even if a background document stops rendering. Its
|
||||
// observer always disconnects; cancellation cannot leave a live observer.
|
||||
arguments: [{ value: Math.max(1, Math.min(1_000, deadline - Date.now())) }],
|
||||
awaitPromise: true,
|
||||
returnByValue: true,
|
||||
});
|
||||
if (reply.exceptionDetails) {
|
||||
const details = reply.exceptionDetails;
|
||||
throw new Error(details.exception?.description ?? details.text ?? "visibility script failed");
|
||||
}
|
||||
const rect = reply.result?.value;
|
||||
if (rect === null) return null;
|
||||
if (
|
||||
!rect ||
|
||||
![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
|
||||
rect.width <= 0 ||
|
||||
rect.height <= 0
|
||||
) {
|
||||
throw new Error("scroll-to visibility measurement returned invalid bounds");
|
||||
}
|
||||
return rect;
|
||||
}
|
||||
|
||||
async function projectRect(
|
||||
context: GeometryContext,
|
||||
address: NodeAddress,
|
||||
rect: ViewportRect,
|
||||
): Promise<Region> {
|
||||
let region: Region = [rectPolygon({ x: rect.x, y: rect.y, w: rect.width, h: rect.height })];
|
||||
if (!address.frameId) return region;
|
||||
const frame = await context.frame(address.frameId);
|
||||
if (!frame || cdpTargetKey(frame.target) !== cdpTargetKey(address.target)) {
|
||||
throw new Error("scroll-to frame no longer belongs to its target");
|
||||
}
|
||||
const parent = frame.parentFrameId ? await context.frame(frame.parentFrameId) : undefined;
|
||||
if (parent && cdpTargetKey(parent.target) === cdpTargetKey(frame.target)) {
|
||||
// DOM rectangles are document-local. Same-target iframe quads are already
|
||||
// target-local, so cross this one boundary before the target projection.
|
||||
const viewport = await context.viewport(frame.target);
|
||||
if (frame.ownerBackendNodeId === undefined || !viewport) {
|
||||
throw new Error("scroll-to could not resolve the frame viewport");
|
||||
}
|
||||
const local = await context.snapshotProjection(address, frame.ownerBackendNodeId, [], viewport);
|
||||
if (local.status !== "available") throw new Error("scroll-to could not project the frame");
|
||||
region = projectRegionToViewport(region, local.projection.geometry);
|
||||
}
|
||||
const projection = await context.targetProjection(frame.frameId);
|
||||
if (!projection) throw new Error("scroll-to could not project the target viewport");
|
||||
return projectRegionToViewport(region, projection);
|
||||
}
|
||||
|
||||
/** Only scroll-to needs renderer-clipped bounds; other interaction geometry is unchanged. */
|
||||
export async function scrollVisibleBounds(
|
||||
cdp: CdpRunner,
|
||||
tabId: number,
|
||||
address: NodeAddress,
|
||||
deadline: number,
|
||||
): Promise<ViewportRect | null> {
|
||||
const context = new GeometryContext(cdp, tabId);
|
||||
const rect = await visibleRect(cdp, address, deadline);
|
||||
if (!rect) return null;
|
||||
let region = await projectRect(context, address, rect);
|
||||
if (address.frameId) {
|
||||
const ancestry = await context.ancestry(address.frameId);
|
||||
if (!ancestry) throw new Error("scroll-to could not resolve the frame ancestry");
|
||||
for (const child of ancestry) {
|
||||
const parent = child.parentFrameId ? await context.frame(child.parentFrameId) : undefined;
|
||||
if (!parent || child.ownerBackendNodeId === undefined) {
|
||||
throw new Error("scroll-to could not resolve the frame owner");
|
||||
}
|
||||
const owner = {
|
||||
target: parent.target,
|
||||
frameId: parent.frameId,
|
||||
backendNodeId: child.ownerBackendNodeId,
|
||||
};
|
||||
// A visible child document can still have a hidden or clipped iframe.
|
||||
const ownerRect = await visibleRect(cdp, owner, deadline);
|
||||
if (!ownerRect) return null;
|
||||
const clips = await projectRect(context, owner, ownerRect);
|
||||
region = region.flatMap((polygon) => clips.map((clip) => clipPolygon(polygon, clip)));
|
||||
}
|
||||
}
|
||||
return regionBounds(region);
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import { ChromiumCdp } from "@/browser-driver/chromium-cdp";
|
||||
import { type CdpTarget, cdpTargetKey } from "@/browser-driver/frame-graph";
|
||||
import type { SessionManager } from "@/session-manager/manager";
|
||||
import type { RpcError, ScrollToParams, ScrollToResult } from "@/transport/types";
|
||||
import { attachDialogs, markDialogCursor } from "./dialogs";
|
||||
import { resolveNodeGeometry } from "./frame-geometry";
|
||||
import { cdpError, rpcError } from "./errors";
|
||||
import { scrollElementAndFramesIntoView } from "./frame-geometry";
|
||||
import { resolveBackendNode } from "./interaction";
|
||||
import { scrollVisibleBounds } from "./scroll-visibility";
|
||||
import {
|
||||
type CdpRunner,
|
||||
type ChromeTabsApi,
|
||||
@@ -12,6 +15,7 @@ import {
|
||||
isRpcError,
|
||||
lookupSession,
|
||||
resolveTargetTab,
|
||||
sendToCdpTarget,
|
||||
} from "./shared";
|
||||
|
||||
export interface ScrollToDeps {
|
||||
@@ -34,36 +38,100 @@ export async function handleScrollTo(
|
||||
const ctxOrErr = lookupSession(manager, params, "scroll-to");
|
||||
if (isRpcError(ctxOrErr)) return ctxOrErr;
|
||||
const ctx = ctxOrErr;
|
||||
if (deps.signal?.aborted) return { code: "cancelled", message: "scroll-to aborted" };
|
||||
const target = await resolveTargetTab(manager, ctx, params.tab_id, deps.tabsApi);
|
||||
if (isRpcError(target)) return target;
|
||||
const denied = enforceAgentWindow(ctx, target, "scroll-to");
|
||||
if (denied) return denied;
|
||||
const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
|
||||
const node = await resolveBackendNode(deps.cdp, ctx, target, params, "scroll-to");
|
||||
if (isRpcError(node)) return node;
|
||||
if (deps.signal?.aborted) return { code: "cancelled", message: "scroll-to aborted" };
|
||||
|
||||
deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
|
||||
const geometry = await resolveNodeGeometry(
|
||||
deps.cdp,
|
||||
target.tabId,
|
||||
{
|
||||
target: node.cdpTarget,
|
||||
backendNodeId: node.backendNodeId,
|
||||
...(node.frameId ? { frameId: node.frameId } : {}),
|
||||
},
|
||||
{ scrollIntoView: true },
|
||||
);
|
||||
if (isRpcError(geometry)) return geometry;
|
||||
|
||||
return attachDialogs(deps.cdp, target.tabId, dialogCursor, {
|
||||
tab_id: target.tabId,
|
||||
used_ref: node.usedRef,
|
||||
used_selector: node.usedSelector,
|
||||
x: geometry.topBounds.x,
|
||||
y: geometry.topBounds.y,
|
||||
width: geometry.topBounds.width,
|
||||
height: geometry.topBounds.height,
|
||||
});
|
||||
const timeout = params.timeout_ms ?? 30_000;
|
||||
if (!Number.isInteger(timeout) || timeout <= 0) {
|
||||
return { code: "invalid_params", message: "timeout_ms must be a positive integer" };
|
||||
}
|
||||
const deadline = Date.now() + timeout;
|
||||
const checkActive = () => {
|
||||
if (deps.signal?.aborted) throw new DOMException("scroll-to aborted", "AbortError");
|
||||
if (Date.now() >= deadline) throw new DOMException("scroll-to timed out", "TimeoutError");
|
||||
};
|
||||
const objectGroup = `bsk-scroll-${crypto.randomUUID()}`;
|
||||
const objectTargets = new Map<string, CdpTarget>();
|
||||
const send = async <T>(target: CdpTarget, method: string, args?: object): Promise<T> => {
|
||||
checkActive();
|
||||
// Also own objects allocated by the shared scroll fallback. Record the
|
||||
// target before awaiting so cancellation cannot skip their cleanup.
|
||||
if (method === "DOM.resolveNode") objectTargets.set(cdpTargetKey(target), target);
|
||||
const result = await sendToCdpTarget<T>(
|
||||
deps.cdp,
|
||||
target,
|
||||
method,
|
||||
method === "DOM.resolveNode" ? { ...args, objectGroup } : args,
|
||||
);
|
||||
checkActive();
|
||||
return result;
|
||||
};
|
||||
let graph: ReturnType<NonNullable<CdpRunner["getFrameGraph"]>> | undefined;
|
||||
const cdp: CdpRunner = {
|
||||
send: (tabId, method, args) => send({ tabId }, method, args),
|
||||
sendToTarget: send,
|
||||
trackSessionTab: deps.cdp.trackSessionTab?.bind(deps.cdp),
|
||||
getFrameGraph: deps.cdp.getFrameGraph
|
||||
? async (tabId) => {
|
||||
checkActive();
|
||||
graph ??= deps.cdp.getFrameGraph!(tabId);
|
||||
const result = await graph;
|
||||
checkActive();
|
||||
return result;
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
try {
|
||||
checkActive();
|
||||
const target = await resolveTargetTab(manager, ctx, params.tab_id, deps.tabsApi);
|
||||
checkActive();
|
||||
if (isRpcError(target)) return target;
|
||||
const denied = enforceAgentWindow(ctx, target, "scroll-to");
|
||||
if (denied) return denied;
|
||||
const dialogCursor = markDialogCursor(deps.cdp, target.tabId);
|
||||
const node = await resolveBackendNode(cdp, ctx, target, params, "scroll-to");
|
||||
checkActive();
|
||||
if (isRpcError(node)) return node;
|
||||
deps.cdp.trackSessionTab?.(ctx.sessionId, target.tabId);
|
||||
const scrollError = await scrollElementAndFramesIntoView(
|
||||
cdp,
|
||||
target.tabId,
|
||||
node.cdpTarget,
|
||||
node.backendNodeId,
|
||||
node.frameId,
|
||||
);
|
||||
checkActive();
|
||||
if (scrollError) return scrollError;
|
||||
const bounds = await scrollVisibleBounds(
|
||||
cdp,
|
||||
target.tabId,
|
||||
{
|
||||
target: node.cdpTarget,
|
||||
backendNodeId: node.backendNodeId,
|
||||
frameId: node.frameId,
|
||||
},
|
||||
deadline,
|
||||
);
|
||||
checkActive();
|
||||
if (!bounds)
|
||||
return rpcError(
|
||||
"permission_denied",
|
||||
"element_not_visible",
|
||||
"scroll-to target has no visible area",
|
||||
);
|
||||
return attachDialogs(deps.cdp, target.tabId, dialogCursor, {
|
||||
tab_id: target.tabId,
|
||||
used_ref: node.usedRef,
|
||||
used_selector: node.usedSelector,
|
||||
...bounds,
|
||||
});
|
||||
} catch (error) {
|
||||
if (deps.signal?.aborted) return { code: "cancelled", message: "scroll-to aborted" };
|
||||
if (Date.now() >= deadline) return { code: "timeout", message: "scroll-to timed out" };
|
||||
return cdpError(error);
|
||||
} finally {
|
||||
// Cleanup bypasses the cancellation guard and cannot replace the result.
|
||||
for (const target of objectTargets.values()) {
|
||||
await sendToCdpTarget(deps.cdp, target, "Runtime.releaseObjectGroup", { objectGroup }).catch(
|
||||
() => {},
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user