playwright 1.56.0-alpha-2025-09-23 → 1.56.0-alpha-1758747822000

package/lib/agents/generateAgents.js

@@ -107,7 +107,7 @@ function saveAsClaudeCode(agent) {
   }
   const lines = [];
   lines.push(`---`);
-  lines.push(`name: ${agent.header.name}`);
+  lines.push(`name: playwright-test-${agent.header.name}`);
   lines.push(`description: ${agent.header.description}. Examples: ${agent.examples.map((example) => `<example>${example}</example>`).join("")}`);
   lines.push(`tools: ${agent.header.tools.map((tool) => asClaudeTool(tool)).join(", ")}`);
   lines.push(`model: ${agent.header.model}`);
@@ -143,10 +143,10 @@ function saveAsOpencodeJson(agents) {
   result["agent"] = {};
   for (const agent of agents) {
     const tools = {};
-    result["agent"][agent.header.name] = {
+    result["agent"]["playwright-test-" + agent.header.name] = {
       description: agent.header.description,
       mode: "subagent",
-      prompt: `{file:.opencode/prompts/${agent.header.name}.md}`,
+      prompt: `{file:.opencode/prompts/playwright-test-${agent.header.name}.md}`,
       tools
     };
     for (const tool of agent.header.tools)
@@ -172,7 +172,7 @@ async function initClaudeCodeRepo() {
   const agents = await loadAgents();
   await import_fs.default.promises.mkdir(".claude/agents", { recursive: true });
   for (const agent of agents)
-    await writeFile(`.claude/agents/${agent.header.name}.md`, saveAsClaudeCode(agent));
+    await writeFile(`.claude/agents/playwright-test-${agent.header.name}.md`, saveAsClaudeCode(agent));
   await writeFile(".mcp.json", JSON.stringify({
     mcpServers: {
       "playwright-test": {
@@ -189,28 +189,42 @@ const vscodeToolMap = /* @__PURE__ */ new Map([
   ["edit", ["editFiles"]],
   ["write", ["createFile", "createDirectory"]]
 ]);
+const vscodeToolsOrder = ["createFile", "createDirectory", "editFiles", "fileSearch", "textSearch", "listDirectory", "readFile"];
+const vscodeToolPrefix = "test_";
 function saveAsVSCodeChatmode(agent) {
   function asVscodeTool(tool) {
     const [first, second] = tool.split("/");
     if (second)
-      return second;
+      return second.startsWith("browser_") ? vscodeToolPrefix + second : second;
     return vscodeToolMap.get(first) || first;
   }
-  const tools = agent.header.tools.map(asVscodeTool).flat().map((tool) => `'${tool}'`).join(", ");
+  const tools = agent.header.tools.map(asVscodeTool).flat().sort((a, b) => {
+    const indexA = vscodeToolsOrder.indexOf(a);
+    const indexB = vscodeToolsOrder.indexOf(b);
+    if (indexA === -1 && indexB === -1)
+      return a.localeCompare(b);
+    if (indexA === -1)
+      return 1;
+    if (indexB === -1)
+      return -1;
+    return indexA - indexB;
+  }).map((tool) => `'${tool}'`).join(", ");
   const lines = [];
   lines.push(`---`);
-  lines.push(`description: ${agent.header.description}. Examples: ${agent.examples.map((example) => `<example>${example}</example>`).join("")}`);
+  lines.push(`description: ${agent.header.description}.`);
   lines.push(`tools: [${tools}]`);
   lines.push(`---`);
   lines.push("");
   lines.push(agent.instructions);
+  for (const example of agent.examples)
+    lines.push(`<example>${example}</example>`);
   return lines.join("\n");
 }
 async function initVSCodeRepo() {
   const agents = await loadAgents();
   await import_fs.default.promises.mkdir(".github/chatmodes", { recursive: true });
   for (const agent of agents)
-    await writeFile(`.github/chatmodes/${agent.header.name}.chatmode.md`, saveAsVSCodeChatmode(agent));
+    await writeFile(`.github/chatmodes/${agent.header.name === "planner" ? " " : ""}\u{1F3AD} ${agent.header.name}.chatmode.md`, saveAsVSCodeChatmode(agent));
   await import_fs.default.promises.mkdir(".vscode", { recursive: true });
   const mcpJsonPath = ".vscode/mcp.json";
   let mcpJson = {
@@ -226,7 +240,8 @@ async function initVSCodeRepo() {
   mcpJson.servers["playwright-test"] = {
     type: "stdio",
     command: commonMcpServers.playwrightTest.command,
-    args: commonMcpServers.playwrightTest.args
+    args: commonMcpServers.playwrightTest.args,
+    env: { "PLAYWRIGHT_MCP_TOOL_PREFIX": vscodeToolPrefix }
   };
   await writeFile(mcpJsonPath, JSON.stringify(mcpJson, null, 2));
 }
@@ -237,7 +252,7 @@ async function initOpencodeRepo() {
     const prompt = [agent.instructions];
     prompt.push("");
     prompt.push(...agent.examples.map((example) => `<example>${example}</example>`));
-    await writeFile(`.opencode/prompts/${agent.header.name}.md`, prompt.join("\n"));
+    await writeFile(`.opencode/prompts/playwright-test-${agent.header.name}.md`, prompt.join("\n"));
   }
   await writeFile("opencode.json", saveAsOpencodeJson(agents));
 }

package/lib/agents/generator.md

@@ -1,5 +1,5 @@
 ---
-name: playwright-test-generator
+name: generator
 description: Use this agent when you need to create automated browser tests using Playwright
 model: sonnet
 color: blue
@@ -104,9 +104,9 @@ Your process is methodical and thorough:
   Context: User wants to test a login flow on their web application.
   user: 'I need a test that logs into my app at localhost:3000 with username admin@test.com and password 123456, then
   verifies the  dashboard page loads'
-  assistant: 'I'll use the playwright-test-generator agent to create and validate this login test for you'
+  assistant: 'I'll use the generator agent to create and validate this login test for you'
   <commentary>
-    The user needs a specific browser automation test created, which is exactly what the playwright-test-generator agent
+    The user needs a specific browser automation test created, which is exactly what the generator agent
     is designed for.
   </commentary>
 </example>
@@ -114,9 +114,9 @@ Your process is methodical and thorough:
   Context: User has built a new checkout flow and wants to ensure it works correctly.
   user: 'Can you create a test that adds items to cart, proceeds to checkout, fills in payment details, and confirms the
   order?'
-  assistant: 'I'll use the playwright-test-generator agent to build a comprehensive checkout flow test'
+  assistant: 'I'll use the generator agent to build a comprehensive checkout flow test'
   <commentary>
-    This is a complex user journey that needs to be automated and tested, perfect for the playwright-test-generator
+    This is a complex user journey that needs to be automated and tested, perfect for the generator
     agent.
   </commentary>
 </example>

package/lib/agents/healer.md

@@ -1,5 +1,5 @@
 ---
-name: playwright-test-healer
+name: healer
 description: Use this agent when you need to debug and fix failing Playwright tests
 color: red
 model: sonnet
@@ -58,17 +58,17 @@ Key principles:
 <example>
   Context: A developer has a failing Playwright test that needs to be debugged and fixed.
   user: 'The login test is failing, can you fix it?'
-  assistant: 'I'll use the playwright-test-healer agent to debug and fix the failing login test.'
+  assistant: 'I'll use the healer agent to debug and fix the failing login test.'
   <commentary>
     The user has identified a specific failing test that needs debugging and fixing, which is exactly what the
-    playwright-test-healer agent is designed for.
+    healer agent is designed for.
   </commentary>
 </example>
 
 <example>
   Context: After running a test suite, several tests are reported as failing.
   user: 'Test user-registration.spec.ts is broken after the recent changes'
-  assistant: 'Let me use the playwright-test-healer agent to investigate and fix the user-registration test.'
+  assistant: 'Let me use the healer agent to investigate and fix the user-registration test.'
   <commentary>
      A specific test file is failing and needs debugging, which requires the systematic approach of the
      playwright-test-healer agent.

package/lib/agents/planner.md

@@ -1,5 +1,5 @@
 ---
-name: playwright-test-planner
+name: planner
 description: Use this agent when you need to create comprehensive test plan for a web application or website
 model: sonnet
 color: green
@@ -117,19 +117,19 @@ professional formatting suitable for sharing with development and QA teams.
 <example>
   Context: User wants to test a new e-commerce checkout flow.
   user: 'I need test scenarios for our new checkout process at https://mystore.com/checkout'
-  assistant: 'I'll use the playwright-test-planner agent to navigate to your checkout page and create comprehensive test
+  assistant: 'I'll use the planner agent to navigate to your checkout page and create comprehensive test
   scenarios.'
   <commentary>
-    The user needs test planning for a specific web page, so use the playwright-test-planner agent to explore and create
+    The user needs test planning for a specific web page, so use the planner agent to explore and create
     test scenarios.
   </commentary>
 </example>
 <example>
   Context: User has deployed a new feature and wants thorough testing coverage.
   user: 'Can you help me test our new user dashboard at https://app.example.com/dashboard?'
-  assistant: 'I'll launch the playwright-test-planner agent to explore your dashboard and develop detailed test
+  assistant: 'I'll launch the planner agent to explore your dashboard and develop detailed test
   scenarios.'
   <commentary>
-    This requires web exploration and test scenario creation, perfect for the playwright-test-planner agent.
+    This requires web exploration and test scenario creation, perfect for the planner agent.
   </commentary>
 </example>

package/lib/index.js

@@ -43,8 +43,6 @@ var import_utils = require("playwright-core/lib/utils");
 var import_globals = require("./common/globals");
 var import_testType = require("./common/testType");
 var import_browserBackend = require("./mcp/test/browserBackend");
-var import_babelBundle = require("./transform/babelBundle");
-var import_util = require("./util");
 var import_expect = require("./matchers/expect");
 var import_configLoader = require("./common/configLoader");
 var import_testType2 = require("./common/testType");
@@ -262,22 +260,6 @@ const playwrightFixtures = {
         if (data.apiName === "tracing.group")
           tracingGroupSteps.push(step);
       },
-      onApiCallRecovery: (data, error, channelOwner, recoveryHandlers) => {
-        const testInfo2 = (0, import_globals.currentTestInfo)();
-        if (!testInfo2 || !testInfo2._pauseOnError())
-          return;
-        const step = data.userData;
-        if (!step)
-          return;
-        const page = channelToPage(channelOwner);
-        if (!page)
-          return;
-        recoveryHandlers.push(async () => {
-          await (0, import_browserBackend.runBrowserBackendOnError)(page, () => {
-            return (0, import_util.stripAnsiEscapes)(createErrorCodeframe(error.message, step.location));
-          });
-        });
-      },
       onApiCallEnd: (data) => {
         if (data.apiName === "tracing.group")
           return;
@@ -398,12 +380,13 @@ const playwrightFixtures = {
     attachConnectedHeaderIfNeeded(testInfo, browserImpl);
     if (!_reuseContext) {
       const { context: context2, close } = await _contextFactory();
+      testInfo._onDidFinishTestFunctions.unshift(() => (0, import_browserBackend.runBrowserBackendAtEnd)(context2, testInfo.errors[0]?.message));
       await use(context2);
-      await (0, import_browserBackend.runBrowserBackendAtEnd)(context2);
       await close();
       return;
     }
     const context = await browserImpl._wrapApiCall(() => browserImpl._newContextForReuse(), { internal: true });
+    testInfo._onDidFinishTestFunctions.unshift(() => (0, import_browserBackend.runBrowserBackendAtEnd)(context, testInfo.errors[0]?.message));
     await use(context);
     const closeReason = testInfo.status === "timedOut" ? "Test timeout of " + testInfo.timeout + "ms exceeded." : "Test ended.";
     await browserImpl._wrapApiCall(() => browserImpl._disconnectFromReusedContext(closeReason), { internal: true });
@@ -577,7 +560,7 @@ class ArtifactsRecorder {
   }
   async willStartTest(testInfo) {
     this._testInfo = testInfo;
-    testInfo._onDidFinishTestFunction = () => this.didFinishTestFunction();
+    testInfo._onDidFinishTestFunctions.push(() => this.didFinishTestFunction());
     this._screenshotRecorder.fixOrdinal();
     await Promise.all(this._playwright._allContexts().map((context) => this.didCreateBrowserContext(context)));
     const existingApiRequests = Array.from(this._playwright.request._contexts);
@@ -688,36 +671,6 @@ function tracing() {
   return test.info()._tracing;
 }
 const test = _baseTest.extend(playwrightFixtures);
-function channelToPage(channelOwner) {
-  if (channelOwner._type === "Page")
-    return channelOwner;
-  if (channelOwner._type === "Frame")
-    return channelOwner.page();
-  return void 0;
-}
-function createErrorCodeframe(message, location) {
-  let source;
-  try {
-    source = import_fs.default.readFileSync(location.file, "utf-8") + "\n//";
-  } catch (e) {
-    return "";
-  }
-  return (0, import_babelBundle.codeFrameColumns)(
-    source,
-    {
-      start: {
-        line: location.line,
-        column: location.column
-      }
-    },
-    {
-      highlightCode: true,
-      linesAbove: 5,
-      linesBelow: 5,
-      message: message.split("\n")[0] || void 0
-    }
-  );
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   _baseTest,

package/lib/matchers/toBeTruthy.js

@@ -23,7 +23,6 @@ __export(toBeTruthy_exports, {
 module.exports = __toCommonJS(toBeTruthy_exports);
 var import_util = require("../util");
 var import_matcherHint = require("./matcherHint");
-var import_browserBackend = require("../mcp/test/browserBackend");
 async function toBeTruthy(matcherName, locator, receiverType, expected, arg, query, options = {}) {
   (0, import_util.expectTypes)(locator, [receiverType], matcherName);
   const timeout = options.timeout ?? this.timeout;
@@ -58,7 +57,6 @@ async function toBeTruthy(matcherName, locator, receiverType, expected, arg, que
       log
     });
   };
-  await (0, import_browserBackend.runBrowserBackendOnError)(locator.page(), message);
   return {
     message,
     pass,

package/lib/matchers/toEqual.js

@@ -24,7 +24,6 @@ module.exports = __toCommonJS(toEqual_exports);
 var import_utils = require("playwright-core/lib/utils");
 var import_util = require("../util");
 var import_matcherHint = require("./matcherHint");
-var import_browserBackend = require("../mcp/test/browserBackend");
 const EXPECTED_LABEL = "Expected";
 const RECEIVED_LABEL = "Received";
 async function toEqual(matcherName, locator, receiverType, query, expected, options = {}) {
@@ -84,7 +83,6 @@ async function toEqual(matcherName, locator, receiverType, query, expected, opti
       log
     });
   };
-  await (0, import_browserBackend.runBrowserBackendOnError)(locator.page(), message);
   return {
     actual: received,
     expected,

package/lib/matchers/toMatchText.js

@@ -25,7 +25,6 @@ var import_util = require("../util");
 var import_expect = require("./expect");
 var import_matcherHint = require("./matcherHint");
 var import_expectBundle = require("../common/expectBundle");
-var import_browserBackend = require("../mcp/test/browserBackend");
 async function toMatchText(matcherName, receiver, receiverType, query, expected, options = {}) {
   (0, import_util.expectTypes)(receiver, [receiverType], matcherName);
   const locator = receiverType === "Locator" ? receiver : void 0;
@@ -84,8 +83,6 @@ ${this.utils.printWithType("Expected", expected, this.utils.printExpected)}`;
       errorMessage
     });
   };
-  if (locator)
-    await (0, import_browserBackend.runBrowserBackendOnError)(locator.page(), message);
   return {
     name: matcherName,
     expected,

package/lib/mcp/browser/browserContextFactory.js

@@ -80,16 +80,20 @@ class BaseContextFactory {
     const browser = await this._obtainBrowser(clientInfo);
     const browserContext = await this._doCreateContext(browser);
     await addInitScript(browserContext, this.config.browser.initScript);
-    return { browserContext, close: () => this._closeBrowserContext(browserContext, browser) };
+    return {
+      browserContext,
+      close: (afterClose) => this._closeBrowserContext(browserContext, browser, afterClose)
+    };
   }
   async _doCreateContext(browser) {
     throw new Error("Not implemented");
   }
-  async _closeBrowserContext(browserContext, browser) {
+  async _closeBrowserContext(browserContext, browser, afterClose) {
     (0, import_log.testDebug)(`close browser context (${this._logName})`);
     if (browser.contexts().length === 1)
       this._browserPromise = void 0;
     await browserContext.close().catch(import_log.logUnhandledError);
+    await afterClose();
     if (browser.contexts().length === 0) {
       (0, import_log.testDebug)(`close browser (${this._logName})`);
       await browser.close().catch(import_log.logUnhandledError);
@@ -103,8 +107,8 @@ class IsolatedContextFactory extends BaseContextFactory {
   async _doObtainBrowser(clientInfo) {
     await injectCdpPort(this.config.browser);
     const browserType = playwright[this.config.browser.browserName];
-    const tracesDir = await (0, import_config.outputFile)(this.config, clientInfo, `traces`, { origin: "code" });
-    if (this.config.saveTrace)
+    const tracesDir = await computeTracesDir(this.config, clientInfo);
+    if (tracesDir && this.config.saveTrace)
       await startTraceServer(this.config, tracesDir);
     return browserType.launch({
       tracesDir,
@@ -158,8 +162,8 @@ class PersistentContextFactory {
     await injectCdpPort(this.config.browser);
     (0, import_log.testDebug)("create browser context (persistent)");
     const userDataDir = this.config.browser.userDataDir ?? await this._createUserDataDir(clientInfo);
-    const tracesDir = await (0, import_config.outputFile)(this.config, clientInfo, `traces`, { origin: "code" });
-    if (this.config.saveTrace)
+    const tracesDir = await computeTracesDir(this.config, clientInfo);
+    if (tracesDir && this.config.saveTrace)
       await startTraceServer(this.config, tracesDir);
     this._userDataDirs.add(userDataDir);
     (0, import_log.testDebug)("lock user data dir", userDataDir);
@@ -179,7 +183,7 @@ class PersistentContextFactory {
       try {
         const browserContext = await browserType.launchPersistentContext(userDataDir, launchOptions);
         await addInitScript(browserContext, this.config.browser.initScript);
-        const close = () => this._closeBrowserContext(browserContext, userDataDir);
+        const close = (afterClose) => this._closeBrowserContext(browserContext, userDataDir, afterClose);
         return { browserContext, close };
       } catch (error) {
         if (error.message.includes("Executable doesn't exist"))
@@ -193,11 +197,12 @@ class PersistentContextFactory {
     }
     throw new Error(`Browser is already in use for ${userDataDir}, use --isolated to run multiple instances of the same browser`);
   }
-  async _closeBrowserContext(browserContext, userDataDir) {
+  async _closeBrowserContext(browserContext, userDataDir, afterClose) {
     (0, import_log.testDebug)("close browser context (persistent)");
     (0, import_log.testDebug)("release user data dir", userDataDir);
     await browserContext.close().catch(() => {
     });
+    await afterClose();
     this._userDataDirs.delete(userDataDir);
     (0, import_log.testDebug)("close browser context complete (persistent)");
   }
@@ -275,9 +280,15 @@ class SharedContextFactory {
     if (!contextPromise)
       return;
     const { close } = await contextPromise;
-    await close();
+    await close(async () => {
+    });
   }
 }
+async function computeTracesDir(config, clientInfo) {
+  if (!config.saveTrace && !config.capabilities?.includes("tracing"))
+    return;
+  return await (0, import_config.outputFile)(config, clientInfo, `traces`, { origin: "code", reason: "Collecting trace" });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SharedContextFactory,

package/lib/mcp/browser/browserServerBackend.js

@@ -52,6 +52,7 @@ class BrowserServerBackend {
     const parsedArguments = tool.schema.inputSchema.parse(rawArguments || {});
     const context = this._context;
     const response = new import_response.Response(context, name, parsedArguments);
+    response.logBegin();
     context.setRunningTool(name);
     try {
       await tool.handle(context, parsedArguments, response);
@@ -62,6 +63,7 @@ class BrowserServerBackend {
     } finally {
       context.setRunningTool(void 0);
     }
+    response.logEnd();
     return response.serialize();
   }
   serverClosed() {

package/lib/mcp/browser/config.js

@@ -34,7 +34,9 @@ __export(config_exports, {
   dotenvFileLoader: () => dotenvFileLoader,
   headerParser: () => headerParser,
   numberParser: () => numberParser,
+  outputDir: () => outputDir,
   outputFile: () => outputFile,
+  resolutionParser: () => resolutionParser,
   resolveCLIConfig: () => resolveCLIConfig,
   resolveConfig: () => resolveConfig,
   semicolonSeparatedList: () => semicolonSeparatedList
@@ -91,6 +93,8 @@ async function validateConfig(config) {
         throw new Error(`Init script file does not exist: ${script}`);
     }
   }
+  if (config.sharedBrowserContext && config.saveVideo)
+    throw new Error("saveVideo is not supported when sharedBrowserContext is true");
 }
 function configFromCLIOptions(cliOptions) {
   let browserName;
@@ -136,22 +140,21 @@ function configFromCLIOptions(cliOptions) {
     contextOptions.storageState = cliOptions.storageState;
   if (cliOptions.userAgent)
     contextOptions.userAgent = cliOptions.userAgent;
-  if (cliOptions.viewportSize) {
-    try {
-      const [width, height] = cliOptions.viewportSize.split(",").map((n) => +n);
-      if (isNaN(width) || isNaN(height))
-        throw new Error("bad values");
-      contextOptions.viewport = { width, height };
-    } catch (e) {
-      throw new Error('Invalid viewport size format: use "width,height", for example --viewport-size="800,600"');
-    }
-  }
+  if (cliOptions.viewportSize)
+    contextOptions.viewport = cliOptions.viewportSize;
   if (cliOptions.ignoreHttpsErrors)
     contextOptions.ignoreHTTPSErrors = true;
   if (cliOptions.blockServiceWorkers)
     contextOptions.serviceWorkers = "block";
   if (cliOptions.grantPermissions)
     contextOptions.permissions = cliOptions.grantPermissions;
+  if (cliOptions.saveVideo) {
+    contextOptions.recordVideo = {
+      // Videos are moved to output directory on saveAs.
+      dir: tmpDir(),
+      size: cliOptions.saveVideo
+    };
+  }
   const result = {
     browser: {
       browserName,
@@ -165,7 +168,8 @@ function configFromCLIOptions(cliOptions) {
     },
     server: {
       port: cliOptions.port,
-      host: cliOptions.host
+      host: cliOptions.host,
+      allowedHosts: cliOptions.allowedHosts
     },
     capabilities: cliOptions.caps,
     network: {
@@ -174,6 +178,7 @@ function configFromCLIOptions(cliOptions) {
     },
     saveSession: cliOptions.saveSession,
     saveTrace: cliOptions.saveTrace,
+    saveVideo: cliOptions.saveVideo,
     secrets: cliOptions.secrets,
     sharedBrowserContext: cliOptions.sharedBrowserContext,
     outputDir: cliOptions.outputDir,
@@ -187,6 +192,7 @@ function configFromCLIOptions(cliOptions) {
 }
 function configFromEnv() {
   const options = {};
+  options.allowedHosts = commaSeparatedList(process.env.PLAYWRIGHT_MCP_ALLOWED_HOSTNAMES);
   options.allowedOrigins = semicolonSeparatedList(process.env.PLAYWRIGHT_MCP_ALLOWED_ORIGINS);
   options.blockedOrigins = semicolonSeparatedList(process.env.PLAYWRIGHT_MCP_BLOCKED_ORIGINS);
   options.blockServiceWorkers = envToBoolean(process.env.PLAYWRIGHT_MCP_BLOCK_SERVICE_WORKERS);
@@ -213,13 +219,14 @@ function configFromEnv() {
   options.proxyBypass = envToString(process.env.PLAYWRIGHT_MCP_PROXY_BYPASS);
   options.proxyServer = envToString(process.env.PLAYWRIGHT_MCP_PROXY_SERVER);
   options.saveTrace = envToBoolean(process.env.PLAYWRIGHT_MCP_SAVE_TRACE);
+  options.saveVideo = resolutionParser("--save-video", process.env.PLAYWRIGHT_MCP_SAVE_VIDEO);
   options.secrets = dotenvFileLoader(process.env.PLAYWRIGHT_MCP_SECRETS_FILE);
   options.storageState = envToString(process.env.PLAYWRIGHT_MCP_STORAGE_STATE);
   options.timeoutAction = numberParser(process.env.PLAYWRIGHT_MCP_TIMEOUT_ACTION);
   options.timeoutNavigation = numberParser(process.env.PLAYWRIGHT_MCP_TIMEOUT_NAVIGATION);
   options.userAgent = envToString(process.env.PLAYWRIGHT_MCP_USER_AGENT);
   options.userDataDir = envToString(process.env.PLAYWRIGHT_MCP_USER_DATA_DIR);
-  options.viewportSize = envToString(process.env.PLAYWRIGHT_MCP_VIEWPORT_SIZE);
+  options.viewportSize = resolutionParser("--viewport-size", process.env.PLAYWRIGHT_MCP_VIEWPORT_SIZE);
   return configFromCLIOptions(options);
 }
 async function loadConfig(configFile) {
@@ -231,19 +238,30 @@ async function loadConfig(configFile) {
     throw new Error(`Failed to load config file: ${configFile}, ${error}`);
   }
 }
-async function outputFile(config, clientInfo, fileName, options) {
+function tmpDir() {
+  return import_path.default.join(process.env.PW_TMPDIR_FOR_TEST ?? import_os.default.tmpdir(), "playwright-mcp-output");
+}
+function outputDir(config, clientInfo) {
   const rootPath = (0, import_server.firstRootPath)(clientInfo);
-  const outputDir = config.outputDir ?? (rootPath ? import_path.default.join(rootPath, ".playwright-mcp") : void 0) ?? import_path.default.join(process.env.PW_TMPDIR_FOR_TEST ?? import_os.default.tmpdir(), "playwright-mcp-output", String(clientInfo.timestamp));
+  return config.outputDir ?? (rootPath ? import_path.default.join(rootPath, ".playwright-mcp") : void 0) ?? import_path.default.join(tmpDir(), String(clientInfo.timestamp));
+}
+async function outputFile(config, clientInfo, fileName, options) {
+  const file = await resolveFile(config, clientInfo, fileName, options);
+  (0, import_utilsBundle.debug)("pw:mcp:file")(options.reason, file);
+  return file;
+}
+async function resolveFile(config, clientInfo, fileName, options) {
+  const dir = outputDir(config, clientInfo);
   if (options.origin === "code")
-    return import_path.default.resolve(outputDir, fileName);
+    return import_path.default.resolve(dir, fileName);
   if (options.origin === "llm") {
     fileName = fileName.split("\\").join("/");
-    const resolvedFile = import_path.default.resolve(outputDir, fileName);
-    if (!resolvedFile.startsWith(import_path.default.resolve(outputDir) + import_path.default.sep))
+    const resolvedFile = import_path.default.resolve(dir, fileName);
+    if (!resolvedFile.startsWith(import_path.default.resolve(dir) + import_path.default.sep))
       throw new Error(`Resolved file path for ${fileName} is outside of the output directory`);
     return resolvedFile;
   }
-  return import_path.default.join(outputDir, sanitizeForFilePath(fileName));
+  return import_path.default.join(dir, sanitizeForFilePath(fileName));
 }
 function pickDefined(obj) {
   return Object.fromEntries(
@@ -306,6 +324,23 @@ function numberParser(value) {
     return void 0;
   return +value;
 }
+function resolutionParser(name, value) {
+  if (!value)
+    return void 0;
+  if (value.includes("x")) {
+    const [width, height] = value.split("x").map((v) => +v);
+    if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0)
+      throw new Error(`Invalid resolution format: use ${name}="800x600"`);
+    return { width, height };
+  }
+  if (value.includes(",")) {
+    const [width, height] = value.split(",").map((v) => +v);
+    if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0)
+      throw new Error(`Invalid resolution format: use ${name}="800x600"`);
+    return { width, height };
+  }
+  throw new Error(`Invalid resolution format: use ${name}="800x600"`);
+}
 function headerParser(arg, previous) {
   if (!arg)
     return previous || {};
@@ -339,7 +374,9 @@ function sanitizeForFilePath(s) {
   dotenvFileLoader,
   headerParser,
   numberParser,
+  outputDir,
   outputFile,
+  resolutionParser,
   resolveCLIConfig,
   resolveConfig,
   semicolonSeparatedList

package/lib/mcp/browser/context.js

@@ -32,11 +32,14 @@ __export(context_exports, {
   InputRecorder: () => InputRecorder
 });
 module.exports = __toCommonJS(context_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
 var import_utilsBundle = require("playwright-core/lib/utilsBundle");
 var import_log = require("../log");
 var import_tab = require("./tab");
 var import_config = require("./config");
 var codegen = __toESM(require("./codegen"));
+var import_utils = require("./tools/utils");
 const testDebug = (0, import_utilsBundle.debug)("pw:mcp:test");
 class Context {
   constructor(options) {
@@ -135,7 +138,20 @@ class Context {
     await promise.then(async ({ browserContext, close }) => {
       if (this.config.saveTrace)
         await browserContext.tracing.stop();
-      await close();
+      const videos = browserContext.pages().map((page) => page.video()).filter((video) => !!video);
+      await close(async () => {
+        for (const video of videos) {
+          const name = await this.outputFile((0, import_utils.dateAsFileName)("webm"), { origin: "code", reason: "Saving video" });
+          await import_fs.default.promises.mkdir(import_path.default.dirname(name), { recursive: true });
+          const p = await video.path();
+          try {
+            if (import_fs.default.existsSync(p))
+              await import_fs.default.promises.rename(p, name);
+          } catch (e) {
+            (0, import_log.logUnhandledError)(e);
+          }
+        }
+      });
     });
   }
   async dispose() {