feat(trace): allow saving trajectory as trace (#426)

tests/files.spec.ts

@@ -126,7 +126,12 @@ test('clicking on download link emits download', async ({ startClient, localOutp
 - Downloaded file test.txt to ${path.join(outputDir, 'test.txt')}`);
 });
 
-test('navigating to download link emits download', async ({ client, server, mcpBrowser }) => {
+test('navigating to download link emits download', async ({ startClient, localOutputPath, mcpBrowser, server }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    args: ['--output-dir', outputDir],
+  });
+
   test.skip(mcpBrowser === 'webkit' && process.platform === 'linux', 'https://github.com/microsoft/playwright/blob/8e08fdb52c27bb75de9bf87627bf740fadab2122/tests/library/download.spec.ts#L436');
   server.route('/download', (req, res) => {
     res.writeHead(200, {

tests/pdf.spec.ts

@@ -30,7 +30,12 @@ test('save as pdf unavailable', async ({ startClient, server }) => {
   })).toHaveTextContent(/Tool \"browser_pdf_save\" not found/);
 });
 
-test('save as pdf', async ({ client, mcpBrowser, server }) => {
+test('save as pdf', async ({ startClient, mcpBrowser, server, localOutputPath }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    config: { outputDir },
+  });
+
   test.skip(!!mcpBrowser && !['chromium', 'chrome', 'msedge'].includes(mcpBrowser), 'Save as PDF is only supported in Chromium.');
 
   expect(await client.callTool({

tests/screenshot.spec.ts

@@ -18,7 +18,11 @@ import fs from 'fs';
 
 import { test, expect } from './fixtures.js';
 
-test('browser_take_screenshot (viewport)', async ({ client, server }) => {
+test('browser_take_screenshot (viewport)', async ({ startClient, server, localOutputPath }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    args: ['--output-dir', outputDir],
+  });
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
@@ -41,7 +45,11 @@ test('browser_take_screenshot (viewport)', async ({ client, server }) => {
   });
 });
 
-test('browser_take_screenshot (element)', async ({ client, server }) => {
+test('browser_take_screenshot (element)', async ({ startClient, server, localOutputPath }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    args: ['--output-dir', outputDir],
+  });
   expect(await client.callTool({
     name: 'browser_navigate',
     arguments: { url: server.HELLO_WORLD },
@@ -166,9 +174,10 @@ test('browser_take_screenshot (filename: "output.jpeg")', async ({ startClient,
   expect(files[0]).toMatch(/^output\.jpeg$/);
 });
 
-test('browser_take_screenshot (noImageResponses)', async ({ startClient, server }) => {
+test('browser_take_screenshot (noImageResponses)', async ({ startClient, server, localOutputPath }) => {
   const client = await startClient({
     config: {
+      outputDir: localOutputPath('output'),
       noImageResponses: true,
     },
   });
@@ -194,8 +203,12 @@ test('browser_take_screenshot (noImageResponses)', async ({ startClient, server
   });
 });
 
-test('browser_take_screenshot (cursor)', async ({ startClient, server }) => {
-  const client = await startClient({ clientName: 'cursor:vscode' });
+test('browser_take_screenshot (cursor)', async ({ startClient, server, localOutputPath }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    clientName: 'cursor:vscode',
+    config: { outputDir },
+  });
 
   expect(await client.callTool({
     name: 'browser_navigate',

tests/sse.spec.ts

@@ -65,11 +65,17 @@ test('streamable http transport', async ({ serverEndpoint }) => {
   expect(transport.sessionId, 'has session support').toBeDefined();
 });
 
-test('sse transport via public API', async ({ server }) => {
+test('sse transport via public API', async ({ server, localOutputPath }) => {
+  const userDataDir = localOutputPath('user-data-dir');
   const sessions = new Map<string, SSEServerTransport>();
   const mcpServer = http.createServer(async (req, res) => {
     if (req.method === 'GET') {
-      const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
+      const connection = await createConnection({
+        browser: {
+          userDataDir,
+          launchOptions: { headless: true }
+        },
+      });
       const transport = new SSEServerTransport('/sse', res);
       sessions.set(transport.sessionId, transport);
       await connection.connect(transport);

tests/trace.spec.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import { test, expect } from './fixtures.js';
+
+test('check that trace is saved', async ({ startClient, server, localOutputPath }) => {
+  const outputDir = localOutputPath('output');
+  const client = await startClient({
+    args: ['--save-trace', `--output-dir=${outputDir}`],
+  });
+
+  expect(await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.HELLO_WORLD },
+  })).toContainTextContent(`Navigate to http://localhost`);
+
+  expect(fs.existsSync(path.join(outputDir, 'traces', 'trace.trace'))).toBeTruthy();
+});