1import { PreviewAutomationEvaluateInput } from "@t3tools/contracts";
2import * as Schema from "effect/Schema";
3import {
4 chromium,
5 type Browser,
6 type BrowserContext,
7 type CDPSession,
8 type Page,
9} from "playwright-core";
10import {
11 afterAll,
12 afterEach,
13 beforeAll,
14 beforeEach,
15 describe,
16 expect,
17 it,
18 vi,
19} from "vite-plus/test";
20
21import * as ServerBrowserPage from "./ServerBrowserPage.ts";
22import { SessionControl } from "./SessionControl.ts";
23
24const decodeEvaluateInput = Schema.decodeUnknownSync(PreviewAutomationEvaluateInput);
25
26describe("server browser capture deadlines", () => {
27 it("releases control after an unanswered capture and ignores its late reply", async () => {
28 vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
29 try {
30 const captured = Promise.withResolvers<{ data: string }>();
31 const send = vi.fn(async (method: string) =>
32 method === "Page.captureScreenshot"
33 ? captured.promise
34 : { result: { value: "still responsive" } },
35 );
36 const cdp = { send } as unknown as CDPSession;
37 const control = new SessionControl("agent");
38 let outcome: unknown;
39 const capture = control
40 .agent("agent", () => ServerBrowserPage.captureViewport(cdp, { format: "png" }))
41 .catch((cause: unknown) => {
42 outcome = cause;
43 });
44 const evaluation = control.agent("agent", () =>
45 ServerBrowserPage.evaluate(cdp, { expression: "document.title" }, 1_000),
46 );
47
48 await vi.advanceTimersByTimeAsync(3_000);
49 expect(outcome).toMatchObject({
50 tag: "PreviewAutomationExecutionError",
51 message: expect.stringContaining("not producing screenshot frames"),
52 });
53 await capture;
54 expect(await evaluation).toBe("still responsive");
55 expect(vi.getTimerCount()).toBe(0);
56
57 captured.resolve({ data: "late-frame" });
58 await captured.promise;
59 expect(outcome).toBeInstanceOf(ServerBrowserPage.ServerBrowserOperationError);
60 expect(send.mock.calls.map(([method]) => method)).toEqual([
61 "Page.captureScreenshot",
62 "Runtime.evaluate",
63 ]);
64 } finally {
65 vi.useRealTimers();
66 }
67 });
68});
69
70describe("server browser element refs", () => {
71 let browser: Browser;
72 let context: BrowserContext;
73 let page: Page;
74 let cdp: CDPSession;
75
76 beforeAll(async () => {
77 browser = await chromium.launch({ headless: true });
78 });
79 afterAll(async () => {
80 await browser?.close();
81 });
82 beforeEach(async () => {
83 context = await browser.newContext();
84 page = await context.newPage();
85 cdp = await context.newCDPSession(page);
86 });
87 afterEach(async () => {
88 await context.close();
89 });
90
91 const takeSnapshot = () =>
92 ServerBrowserPage.snapshot({
93 page,
94 cdp,
95 renderScale: 1,
96 consoleEntries: [],
97 networkEntries: [],
98 actionTimeline: [],
99 });
100 const locators = (tree: unknown) => {
101 expect(typeof tree).toBe("string");
102 return Array.from(
103 String(tree).matchAll(/\[ref=([^\]]+)\]/g),
104 (match) => `aria-ref=${match[1]}`,
105 );
106 };
107 const buttonLocator = (tree: unknown, name: string) => {
108 const line = String(tree)
109 .split("\n")
110 .find((line) => line.includes(`button "${name}"`));
111 const locator = locators(line)[0];
112 expect(locator).toBeDefined();
113 return locator!;
114 };
115 const repeatedRows = `<ul>${Array.from({ length: 5 }, (_, i) => `<li>row ${i + 1}<button data-testid="delete-row" onclick="this.parentElement.remove()">delete</button></li>`).join("")}</ul>`;
116
117 it("clicks the fifth repeated delete control without touching row one", async () => {
118 await page.setContent(repeatedRows);
119 const result = await takeSnapshot();
120 const buttons = String(result.accessibilityTree)
121 .split("\n")
122 .filter((line) => line.includes('button "delete"'));
123 expect(buttons).toHaveLength(5);
124 await ServerBrowserPage.click(page, { locator: locators(buttons[4])[0]!, timeoutMs: 1_000 });
125 expect(await page.locator("li").allTextContents()).toEqual([
126 "row 1delete",
127 "row 2delete",
128 "row 3delete",
129 "row 4delete",
130 ]);
131 });
132
133 it("returns from a click once it opens a dialog", async () => {
134 await page.setContent(
135 `<button onclick="document.body.dataset.answer = String(confirm('sure?'))">Confirm</button>`,
136 );
137 const dialog = new Promise<import("playwright-core").Dialog>((resolve) =>
138 page.once("dialog", resolve),
139 );
140 await ServerBrowserPage.click(page, {
141 locator: buttonLocator((await takeSnapshot()).accessibilityTree, "Confirm"),
142 timeoutMs: 1_000,
143 });
144 await (await dialog).accept();
145 await expect.poll(() => page.locator("body").getAttribute("data-answer")).toBe("true");
146 });
147
148 it("rejects ambiguous CSS controls without clicking any row", async () => {
149 await page.setContent(repeatedRows);
150 await expect(
151 ServerBrowserPage.click(page, {
152 selector: 'button[data-testid="delete-row"]',
153 timeoutMs: 1_000,
154 }),
155 ).rejects.toThrow(/strict mode violation/);
156 expect(await page.locator("li").count()).toBe(5);
157 });
158
159 it("tells a click target that matches nothing from one that never becomes clickable", async () => {
160 await page.setContent(`<button hidden>hidden</button>`);
161 const failure = (selector: string) =>
162 ServerBrowserPage.click(page, { selector, timeoutMs: 500 }).then(
163 () => expect.unreachable(),
164 ServerBrowserPage.toOperationError,
165 );
166
167 const absent = await failure(".definitely-no-such-t3-target");
168 expect(absent.tag).toBe("PreviewAutomationTimeoutError");
169 expect(absent.message).toBe(
170 'The click may have happened and removed its target or navigated; check the page before retrying. No element matches ".definitely-no-such-t3-target" after the timeout; take a fresh snapshot and use its locator.',
171 );
172 expect(absent.cause).toMatchObject({ name: "TimeoutError" });
173 const hidden = await failure("button");
174 expect(hidden.tag).toBe("PreviewAutomationTimeoutError");
175 expect(hidden.message).toBe(
176 'The click may have happened; check the page before retrying. "button" still matches an element after the timeout.',
177 );
178 });
179
180 it("does not retarget a removed ref to a replacement node", async () => {
181 await page.setContent("<button onclick=\"this.textContent='clicked'\">original</button>");
182 const locator = buttonLocator((await takeSnapshot()).accessibilityTree, "original");
183 await page.setContent("<button onclick=\"this.textContent='clicked'\">replacement</button>");
184 await expect(ServerBrowserPage.click(page, { locator, timeoutMs: 100 })).rejects.toThrow();
185 expect(await page.locator("button").textContent()).toBe("replacement");
186 });
187
188 it("targets iframe input refs and preserves the parent form", async () => {
189 await page.setContent(
190 '<input aria-label="parent"><iframe srcdoc="<input aria-label=child>"></iframe>',
191 );
192 await page.frameLocator("iframe").getByRole("textbox").waitFor();
193 const result = await takeSnapshot();
194 const line = String(result.accessibilityTree)
195 .split("\n")
196 .find((line) => line.includes('textbox "child"'));
197 const locator = locators(line)[0]!;
198 await ServerBrowserPage.type(page, { locator, text: "inside iframe", clear: true });
199 expect(await page.frameLocator("iframe").getByRole("textbox").inputValue()).toBe(
200 "inside iframe",
201 );
202 expect(await page.getByRole("textbox", { name: "parent" }).inputValue()).toBe("");
203 });
204
205 it("shows dotted fields as dots wherever their value appears, keeping text values and refs", async () => {
206 await page.setContent(`
207 <table><tr><td>password:</td><td><input id="pw" type="password" aria-label="Password"></td></tr></table>
208 <input aria-label="Username" value="maria">
209 <input type="password" aria-label='saved" [ref=e2]: x' placeholder="hint" value="saved-pass">
210 <input type="password" role="combobox" aria-label="Code" value="role-pass">
211 <input aria-label="PIN" style="-webkit-text-security: disc" value="styled-pass">
212 <div contenteditable style="-webkit-text-security: disc">editable-pass</div>
213 <iframe srcdoc="<input type=password aria-label=child value=frame-pass>"></iframe>
214 <iframe id="blank" src="javascript:false"></iframe>
215 <p>Order styled-pass-2</p>
216 <script>
217 // A frame that never commits a document, filled by its parent.
218 blank.contentDocument.body.innerHTML = "<input type=password aria-label=blank value=blank-pass>";
219 // Page script can't change the value the snapshot sees.
220 Object.defineProperty(HTMLInputElement.prototype, "value", { get: () => "" });
221 </script>`);
222 await page.frameLocator("iframe[srcdoc]").getByRole("textbox").waitFor();
223 await ServerBrowserPage.type(page, { locator: "#pw", text: "typed-pass" });
224 const result = await takeSnapshot();
225 const tree = String(result.accessibilityTree);
226 expect(tree).toContain('textbox "blank"');
227 expect(tree).not.toMatch(
228 /typed-pass|saved-pass|role-pass|styled-pass|editable-pass|frame-pass|blank-pass/,
229 );
230 expect(result.visibleText).not.toContain("editable-pass");
231 expect(result.visibleText).toContain("Order ••••••••-2");
232 expect(tree).toMatch(/textbox "Username" [^\n]*: maria$/m);
233 const line = tree.split("\n").find((line) => line.includes('textbox "Password"'));
234 expect(line).toMatch(/: •+$/);
235 await ServerBrowserPage.type(page, { locator: locators(line)[0]!, text: "next", clear: true });
236 expect(await page.locator("#pw").inputValue()).toBe("next");
237 });
238
239 it("masks dotted values in page text next to punctuation, with odd spaces, and at the cut", async () => {
240 await page.setContent(`
241 <input type="password" aria-label="PIN" value="123">
242 <input type="password" aria-label="Phrase" value="open sesame">
243 <p>PIN: 123. Code (123) id 1234</p>
244 <p>open sesame</p>`);
245 const text = (await takeSnapshot()).visibleText;
246 expect(text).toContain("PIN: ••••••••. Code (••••••••) id 1234");
247 expect(text).not.toMatch(/open|sesame/);
248 await page.setContent(`
249 <p>${"x".repeat(19_995)}long-secret</p>
250 <input type="password" aria-label="Long" value="long-secret">`);
251 const cut = (await takeSnapshot()).visibleText;
252 expect(cut.length).toBe(20_000);
253 expect(cut.slice(-8)).toBe("xxx•••••");
254 });
255
256 it("shows a data: link or blocked data: navigation by media type only", async () => {
257 // Chromium keeps raw spaces and quotes in both, so a payload can't be cut at either.
258 await page.setContent(`
259 <a download href="data:text/plain;charset="a,b",head PAYLOAD'tail">Key</a>
260 <a href="https://example.com/data:report,2026">Report</a>
261 <a href="#">data:text/plain,label</a>
262 <a href='"data:text/plain,relative'>Relative</a>
263 <a href=" data:text/plain,PAYLOAD">Spaced</a>
264 <a href="da	ta:text/plain,PAYLOAD">Tabbed</a>
265 <a href="data:text/plain,head
PAYLOAD">Separated</a>
266 <a href="data:PAYLOAD,x">Typeless</a>
267 <a href="data:text/plain,PAYLOAD">Vertical tab</a>
268 <a href="data:text/plain,PAYLOAD">Backspace</a>
269 <a id="controlled">Controlled</a>
270 <a id="escaped">Escaped</a>
271 <script>
272 controlled.href = "\\x01data:text/plain,PAYLOAD";
273 escaped.href = "\\x02da\\tta:text/plain,PAYLOAD";
274 </script>`);
275 const tree = String((await takeSnapshot()).accessibilityTree);
276 expect(tree.match(/\/url: data:text\/plain,…$/gm)).toHaveLength(8);
277 expect(tree).toContain("/url: data:,…");
278 expect(tree).toContain("/url: https://example.com/data:report,2026");
279 expect(tree).toMatch(/link "data:text\/plain,label" \[ref=t3-/);
280 expect(tree).not.toMatch(/PAYLOAD|tail|charset|\u2028/);
281 expect(tree).toContain('/url: "\\"data:text/plain,relative"');
282 });
283
284 it("redacts a data: link whose scheme a password value would mask", async () => {
285 await page.setContent(`
286 <input type="password" aria-label="Scheme" value="data">
287 <a download href="data:text/plain,PAYLOAD">Key</a>`);
288 const tree = String((await takeSnapshot()).accessibilityTree);
289 expect(tree).toContain("/url: ••••••••:text/plain,…");
290 expect(tree).not.toContain("PAYLOAD");
291 });
292
293 it("shows a data: page's own URL by media type only", async () => {
294 await page.goto("data:text/html,<title>Key</title>PAYLOAD");
295 expect((await takeSnapshot()).url).toBe("data:text/html,…");
296 });
297
298 it("rejects refs from another tab", async () => {
299 await page.setContent("<button>same label</button>");
300 const locator = buttonLocator((await takeSnapshot()).accessibilityTree, "same label");
301 const other = await context.newPage();
302 await other.setContent("<button>same label</button>");
303 await expect(ServerBrowserPage.click(other, { locator })).rejects.toThrow(/another tab/);
304 });
305
306 it("revokes refs after navigation even when labels are identical", async () => {
307 await page.goto("data:text/html,<button>continue</button>");
308 const locator = buttonLocator((await takeSnapshot()).accessibilityTree, "continue");
309 await page.goto("data:text/html,<button>continue</button><p>new document</p>");
310 await expect(ServerBrowserPage.click(page, { locator })).rejects.toThrow(/stale/);
311 });
312
313 it.each(["aria-ref=e1", " aria-ref=e1", "css=body >> aria-ref=e1"])(
314 "does not allow native refs to bypass generation validation (%s)",
315 async (locator) => {
316 await page.setContent("<button>continue</button>");
317 await takeSnapshot();
318 await expect(ServerBrowserPage.click(page, { locator })).rejects.toThrow(/stale/);
319 },
320 );
321
322 it("preserves quoted attribute values containing ref engine text", async () => {
323 await page.setContent(
324 '<button data-example=" >> aria-ref=e1" onclick="this.textContent=\'saved\'">save</button>',
325 );
326 await ServerBrowserPage.click(page, { selector: 'button[data-example=" >> aria-ref=e1"]' });
327 expect(await page.locator("button").textContent()).toBe("saved");
328 });
329
330 it("evaluates top-level await and returns the last expression's value", async () => {
331 await page.setContent("<title>Ready</title>");
332 const result = await ServerBrowserPage.evaluate(
333 cdp,
334 { expression: "await Promise.resolve(); document.title" },
335 5_000,
336 );
337 expect(result).toBe("Ready");
338 });
339
340 it("returns object contents even when a legacy caller asks for a remote reference", async () => {
341 const input = decodeEvaluateInput({
342 expression: "({ answer: 42, nested: { ready: true } })",
343 returnByValue: false,
344 });
345 const result = await ServerBrowserPage.evaluate(cdp, input, 5_000);
346 expect(result).toEqual({ answer: 42, nested: { ready: true } });
347 });
348
349 it("still awaits the promise an async function returns", async () => {
350 const result = await ServerBrowserPage.evaluate(
351 cdp,
352 { expression: "(async () => { await 0; return 1 })()" },
353 5_000,
354 );
355 expect(result).toBe(1);
356 });
357
358 it("does not rerun an expression whose SyntaxError is thrown at runtime", async () => {
359 const evaluation = ServerBrowserPage.evaluate(
360 cdp,
361 { expression: "window.runs = (window.runs ?? 0) + 1; new Function('await 0')" },
362 5_000,
363 );
364 await expect(evaluation).rejects.toThrow("await is only valid");
365 expect(await page.evaluate("window.runs")).toBe(1);
366 });
367
368 it("does not rerun an expression whose awaited browser call rejects with a SyntaxError", async () => {
369 let posts = 0;
370 await page.route("http://preview.test/**", (route) => {
371 if (route.request().method() === "POST") posts++;
372 return route.fulfill({ contentType: "text/html", body: "<title>Ready</title>" });
373 });
374 await page.goto("http://preview.test/");
375 const evaluation = ServerBrowserPage.evaluate(
376 cdp,
377 {
378 expression:
379 "(async () => { const r = await fetch('/api', { method: 'POST' }); return r.json() })()",
380 },
381 5_000,
382 );
383 await expect(evaluation).rejects.toThrow("is not valid JSON");
384 expect(posts).toBe(1);
385 });
386
387 it("returns the result of a top-level await expression that reloads the page", async () => {
388 await page.route("http://preview.test/", (route) =>
389 route.fulfill({ contentType: "text/html", body: "<title>Ready</title>" }),
390 );
391 await page.goto("http://preview.test/");
392 const result = await ServerBrowserPage.evaluate(
393 cdp,
394 { expression: "await 0; location.reload(); ({ clicked: true })" },
395 5_000,
396 );
397 expect(result).toEqual({ clicked: true });
398 });
399});
400
401describe("server browser snapshot screenshot", () => {
402 let browser: Browser;
403 let context: BrowserContext;
404
405 beforeAll(async () => {
406 // ServerBrowserContexts launches with these, and the capture scale depends on them.
407 browser = await chromium.launch({
408 headless: true,
409 args: ["--disable-gpu", "--force-device-scale-factor=2"],
410 });
411 });
412 afterAll(async () => {
413 await browser?.close();
414 });
415 beforeEach(async () => {
416 context = await browser.newContext({
417 viewport: { width: 1280, height: 800 },
418 deviceScaleFactor: 2,
419 });
420 });
421 afterEach(async () => {
422 await context.close();
423 });
424
425 // Blue on the left half and red on the right, so a mirrored left half shows up on the right.
426 const halves = (overlay: string) => `
427 <style>
428 body { margin: 0; background: white; }
429 .half { position: absolute; top: 0; width: 640px; height: 800px; }
430 .overlay { position: fixed; inset: 0; ${overlay} }
431 </style>
432 <div class="half" style="left: 0; background: #2563eb"></div>
433 <div class="half" style="left: 640px; background: #ef4444"></div>
434 <div class="overlay"></div>`;
435
436 const screenshotOf = async (html: string) => {
437 const page = await context.newPage();
438 await page.setContent(html);
439 const { screenshot, fullScreenshot } = await ServerBrowserPage.snapshot({
440 page,
441 cdp: await context.newCDPSession(page),
442 renderScale: 2,
443 fullScreenshot: true,
444 consoleEntries: [],
445 networkEntries: [],
446 actionTimeline: [],
447 });
448 // The server has no DOM types, so the decoder runs as page source.
449 const points = [
450 [0.15, 0.75],
451 [0.85, 0.25],
452 [0.85, 0.75],
453 ];
454 const pixels = (await page.evaluate(`(async () => {
455 const bytes = Uint8Array.from(atob(${JSON.stringify(screenshot.data)}), (char) => char.charCodeAt(0));
456 const bitmap = await createImageBitmap(new Blob([bytes], { type: "image/png" }));
457 const canvas = document.createElement("canvas");
458 canvas.width = bitmap.width;
459 canvas.height = bitmap.height;
460 const context = canvas.getContext("2d");
461 context.drawImage(bitmap, 0, 0);
462 return ${JSON.stringify(points)}.map(([x, y]) =>
463 Array.from(context.getImageData(x * bitmap.width, y * bitmap.height, 1, 1).data),
464 );
465 })()`)) as Array<[number, number, number, number]>;
466 return { screenshot, fullScreenshot, pixels };
467 };
468 const colorOf = ([red, green, blue]: readonly [number, number, number, number]) =>
469 blue - red > 100 ? "blue" : red - blue > 100 ? "red" : `rgb(${red}, ${green}, ${blue})`;
470
471 it("captures a blurred backdrop-filter page as rendered, not mirrored", async () => {
472 const { screenshot, pixels } = await screenshotOf(halves("backdrop-filter: blur(4px);"));
473
474 expect({
475 size: [screenshot.width, screenshot.height],
476 colors: pixels.map(colorOf),
477 }).toEqual({ size: [1280, 800], colors: ["blue", "red", "red"] });
478 });
479
480 it("captures a plain page at the shrunk size with its content in place", async () => {
481 const { screenshot, fullScreenshot, pixels } = await screenshotOf(halves(""));
482
483 expect({
484 size: [screenshot.width, screenshot.height],
485 fullSize: [fullScreenshot?.width, fullScreenshot?.height],
486 colors: pixels.map(colorOf),
487 }).toEqual({ size: [1280, 800], fullSize: [2560, 1600], colors: ["blue", "red", "red"] });
488 });
489
490 it("records the destination of a finite entrance animation without waiting on infinite ones", async () => {
491 const page = await context.newPage();
492 await page.setContent(`
493 <style>
494 body { margin: 0; background: #2563eb; }
495 @keyframes enter { from { opacity: 0; } to { opacity: 1; } }
496 @keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }
497 button { animation: pulse 2s infinite; }
498 #paused { animation: enter 2s paused; }
499 #overlay { display: none; position: fixed; inset: 0; background: #ef4444; }
500 #overlay.open { display: block; animation: enter 200ms both; }
501 </style>
502 <button onclick="document.querySelector('#overlay').classList.add('open')">Open</button>
503 <div id="paused"></div>
504 <div id="overlay"></div>
505 `);
506 await page.getByRole("button", { name: "Open" }).click();
507 const frame = await ServerBrowserPage.captureFinalRecordingFrame(
508 await context.newCDPSession(page),
509 80,
510 );
511 expect(frame).toBeDefined();
512 const pixel = (await page.evaluate(`(async () => {
513 const bytes = Uint8Array.from(atob(${JSON.stringify(frame)}), char => char.charCodeAt(0));
514 const bitmap = await createImageBitmap(new Blob([bytes], { type: "image/jpeg" }));
515 const canvas = document.createElement("canvas");
516 canvas.width = bitmap.width;
517 canvas.height = bitmap.height;
518 const context = canvas.getContext("2d");
519 context.drawImage(bitmap, 0, 0);
520 return Array.from(context.getImageData(bitmap.width / 2, bitmap.height / 2, 1, 1).data);
521 })()`)) as [number, number, number, number];
522 expect(colorOf(pixel)).toBe("red");
523 });
524
525 it("shrinks the screenshot of an XML document, whose createElement makes no canvas", async () => {
526 const page = await context.newPage();
527 await page.goto("data:text/xml,<a/>");
528 const { screenshot } = await ServerBrowserPage.snapshot({
529 page,
530 cdp: await context.newCDPSession(page),
531 renderScale: 2,
532 consoleEntries: [],
533 networkEntries: [],
534 actionTimeline: [],
535 });
536
537 expect([screenshot.width, screenshot.height]).toEqual([1280, 800]);
538 });
539});
540
541describe("server browser drag", () => {
542 it("fails the drag, not the server, when it times out while the cursor is still moving", async () => {
543 const timedOut = new Error("locator.dragTo: Timeout 30000ms exceeded.");
544 const box = { x: 0, y: 0, width: 20, height: 20 };
545 const targetBox = Promise.withResolvers<typeof box>();
546 const page = {
547 locator: (selector: string) =>
548 selector === "#card"
549 ? {
550 scrollIntoViewIfNeeded: async () => {},
551 boundingBox: async () => box,
552 dragTo: () => Promise.reject(timedOut),
553 }
554 : { boundingBox: () => targetBox.promise },
555 } as unknown as Page;
556 const unobserved: Array<unknown> = [];
557 const onUnhandled = (reason: unknown) => unobserved.push(reason);
558 process.on("unhandledRejection", onUnhandled);
559 try {
560 let finished = false;
561 const settled = ServerBrowserPage.drag(page, { source: "#card", target: "#lane" }).then(
562 () => null,
563 (error: unknown) => error,
564 );
565 void settled.then(() => (finished = true));
566 // Two macrotask turns: Node reports a rejection nobody observed after the first.
567 for (let turn = 0; turn < 2; turn++) {
568 // oxlint-disable-next-line t3code/no-real-time-wait-in-tests -- Node emits unhandledRejection only between macrotasks; no promise can mark that point.
569 await new Promise((resolve) => setImmediate(resolve));
570 }
571 expect(finished).toBe(false);
572 targetBox.resolve(box);
573
574 expect(await settled).toBe(timedOut);
575 expect(unobserved).toEqual([]);
576 } finally {
577 process.off("unhandledRejection", onUnhandled);
578 }
579 });
580});
581
582describe("server browser evaluate", () => {
583 it("does not retry a parse error that arrives after the timeout", async () => {
584 vi.useFakeTimers();
585 try {
586 const classic = Promise.withResolvers<unknown>();
587 const send = vi.fn((method: string) =>
588 method === "Runtime.evaluate" ? classic.promise : Promise.resolve({}),
589 );
590 const cdp = { send } as unknown as CDPSession;
591 const evaluation = ServerBrowserPage.evaluate(cdp, { expression: "await 0; 1" }, 10);
592 const rejected = expect(evaluation).rejects.toMatchObject({
593 tag: "PreviewAutomationTimeoutError",
594 });
595 await vi.advanceTimersByTimeAsync(10);
596 await rejected;
597 classic.resolve({
598 result: { type: "object" },
599 exceptionDetails: {
600 text: "Uncaught",
601 scriptId: "4",
602 exception: { type: "object", className: "SyntaxError" },
603 },
604 });
605 await classic.promise;
606 expect(send.mock.calls.map(([method]) => method)).toEqual([
607 "Runtime.evaluate",
608 "Runtime.terminateExecution",
609 ]);
610 } finally {
611 vi.useRealTimers();
612 }
613 });
614});
615
616describe("server browser wait", () => {
617 it("ends at its timeout when a check never answers", async () => {
618 // As on a desktop tab whose Playwright utility world never answers.
619 const page = {
620 locator: () => ({ count: () => new Promise<number>(() => {}) }),
621 } as unknown as Page;
622 vi.useFakeTimers();
623 try {
624 let failure: unknown;
625 void ServerBrowserPage.waitFor(page, { selector: "button", timeoutMs: 300 }).catch(
626 (error: unknown) => (failure = error),
627 );
628 await vi.advanceTimersByTimeAsync(300);
629 expect(failure).toMatchObject({ tag: "PreviewAutomationTimeoutError" });
630 } finally {
631 vi.useRealTimers();
632 }
633 });
634});
635
636describe("server browser net errors", () => {
637 it.each([
638 ["net::ERR_CONNECTION_REFUSED", "ERR_CONNECTION_REFUSED", -102],
639 [
640 "page.goto: net::ERR_HTTP2_PROTOCOL_ERROR at https://localhost:5173/",
641 "ERR_HTTP2_PROTOCOL_ERROR",
642 -2,
643 ],
644 ["net::ERR_TLS13_DOWNGRADE_DETECTED", "ERR_TLS13_DOWNGRADE_DETECTED", -2],
645 ])("reads the whole error name from %j", (errorText, description, code) => {
646 expect(ServerBrowserPage.parseNetError(errorText)).toEqual({ description, code });
647 });
648});