From f4cbaa6a68ea769b64a302d93a875d5fa39bc972 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Fri, 13 Feb 2026 16:15:05 -0800
Subject: [PATCH 1/5] chore: use published extension id (#39265)

---
 packages/playwright/src/mcp/extension/cdpRelay.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playwright/src/mcp/extension/cdpRelay.ts b/packages/playwright/src/mcp/extension/cdpRelay.ts
index 4b489bf890373..0041965f4a87e 100644
--- a/packages/playwright/src/mcp/extension/cdpRelay.ts
+++ b/packages/playwright/src/mcp/extension/cdpRelay.ts
@@ -118,7 +118,7 @@ export class CDPRelayServer {
   private _connectBrowser(clientInfo: ClientInfo, forceNewTab: boolean) {
     const mcpRelayEndpoint = `${this._wsHost}${this._extensionPath}`;
     // Need to specify "key" in the manifest.json to make the id stable when loading from file.
-    const url = new URL('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
+    const url = new URL('chrome-extension://mmlmfjhmonkocbjadbfplnigmagldckm/connect.html');
     url.searchParams.set('mcpRelayUrl', mcpRelayEndpoint);
     const client = {
       name: clientInfo.name,

From c69930103a7d1013ad92aa19b929e9cf0fef2265 Mon Sep 17 00:00:00 2001
From: Victor Lin <125177+yepitschunked@users.noreply.github.com>
Date: Fri, 13 Feb 2026 16:25:51 -0800
Subject: [PATCH 2/5] fix(routeFromHAR, take 2): hack harRouter to merge
 set-cookie headers (#38487)

---
 .../playwright-core/src/client/harRouter.ts   | 21 +++++++-
 tests/library/browsercontext-har.spec.ts      | 53 +++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/client/harRouter.ts b/packages/playwright-core/src/client/harRouter.ts
index a9ab966b2a574..f3f11f852e37a 100644
--- a/packages/playwright-core/src/client/harRouter.ts
+++ b/packages/playwright-core/src/client/harRouter.ts
@@ -68,9 +68,28 @@ export class HarRouter {
       // test when HAR was recorded but we'd abort it immediately.
       if (response.status === -1)
         return;
+
+
+      // route.fulfill does not support multiple set-cookie headers. We need to merge them into one.
+      const transformedHeaders = response.headers!.reduce((headersMap, { name, value }) => {
+        if (name.toLowerCase() !== 'set-cookie') {
+          // non-set-cookie header gets set as-is
+          headersMap[name] = value;
+        } else {
+          // first set-cookie header gets included as-is
+          if (!headersMap['set-cookie'])
+            headersMap['set-cookie'] = value;
+          else
+            // subsequent set-cookie headers get appended to existing header
+            headersMap['set-cookie'] += `\n${value}`;
+
+        }
+        return headersMap;
+      }, {} as Record<string, string>);
+
       await route.fulfill({
         status: response.status,
-        headers: Object.fromEntries(response.headers!.map(h => [h.name, h.value])),
+        headers: transformedHeaders,
         body: response.body!
       });
       return;
diff --git a/tests/library/browsercontext-har.spec.ts b/tests/library/browsercontext-har.spec.ts
index 6e64045902508..f82bd30e87e43 100644
--- a/tests/library/browsercontext-har.spec.ts
+++ b/tests/library/browsercontext-har.spec.ts
@@ -452,6 +452,59 @@ it('should ignore boundary when matching multipart/form-data body', {
   await expect(page2.locator('div')).toHaveText('done');
 });
 
+it('should record single set-cookie headers', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31495' }
+}, async ({ contextFactory, server }, testInfo) => {
+  server.setRoute('/empty.html', (req, res) => {
+    res.setHeader('Content-Type', 'text/html');
+    res.setHeader('set-cookie', ['first=foo']);
+    res.end();
+  });
+
+  const harPath = testInfo.outputPath('har.zip');
+  const context1 = await contextFactory();
+  await context1.routeFromHAR(harPath, { update: true });
+  const page1 = await context1.newPage();
+  await page1.goto(server.EMPTY_PAGE);
+  const cookie1 = await page1.evaluate(() => document.cookie);
+  expect(cookie1).toBe('first=foo');
+  await context1.close();
+
+  const context2 = await contextFactory();
+  await context2.routeFromHAR(harPath, { notFound: 'abort' });
+  const page2 = await context2.newPage();
+  await page2.goto(server.EMPTY_PAGE);
+  const cookie2 = await page2.evaluate(() => document.cookie);
+  expect(cookie2).toBe('first=foo');
+});
+
+it('should record multiple set-cookie headers', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31495' }
+}, async ({ contextFactory, server }, testInfo) => {
+  server.setRoute('/empty.html', (req, res) => {
+    res.setHeader('Content-Type', 'text/html');
+    res.setHeader('set-cookie', ['first=foo', 'second=bar']);
+    res.end();
+  });
+
+  const harPath = testInfo.outputPath('har.zip');
+  const context1 = await contextFactory();
+  await context1.routeFromHAR(harPath, { update: true });
+  const page1 = await context1.newPage();
+  await page1.goto(server.EMPTY_PAGE);
+  const cookie1 = await page1.evaluate(() => document.cookie);
+  expect(cookie1.split('; ').sort().join('; ')).toBe('first=foo; second=bar');
+  await context1.close();
+
+  const context2 = await contextFactory();
+  await context2.routeFromHAR(harPath, { notFound: 'abort' });
+  const page2 = await context2.newPage();
+  await page2.goto(server.EMPTY_PAGE);
+  const cookie2 = await page2.evaluate(() => document.cookie);
+  expect(cookie2.split('; ').sort().join('; ')).toBe('first=foo; second=bar');
+});
+
+
 it('should update har.zip for page', async ({ contextFactory, server }, testInfo) => {
   const harPath = testInfo.outputPath('har.zip');
   const context1 = await contextFactory();

From 0ffb1d066349f6a6ff90cefac80acfd39eaab74c Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 13 Feb 2026 17:10:47 -0800
Subject: [PATCH 3/5] chore: minor grid versioning fixes (#39266)

---
 packages/devtools/src/devtools.tsx            |  5 ++--
 packages/devtools/src/devtoolsChannel.ts      |  1 +
 packages/devtools/src/grid.css                |  3 +-
 packages/devtools/src/grid.tsx                | 21 ++++++++------
 packages/devtools/src/index.tsx               |  7 +++--
 packages/devtools/src/sessionModel.ts         |  6 ++--
 packages/devtools/src/transport.ts            |  5 ++++
 .../src/server/devtoolsController.ts          | 29 +++++--------------
 .../playwright/src/cli/client/devtoolsApp.ts  |  2 --
 packages/playwright/src/cli/client/program.ts |  4 +++
 10 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index 5d886e16f3f05..520f7577dba7f 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -351,7 +351,7 @@ export const DevTools: React.FC<{ wsUrl?: string }> = ({ wsUrl }) => {
         onKeyDown={onOmniboxKeyDown}
         onFocus={e => e.target.select()}
       />
-      <button
+      {false && <button
         className={'nav-btn' + (picking ? ' active-toggle' : '')}
         title={picking ? 'Cancel pick locator' : 'Pick locator'}
         onClick={() => {
@@ -368,7 +368,8 @@ export const DevTools: React.FC<{ wsUrl?: string }> = ({ wsUrl }) => {
           <path d='M18 42h-7.5c-3 0-4.5-1.5-4.5-4.5v-27C6 7.5 7.5 6 10.5 6h27C42 6 42 10.404 42 10.5V18h-3V9H9v30h9v3Zm27-15-9 6 9 9-3 3-9-9-6 9-6-24 24 6Z'/>
         </svg>
       </button>
-      {selectedTab?.inspectorUrl && (
+      }
+      {false && selectedTab?.inspectorUrl && (
         <button
           className={'nav-btn' + (showInspector ? ' active-toggle' : '')}
           title={showInspector ? 'Hide Chrome DevTools' : 'Show Chrome DevTools'}
diff --git a/packages/devtools/src/devtoolsChannel.ts b/packages/devtools/src/devtoolsChannel.ts
index b2b59156e5de7..2ee00d36658e0 100644
--- a/packages/devtools/src/devtoolsChannel.ts
+++ b/packages/devtools/src/devtoolsChannel.ts
@@ -23,6 +23,7 @@ export type DevToolsChannelEvents = {
 };
 
 export interface DevToolsChannel {
+  version: 1;
   tabs(): Promise<{ tabs: Tab[] }>;
   selectTab(params: { pageId: string }): Promise<void>;
   closeTab(params: { pageId: string }): Promise<void>;
diff --git a/packages/devtools/src/grid.css b/packages/devtools/src/grid.css
index e07eba0fadd36..2f330dfad8a22 100644
--- a/packages/devtools/src/grid.css
+++ b/packages/devtools/src/grid.css
@@ -144,7 +144,8 @@
   color: var(--fg-muted);
 }
 
-.session-chip.disconnected {
+.session-chip.disconnected,
+.session-chip.not-supported {
   opacity: 0.6;
   cursor: default;
 }
diff --git a/packages/devtools/src/grid.tsx b/packages/devtools/src/grid.tsx
index 0850da858438d..42640a3ba36e5 100644
--- a/packages/devtools/src/grid.tsx
+++ b/packages/devtools/src/grid.tsx
@@ -43,7 +43,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
   const workspaceGroups = React.useMemo(() => {
     const groups = new Map<string, SessionStatus[]>();
     for (const session of sessions) {
-      const key = session.config.workspaceDir || 'Unknown';
+      const key = session.config.workspaceDir || 'Global';
       let list = groups.get(key);
       if (!list) {
         list = [];
@@ -67,16 +67,16 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
     {!model.loading && !model.error && sessions.length === 0 && <div className='grid-empty'>No sessions found.</div>}
 
     <div className='workspace-list'>
-      {workspaceGroups.map(([workspace, entries]) => {
-        const isCurrent = workspace === clientInfo?.workspaceDir;
-        const isExpanded = isCurrent || expandedWorkspaces.has(workspace);
+      {workspaceGroups.map(([workspace, entries], index) => {
+        const isFirst = index === 0;
+        const isExpanded = isFirst || expandedWorkspaces.has(workspace);
         return (
           <div key={workspace} className='workspace-group'>
             <div
-              className={'workspace-header' + (isCurrent ? '' : ' collapsible')}
-              onClick={isCurrent ? undefined : () => toggleWorkspace(workspace)}
+              className={'workspace-header' + (isFirst ? '' : ' collapsible')}
+              onClick={isFirst ? undefined : () => toggleWorkspace(workspace)}
             >
-              {!isCurrent && (
+              {!isFirst && (
                 <svg className={'workspace-chevron' + (isExpanded ? ' expanded' : '')} viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'>
                   <polyline points='9 18 15 12 9 6'/>
                 </svg>
@@ -123,11 +123,12 @@ const SessionChip: React.FC<{ config: SessionConfig; canConnect: boolean; visibl
   }, [channel]);
 
   const chipTitle = selectedTab ? `[${config.name}] ${selectedTab.url} \u2014 ${selectedTab.title}` : config.name;
+  const clickable = canConnect && wsUrl !== null;
 
   return (
-    <a className={'session-chip' + (canConnect ? '' : ' disconnected')} href={canConnect ? href : undefined} title={chipTitle} onClick={e => {
+    <a className={'session-chip' + (canConnect ? '' : ' disconnected') + (wsUrl === null ? ' not-supported' : '')} href={clickable ? href : undefined} title={chipTitle} onClick={e => {
       e.preventDefault();
-      if (canConnect)
+      if (clickable)
         navigate(href);
     }}>
       <div className='session-chip-header'>
@@ -172,6 +173,8 @@ const SessionChip: React.FC<{ config: SessionConfig; canConnect: boolean; visibl
       <div className='screencast-container'>
         {channel && <Screencast channel={channel} />}
         {!canConnect && <div className='screencast-placeholder'>Session closed</div>}
+        {canConnect && !channel && wsUrl === null && <div className='screencast-placeholder'>Not supported &mdash; v{config.version}</div>}
+        {canConnect && !channel && wsUrl === undefined && <div className='screencast-placeholder'>Connecting</div>}
       </div>
     </a>
   );
diff --git a/packages/devtools/src/index.tsx b/packages/devtools/src/index.tsx
index 3c10d96c8ca26..e4ca64df8afd1 100644
--- a/packages/devtools/src/index.tsx
+++ b/packages/devtools/src/index.tsx
@@ -55,8 +55,11 @@ const App: React.FC = () => {
     return () => window.removeEventListener('popstate', onPopState);
   }, []);
 
-  if (socketPath)
-    return <DevTools wsUrl={model.wsUrls.get(socketPath)} />;
+  if (socketPath) {
+    const wsUrl = model.wsUrls.get(socketPath);
+    if (wsUrl)
+      return <DevTools wsUrl={wsUrl} />;
+  }
   return <Grid model={model} />;
 };
 
diff --git a/packages/devtools/src/sessionModel.ts b/packages/devtools/src/sessionModel.ts
index 15b132d25503c..e0512cbd376cb 100644
--- a/packages/devtools/src/sessionModel.ts
+++ b/packages/devtools/src/sessionModel.ts
@@ -25,7 +25,7 @@ type Listener = () => void;
 
 export class SessionModel {
   sessions: SessionStatus[] = [];
-  readonly wsUrls: Map<string, string> = new Map();
+  readonly wsUrls: Map<string, string | null> = new Map();
   clientInfo: ClientInfo | undefined;
   error: string | undefined;
   loading = true;
@@ -132,8 +132,10 @@ export class SessionModel {
       if (resp.ok) {
         const { url } = await resp.json();
         this.wsUrls.set(config.socketPath, url);
-        this._notify();
+      } else {
+        this.wsUrls.set(config.socketPath, null);
       }
+      this._notify();
     }).catch(() => {
       this._knownTimestamps.delete(config.socketPath);
     });
diff --git a/packages/devtools/src/transport.ts b/packages/devtools/src/transport.ts
index 61399adc1783a..85471689b36c3 100644
--- a/packages/devtools/src/transport.ts
+++ b/packages/devtools/src/transport.ts
@@ -19,6 +19,7 @@ export class Transport {
   private _lastId = 0;
   private _pending = new Map<number, { resolve: (result: any) => void; reject: (error: Error) => void }>();
   private _sendQueue: string[] | undefined = [];
+  private _closed = false;
 
   onopen?: () => void;
   onevent?: (method: string, params: any) => void;
@@ -56,6 +57,8 @@ export class Transport {
       }
     };
     this._ws.onclose = (event: CloseEvent) => {
+      this._closed = true;
+      this._sendQueue = undefined;
       for (const { reject } of this._pending.values())
         reject(new Error('Connection closed'));
       this._pending.clear();
@@ -70,6 +73,8 @@ export class Transport {
   }
 
   send(method: string, params?: any): Promise<any> {
+    if (this._closed)
+      return Promise.reject(new Error('Connection closed'));
     const id = ++this._lastId;
     const message = JSON.stringify({ id, method, params });
     if (this._sendQueue)
diff --git a/packages/playwright-core/src/server/devtoolsController.ts b/packages/playwright-core/src/server/devtoolsController.ts
index f214fbf9cbeb9..499bdac4231e2 100644
--- a/packages/playwright-core/src/server/devtoolsController.ts
+++ b/packages/playwright-core/src/server/devtoolsController.ts
@@ -60,6 +60,8 @@ export class DevToolsController {
 }
 
 class DevToolsConnection implements Transport, DevToolsChannel {
+  readonly version = 1;
+
   sendEvent?: (method: string, params: any) => void;
   close?: () => void;
 
@@ -79,8 +81,6 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     this._controllerUrl = controllerUrl;
   }
 
-  // -- IDevToolsConnection: event subscription --
-
   on<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
     let set = this._eventListeners.get(event);
     if (!set) {
@@ -94,7 +94,6 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     this._eventListeners.get(event)?.delete(listener);
   }
 
-  /** Sends an event to the remote client and notifies local listeners. */
   private _emit<K extends keyof DevToolsChannelEvents>(event: K, params: DevToolsChannelEvents[K]): void {
     this.sendEvent?.(event, params);
     const set = this._eventListeners.get(event);
@@ -104,8 +103,6 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     }
   }
 
-  // -- Transport: lifecycle --
-
   onconnect() {
     const context = this._context;
 
@@ -145,14 +142,10 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     this._contextListeners = [];
   }
 
-  // -- Transport: dispatch (skeleton) --
-
   async dispatch(method: string, params: any): Promise<any> {
     return (this as any)[method]?.(params);
   }
 
-  // -- IDevToolsConnection: RPC method implementations --
-
   async selectTab(params: { pageId: string }) {
     const page = this._context.pages().find(p => p.guid === params.pageId);
     if (page)
@@ -242,21 +235,10 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     await ProgressController.runInternalTask(async progress => { await page.keyboard.up(progress, params.key); });
   }
 
-  async pickLocator() {
-    await this._startPicking();
-  }
-
-  async cancelPickLocator() {
-    this._cancelPicking();
-  }
-
-  // -- Internal helpers --
-
   private async _selectPage(page: Page) {
     if (this.selectedPage === page)
       return;
 
-    // Stop screencast on old page.
     if (this.selectedPage) {
       eventsHelper.removeEventListeners(this._pageListeners);
       this._pageListeners = [];
@@ -268,7 +250,6 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     this._lastViewportSize = null;
     this._sendTabList();
 
-    // Start screencast on new page.
     this._pageListeners.push(
         eventsHelper.addEventListener(page, Page.Events.ScreencastFrame, frame => this._writeFrame(frame.buffer, frame.width, frame.height))
     );
@@ -288,7 +269,7 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     this._lastViewportSize = null;
   }
 
-  private async _startPicking() {
+  async pickLocator() {
     this._cancelPicking();
     const recorder = await Recorder.forContext(this._context, { omitCallTracking: true });
     this._recorder = recorder;
@@ -301,6 +282,10 @@ class DevToolsConnection implements Transport, DevToolsChannel {
     recorder.setMode('inspecting');
   }
 
+  async cancelPickLocator() {
+    this._cancelPicking();
+  }
+
   private _cancelPicking() {
     eventsHelper.removeEventListeners(this._recorderListeners);
     this._recorderListeners = [];
diff --git a/packages/playwright/src/cli/client/devtoolsApp.ts b/packages/playwright/src/cli/client/devtoolsApp.ts
index 60684a2f39eb6..e5056d2e5ba5a 100644
--- a/packages/playwright/src/cli/client/devtoolsApp.ts
+++ b/packages/playwright/src/cli/client/devtoolsApp.ts
@@ -65,8 +65,6 @@ async function handleApiRequest(clientInfo: ClientInfo, request: http.IncomingMe
         const canConnect = await session.canConnect();
         if (canConnect || entry.config.cli.persistent)
           sessions.push({ config: entry.config, canConnect });
-        else
-          await session.deleteSessionConfig();
       }
     }
     sendJSON(response, { sessions, clientInfo });
diff --git a/packages/playwright/src/cli/client/program.ts b/packages/playwright/src/cli/client/program.ts
index 0478304641295..1db729dc538db 100644
--- a/packages/playwright/src/cli/client/program.ts
+++ b/packages/playwright/src/cli/client/program.ts
@@ -157,6 +157,10 @@ async function program() {
       if (entry)
         await new Session(clientInfo, entry.config).stop(true);
       const session = new Session(clientInfo, sessionConfigFromArgs(clientInfo, sessionName, args));
+      // Stale session.
+      if (await session.canConnect())
+        await session.stop(true);
+
       for (const globalOption of globalOptions)
         delete args[globalOption];
       const result = await session.run(args);

From 424f2e6946af880710f0826cd79e6a178cb363a9 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 13 Feb 2026 19:51:14 -0800
Subject: [PATCH 4/5] chore(mcp): support config.ini (#39267)

---
 .claude/skills/playwright-api/SKILL.md        |  27 -
 .claude/skills/playwright-dev/SKILL.md        |  19 +
 .claude/skills/playwright-dev/api.md          | 293 +++++++++++
 .claude/skills/playwright-dev/mcp-dev.md      | 498 ++++++++++++++++++
 .claude/skills/playwright-dev/vendor.md       | 190 +++++++
 .claude/skills/playwright-mcp-dev/SKILL.md    |  58 --
 .../playwright-core/ThirdPartyNotices.txt     |  23 +-
 .../bundles/utils/package-lock.json           |  18 +
 .../bundles/utils/package.json                |   2 +
 .../bundles/utils/src/utilsBundleImpl.ts      |   3 +
 packages/playwright-core/src/utilsBundle.ts   |   1 +
 packages/playwright/src/mcp/browser/config.ts |   8 +-
 .../playwright/src/mcp/browser/configIni.ts   | 189 +++++++
 tests/mcp/config.ini.spec.ts                  | 119 +++++
 tests/mcp/fixtures.ts                         |   7 +-
 15 files changed, 1365 insertions(+), 90 deletions(-)
 delete mode 100644 .claude/skills/playwright-api/SKILL.md
 create mode 100644 .claude/skills/playwright-dev/SKILL.md
 create mode 100644 .claude/skills/playwright-dev/api.md
 create mode 100644 .claude/skills/playwright-dev/mcp-dev.md
 create mode 100644 .claude/skills/playwright-dev/vendor.md
 delete mode 100644 .claude/skills/playwright-mcp-dev/SKILL.md
 create mode 100644 packages/playwright/src/mcp/browser/configIni.ts
 create mode 100644 tests/mcp/config.ini.spec.ts

diff --git a/.claude/skills/playwright-api/SKILL.md b/.claude/skills/playwright-api/SKILL.md
deleted file mode 100644
index b88f86e7c0401..0000000000000
--- a/.claude/skills/playwright-api/SKILL.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-name: playwright-api
-description: Explains how to add playwright API methods.
----
-
-# API
-
-## Adding and modifying APIs
-- Before performing the implementation, go over the steps to understand and plan the work ahead. It is important to follow the steps in order, as some of them are prerequisites for others.
-- Define (or update) API in `docs/api/class-xxx.md`. For the new methods, params and options use the version from package.json (without -next).
-- Watch will kick in and re-generate types for the API
-- Implement the new API in `packages/playwright/src/client/xxx.ts`
-- Define (or update) channel for the API in `packages/protocol/src/protocol.yml` as needed
-- Watch will kick in and re-generate types for protocol channels
-- Implement dispatcher handler in `packages/playwright/src/server/dispatchers/xxxDispatcher.ts` as needed
-- Handler should just route the call into the corresponding method in `packages/playwright-core/src/server/xxx.ts`
-- Place new tests in `tests/page/xxx.spec.ts` or create new test file if needed
-
-# Build
-- Assume watch is running and everything is up to date.
-
-# Test
-- If your tests are only using page, prefer to place them in `tests/page/xxx.spec.ts` and use page fixture. If you need to use browser context, place them in `tests/library/xxx.spec.ts`.
-- Run npm test as `npm run ctest <file>`
-
-# Lint
-- In the end lint via `npm run flint`.
diff --git a/.claude/skills/playwright-dev/SKILL.md b/.claude/skills/playwright-dev/SKILL.md
new file mode 100644
index 0000000000000..cd21e9dcf4519
--- /dev/null
+++ b/.claude/skills/playwright-dev/SKILL.md
@@ -0,0 +1,19 @@
+---
+name: playwright-dev
+description: Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.
+---
+
+# Playwright Development Guide
+
+## Table of Contents
+
+- [Adding and Modifying APIs](api.md) — define API docs, implement client/server, add tests
+- [MCP Tools and CLI Commands](mcp-dev.md) — add MCP tools, CLI commands, config options
+- [Vendoring Dependencies](vendor.md) — bundle third-party npm packages into playwright-core or playwright
+
+## Build
+- Assume watch is running and everything is up to date.
+- If not, run `npm run build`.
+
+## Lint
+- Run `npm run flint` to lint everything before commit.
diff --git a/.claude/skills/playwright-dev/api.md b/.claude/skills/playwright-dev/api.md
new file mode 100644
index 0000000000000..06431bbe61c62
--- /dev/null
+++ b/.claude/skills/playwright-dev/api.md
@@ -0,0 +1,293 @@
+# Adding and Modifying APIs
+
+- Before performing the implementation, go over the steps to understand and plan the work ahead. It is important to follow the steps in order, as some of them are prerequisites for others.
+
+## Step 1: Define API in Documentation
+
+Define (or update) API in `docs/src/api/class-xxx.md`. For the new methods, params and options use the version from package.json (without `-next`).
+
+### Documentation Format
+
+**Method definition:**
+```markdown
+## async method: Page.methodName
+* since: v1.XX
+- returns: <[null]|[Response]>
+
+Description of the method.
+
+### param: Page.methodName.paramName
+* since: v1.XX
+- `paramName` <[string]>
+
+Description of the parameter.
+
+### option: Page.methodName.optionName
+* since: v1.XX
+- `optionName` <[string]>
+
+Description of the option.
+```
+
+**Key syntax rules:**
+- `* since: v1.XX` — version from package.json (without -next)
+- `* langs: js, python` — language filter (optional)
+- `* langs: alias-java: navigate` — language-specific method name
+- `* deprecated: v1.XX` — deprecation marker
+- `<[TypeName]>` — type annotation: `<[string]>`, `<[int]>`, `<[float]>`, `<[boolean]>`
+- `<[null]|[Response]>` — union type
+- `<[Array]<[Locator]>>` — array type
+- `<[Object]>` with indented `- \`field\` <[type]>` — object type
+- `### param:` — required parameter
+- `### option:` — optional parameter
+- `= %%-placeholder-name-%%` — reuse shared param definition from `docs/src/api/params.md`
+
+**Property definition:**
+```markdown
+## property: Page.propName
+* since: v1.XX
+- type: <[string]>
+
+Description.
+```
+
+**Event definition:**
+```markdown
+## event: Page.eventName
+* since: v1.XX
+- argument: <[Dialog]>
+
+Description.
+```
+
+Watch will kick in and auto-generate:
+- `packages/playwright-core/types/types.d.ts` — public API types
+- `packages/playwright/types/test.d.ts` — test API types
+
+## Step 2: Implement Client API
+
+Implement the new API in `packages/playwright-core/src/client/xxx.ts`.
+
+### Client Implementation Pattern
+
+Client classes extend `ChannelOwner<XxxChannel>` and call through `this._channel`:
+
+```typescript
+// Direct channel call (most common)
+async methodName(param: string, options: channels.FrameMethodNameOptions = {}): Promise<void> {
+  await this._channel.methodName({ param, ...options, timeout: this._timeout(options) });
+}
+
+// Channel call with response wrapping
+async goto(url: string, options: channels.FrameGotoOptions = {}): Promise<network.Response | null> {
+  return network.Response.fromNullable(
+    (await this._channel.goto({ url, ...options, timeout: this._timeout(options) })).response
+  );
+}
+```
+
+**Key patterns:**
+- Parameters are assembled into a single object for the channel call
+- Timeout is processed through `this._timeout(options)` or `this._navigationTimeout(options)`
+- Return values from channel are unwrapped/converted: `Response.fromNullable()`, `ElementHandle.from()`, etc.
+- Locator methods delegate to Frame: `return await this._frame.click(this._selector, { strict: true, ...options })`
+- Page methods often delegate to `this._mainFrame`
+
+## Step 3: Define Protocol Channel
+
+Define (or update) channel for the API in `packages/protocol/src/protocol.yml` as needed.
+
+### Protocol YAML Format
+
+Methods are defined under `commands:` in the interface section:
+
+```yaml
+Page:
+  type: interface
+  extends: EventTarget
+
+  commands:
+    methodName:
+      title: Short description for tracing
+      parameters:
+        url: string                    # required string
+        timeout: float                 # required float
+        referer: string?               # optional string (? suffix)
+        waitUntil: LifecycleEvent?     # optional reference to another type
+        button:                        # optional enum
+          type: enum?
+          literals:
+          - left
+          - right
+          - middle
+        modifiers:                     # optional array of enums
+          type: array?
+          items:
+            type: enum
+            literals:
+            - Alt
+            - Control
+            - Meta
+            - Shift
+        position: Point?               # optional reference type
+        viewportSize:                  # required inline object
+          type: object
+          properties:
+            width: int
+            height: int
+      returns:
+        response: Response?            # optional return value
+      flags:
+        slowMo: true
+        snapshot: true
+        pausesBeforeAction: true
+```
+
+**Type primitives:** `string`, `int`, `float`, `boolean`, `binary`, `json`
+**Optional:** append `?` to any type: `string?`, `int?`, `object?`
+**Arrays:** `type: array` with `items:` (or `type: array?` for optional)
+**Enums:** `type: enum` with `literals:` list
+**References:** use type name directly: `Response`, `Frame`, `Point`
+**Flags:** `slowMo`, `snapshot`, `pausesBeforeAction`, `pausesBeforeInput`
+
+Watch will kick in and auto-generate:
+- `packages/protocol/src/channels.d.ts` — channel TypeScript interfaces
+- `packages/playwright-core/src/protocol/validator.ts` — runtime validators
+- `packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts` — method metadata
+
+## Step 4: Implement Dispatcher
+
+Implement dispatcher handler in `packages/playwright-core/src/server/dispatchers/xxxDispatcher.ts` as needed.
+
+### Dispatcher Pattern
+
+Dispatchers receive validated params and route to server objects:
+
+```typescript
+// Simple pass-through (most common)
+async methodName(params: channels.PageMethodNameParams, progress: Progress): Promise<void> {
+  await this._page.methodName(progress, params.value);
+}
+
+// With response wrapping
+async goto(params: channels.FrameGotoParams, progress: Progress): Promise<channels.FrameGotoResult> {
+  return { response: ResponseDispatcher.fromNullable(this._browserContextDispatcher,
+    await this._frame.goto(progress, params.url, params)) };
+}
+
+// With dispatcher extraction (when params contain dispatcher references)
+async expectScreenshot(params: channels.PageExpectScreenshotParams, progress: Progress): Promise<channels.PageExpectScreenshotResult> {
+  const mask = (params.mask || []).map(({ frame, selector }) => ({
+    frame: (frame as FrameDispatcher)._object,
+    selector,
+  }));
+  return await this._page.expectScreenshot(progress, { ...params, mask });
+}
+
+// With array result wrapping
+async querySelectorAll(params: channels.FrameQuerySelectorAllParams, progress: Progress): Promise<channels.FrameQuerySelectorAllResult> {
+  const elements = await progress.race(this._frame.querySelectorAll(params.selector));
+  return { elements: elements.map(e => ElementHandleDispatcher.from(this, e)) };
+}
+```
+
+**Key patterns:**
+- Method signature: `async method(params: channels.XxxMethodParams, progress: Progress): Promise<channels.XxxMethodResult>`
+- Extract params: `params.url`, `params.selector`, etc.
+- Convert dispatcher refs to server objects: `(params.frame as FrameDispatcher)._object`
+- Wrap server objects as dispatchers in results: `ResponseDispatcher.fromNullable()`, `ElementHandleDispatcher.from()`
+- All methods receive `Progress` for timeout/cancellation
+
+## Step 5: Implement Server Logic
+
+Handler should route the call into the corresponding method in `packages/playwright-core/src/server/xxx.ts`.
+
+Server methods implement the actual browser interaction:
+
+```typescript
+// In packages/playwright-core/src/server/frames.ts
+async goto(progress: Progress, url: string, options: types.GotoOptions = {}): Promise<network.Response | null> {
+  // ... validation, URL construction ...
+  // Delegates to browser-specific implementation:
+  const result = await this._page.delegate.navigateFrame(this, url, referer);
+  // ... wait for lifecycle events ...
+  return response;
+}
+```
+
+Browser-specific implementations live in:
+- `packages/playwright-core/src/server/chromium/crPage.ts` — Chromium (uses CDP: `this._client.send('Page.navigate', { ... })`)
+- `packages/playwright-core/src/server/firefox/ffPage.ts` — Firefox
+- `packages/playwright-core/src/server/webkit/wkPage.ts` — WebKit
+
+## Step 6: Write Tests
+
+### Test Location
+- Page-only tests: `tests/page/xxx.spec.ts` — use `page` fixture
+- Context tests: `tests/library/xxx.spec.ts` — use `context` fixture
+
+### Test Patterns
+
+**Page test:**
+```typescript
+import { test as it, expect } from './pageTest';
+
+it('should do something @smoke', async ({ page, server }) => {
+  await page.goto(server.EMPTY_PAGE);
+  // ... assertions ...
+  expect(page.url()).toBe(server.EMPTY_PAGE);
+});
+
+it('should handle options', async ({ page, server, browserName, isAndroid }) => {
+  it.skip(isAndroid, 'Not supported on Android');
+  it.info().annotations.push({ type: 'issue', description: 'https://github.com/user/repo/issues/123' });
+  // ...
+});
+```
+
+**Library/context test:**
+```typescript
+import { contextTest as it, expect } from '../config/browserTest';
+
+it('should work with context', async ({ context, server }) => {
+  const page = await context.newPage();
+  await page.goto(server.EMPTY_PAGE);
+  // ...
+});
+```
+
+### Available Fixtures
+- `page` — isolated page instance
+- `context` — browser context (library tests)
+- `server` — HTTP test server (`server.EMPTY_PAGE`, `server.PREFIX`, `server.CROSS_PROCESS_PREFIX`)
+- `httpsServer` — HTTPS test server
+- `asset(name)` — path to test asset file
+- `browserName` — `'chromium' | 'firefox' | 'webkit'`
+- `channel` — browser channel string
+- `isAndroid`, `isBidi`, `isElectron` — platform booleans
+- `isWindows`, `isMac`, `isLinux` — OS booleans
+- `mode` — test mode (`'default'`, `'service'`, etc.)
+
+### Running Tests
+```bash
+npm run ctest tests/page/xxx.spec.ts          # Chromium only
+npm run test tests/page/xxx.spec.ts           # All browsers
+npm run ctest -- --grep "should do something" # Filter by name
+```
+
+## Architecture Overview
+
+```
+docs/src/api/class-xxx.md          (API documentation — source of truth for public types)
+  → auto-generates → types.d.ts, test.d.ts
+
+packages/protocol/src/protocol.yml  (RPC protocol definition)
+  → auto-generates → channels.d.ts, validator.ts, protocolMetainfo.ts
+
+Client call chain:
+  user code → Page.method() → Frame.method() → this._channel.method(params)
+    → Proxy validates & sends → Connection.sendMessageToServer()
+    → [wire] →
+  DispatcherConnection.dispatch() → XxxDispatcher.method(params, progress)
+    → ServerObject.method(progress, ...) → BrowserDelegate (CDP/Firefox/WebKit)
+```
diff --git a/.claude/skills/playwright-dev/mcp-dev.md b/.claude/skills/playwright-dev/mcp-dev.md
new file mode 100644
index 0000000000000..e022738a5b376
--- /dev/null
+++ b/.claude/skills/playwright-dev/mcp-dev.md
@@ -0,0 +1,498 @@
+# MCP Tools and CLI Commands
+
+## Adding MCP Tools
+
+### Step 1: Create the Tool File
+
+Create `packages/playwright/src/mcp/browser/tools/<your-tool>.ts`.
+
+Import zod from the MCP bundle and use `defineTool` or `defineTabTool`:
+
+```typescript
+import { z } from 'playwright-core/lib/mcpBundle';
+import { defineTool, defineTabTool } from './tool';
+```
+
+**Choose `defineTabTool` vs `defineTool`:**
+- `defineTabTool` — most tools use this. Receives a `Tab` object, auto-handles modal state (dialogs/file choosers).
+- `defineTool` — receives the full `Context`. Use when you need `context.ensureBrowserContext()` without a specific tab, or need custom tab management.
+
+**Tool definition pattern:**
+
+```typescript
+const myTool = defineTabTool({
+  capability: 'core',  // ToolCapability — see step 2
+
+  // Optional: only available in skill mode (not exposed via MCP)
+  // skillOnly: true,
+
+  // Optional: this tool clears a modal state ('dialog' | 'fileChooser')
+  // clearsModalState: 'dialog',
+
+  schema: {
+    name: 'browser_my_tool',       // MCP tool name (browser_ prefix)
+    title: 'My Tool',              // Human-readable title
+    description: 'Does something', // Description shown to LLM
+    inputSchema: z.object({
+      ref: z.string().describe('Element reference from snapshot'),
+      value: z.string().optional().describe('Optional value'),
+    }),
+    type: 'action',  // 'input' | 'assertion' | 'action' | 'readOnly'
+  },
+
+  handle: async (tab, params, response) => {
+    // Implementation using tab.page (Playwright Page object)
+    await tab.page.click(`[ref="${params.ref}"]`);
+
+    // Add generated Playwright code
+    response.addCode(`await page.click('[ref="${params.ref}"]');`);
+
+    // Include page snapshot in response (for navigation/state changes)
+    response.setIncludeSnapshot();
+
+    // Or add text result
+    response.addTextResult('Done');
+  },
+});
+
+export default [myTool];
+```
+
+**Schema type values:**
+- `'action'` — state-changing operations (navigate, click, fill)
+- `'input'` — user input (typing, keyboard)
+- `'readOnly'` — queries that don't modify state (list cookies, get snapshot)
+- `'assertion'` — testing/verification tools
+
+**Response API:**
+- `response.addTextResult(text)` — add text to result section
+- `response.addError(error)` — add error message
+- `response.addCode(code)` — add generated Playwright code snippet
+- `response.setIncludeSnapshot()` — include ARIA snapshot in response
+- `response.setIncludeFullSnapshot(filename?)` — force full snapshot
+- `response.addResult(title, data, fileTemplate)` — add file result
+- `response.registerImageResult(data, 'png'|'jpeg')` — add image
+
+**Context tool example** (for browser-context-level operations):
+
+```typescript
+const myContextTool = defineTool({
+  capability: 'storage',
+  schema: { /* ... */ type: 'readOnly' },
+
+  handle: async (context, params, response) => {
+    const browserContext = await context.ensureBrowserContext();
+    const cookies = await browserContext.cookies();
+    response.addTextResult(cookies.map(c => `${c.name}=${c.value}`).join('\n'));
+  },
+});
+```
+
+### Step 2: Add ToolCapability (if needed)
+
+If your tool doesn't fit an existing capability, add a new one to `packages/playwright/src/mcp/config.d.ts`:
+
+```typescript
+export type ToolCapability =
+  'config' |
+  'core' |           // Always enabled
+  'core-navigation' | // Always enabled
+  'core-tabs' |      // Always enabled
+  'core-input' |     // Always enabled
+  'core-install' |   // Always enabled
+  'network' |
+  'pdf' |
+  'storage' |
+  'testing' |
+  'vision' |
+  'devtools';        // Add yours here
+```
+
+**Capability filtering rules:**
+- Tools with `core*` capabilities are always enabled
+- Other capabilities must be enabled via `--caps` or config `capabilities` array
+- `skillOnly: true` tools are only available in skill mode, never via MCP
+
+### Step 3: Register the Tool
+
+In `packages/playwright/src/mcp/browser/tools.ts`:
+
+```typescript
+import myTool from './tools/myTool';
+
+export const browserTools: Tool<any>[] = [
+  // ... existing tools ...
+  ...myTool,
+];
+```
+
+### Step 4: Write Tests
+
+Create `tests/mcp/<category>.spec.ts`. Use the fixtures from `./fixtures`:
+
+```typescript
+import { test, expect } from './fixtures';
+
+test('browser_my_tool', async ({ client, server }) => {
+  // Setup: navigate to a page first
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  // Call your tool
+  expect(await client.callTool({
+    name: 'browser_my_tool',
+    arguments: { ref: 'e1' },
+  })).toHaveResponse({
+    code: `await page.click('[ref="e1"]');`,
+    snapshot: expect.stringContaining('some content'),
+  });
+});
+
+test('browser_my_tool error case', async ({ client }) => {
+  expect(await client.callTool({
+    name: 'browser_my_tool',
+    arguments: { ref: 'invalid' },
+  })).toHaveResponse({
+    error: expect.stringContaining('Error:'),
+    isError: true,
+  });
+});
+```
+
+**Test fixtures:**
+- `client` — MCP client, call tools via `client.callTool({ name, arguments })`
+- `startClient(options?)` — client factory, for custom config/args/roots
+- `server` — HTTP test server (`server.PREFIX`, `server.HELLO_WORLD`, `server.setContent(path, html, contentType)`)
+- `httpsServer` — HTTPS test server
+
+**Custom matchers:**
+- `toHaveResponse({ code?, snapshot?, page?, error?, isError?, result?, events?, modalState? })` — matches parsed response sections
+- `toHaveTextResponse(text)` — matches raw text with normalization
+
+**Parsed response sections:**
+- `code` — generated Playwright code (without ```js fences)
+- `snapshot` — ARIA page snapshot (with ```yaml fences)
+- `page` — page info (URL, title)
+- `error` — error message
+- `result` — text result
+- `events` — console messages, downloads
+- `modalState` — active dialog/file chooser info
+- `tabs` — tab listing
+- `isError` — boolean
+
+### Testing MCP Tools
+- Run tests: `npm run ctest-mcp <category>`
+- Do not run `test --debug`
+
+---
+
+## Adding CLI Commands
+
+CLI commands are thin wrappers over MCP tools. They live in the daemon and map CLI args to MCP tool calls.
+
+### Step 1: Implement the MCP Tool
+
+Implement the corresponding MCP tool first (see section above). CLI commands call MCP tools via `toolName`/`toolParams`.
+
+### Step 2: Add the Command Declaration
+
+In `packages/playwright/src/cli/daemon/commands.ts`, use `declareCommand()`:
+
+```typescript
+import { z } from 'playwright-core/lib/mcpBundle';
+import { declareCommand } from './command';
+
+const myCommand = declareCommand({
+  name: 'my-command',           // CLI command name (kebab-case)
+  description: 'Does something', // Shown in help
+  category: 'core',             // Category for help grouping
+
+  // Positional arguments (ordered, parsed from CLI positional args)
+  args: z.object({
+    url: z.string().describe('The URL to navigate to'),
+    ref: z.string().optional().describe('Optional element reference'),
+  }),
+
+  // Named options (parsed from --flag or --flag=value)
+  options: z.object({
+    submit: z.boolean().optional().describe('Whether to submit'),
+    filename: z.string().optional().describe('Output filename'),
+  }),
+
+  // MCP tool name — string or function for dynamic routing
+  toolName: 'browser_my_tool',
+  // OR dynamic:
+  // toolName: ({ submit }) => submit ? 'browser_submit' : 'browser_type',
+
+  // Map CLI args/options to MCP tool params
+  toolParams: ({ url, ref, submit, filename }) => ({
+    url,
+    ref,
+    submit,
+    filename,
+  }),
+});
+```
+
+Then add to the `commandsArray` at the bottom of the file, in the correct category section:
+
+```typescript
+const commandsArray: AnyCommandSchema[] = [
+  // core category
+  open,
+  close,
+  // ... existing commands ...
+  myCommand,   // <-- add here in the right category
+  // ...
+];
+```
+
+**Categories** (defined in `packages/playwright/src/cli/daemon/command.ts`):
+
+```typescript
+type Category = 'core' | 'navigation' | 'keyboard' | 'mouse' | 'export' |
+                'storage' | 'tabs' | 'network' | 'devtools' | 'browsers' |
+                'config' | 'install';
+```
+
+To add a new category:
+1. Add it to `Category` type in `packages/playwright/src/cli/daemon/command.ts`
+2. Add it to the `categories` array in `packages/playwright/src/cli/daemon/helpGenerator.ts`:
+   ```typescript
+   const categories: { name: Category, title: string }[] = [
+     // ... existing ...
+     { name: 'mycat', title: 'My Category' },
+   ];
+   ```
+
+**Special tool patterns:**
+- `toolName: ''` — command handled specially by daemon (e.g., `close`, `list`, `install`)
+- Use `numberArg` for numeric CLI args: `x: numberArg.describe('X coordinate')`
+- Param renaming: `toolParams: ({ w: width, h: height }) => ({ width, height })`
+- Dynamic toolName: `toolName: ({ clear }) => clear ? 'browser_clear' : 'browser_list'`
+
+### Step 3: Update SKILL File
+
+Update `packages/playwright/src/skill/SKILL.md` with the new command documentation.
+Add reference docs in `packages/playwright/src/skill/references/` if the feature is complex.
+
+Run `npm run playwright-cli -- --help` to verify the help output includes your new command.
+
+### Step 4: Write CLI Tests
+
+Create `tests/mcp/cli-<category>.spec.ts`. Use fixtures from `./cli-fixtures`:
+
+```typescript
+import { test, expect } from './cli-fixtures';
+
+test('my-command', async ({ cli, server }) => {
+  // Open a page first
+  await cli('open', server.PREFIX);
+
+  // Run your command
+  const { output, snapshot } = await cli('my-command', 'arg1', '--option=value');
+  expect(output).toContain('expected text');
+  expect(snapshot).toContain('expected snapshot content');
+});
+```
+
+**CLI test fixtures:**
+- `cli(...args)` — run CLI command, returns `{ output, error, exitCode, snapshot, attachments }`
+  - `output` — stdout text
+  - `snapshot` — extracted ARIA snapshot (if present)
+  - `attachments` — file attachments `{ name, data }[]`
+  - `error` — stderr text
+  - `exitCode` — process exit code
+
+### Testing CLI Commands
+- Run tests: `npm run ctest-mcp cli-<category>`
+- Do not run `test --debug`
+
+---
+
+## Adding Config Options
+
+When you need to add a new config option, update these files in order:
+
+### 1. Type definition: `packages/playwright/src/mcp/config.d.ts`
+
+Add the option to the `Config` type with JSDoc:
+
+```typescript
+export type Config = {
+  // ... existing ...
+
+  /**
+   * Description of the new option.
+   */
+  myOption?: string;
+};
+```
+
+### 2. CLI options type: `packages/playwright/src/mcp/browser/config.ts`
+
+Add to `CLIOptions` type:
+
+```typescript
+export type CLIOptions = {
+  // ... existing ...
+  myOption?: string;
+};
+```
+
+If the option needs to be in `FullConfig` (with required/resolved values), update `FullConfig` and `defaultConfig`:
+
+```typescript
+export type FullConfig = Config & {
+  // ... existing ...
+  myOption: string;  // required in resolved config
+};
+
+export const defaultConfig: FullConfig = {
+  // ... existing ...
+  myOption: 'default-value',
+};
+```
+
+### 3. Config from CLI: `configFromCLIOptions()` in `config.ts`
+
+Map CLI option to config:
+
+```typescript
+const config: Config = {
+  // ... existing ...
+  myOption: cliOptions.myOption,
+};
+```
+
+### 4. Config from env: `configFromEnv()` in `config.ts`
+
+Add environment variable mapping:
+
+```typescript
+options.myOption = envToString(process.env.PLAYWRIGHT_MCP_MY_OPTION);
+// For booleans: envToBoolean(process.env.PLAYWRIGHT_MCP_MY_OPTION)
+// For numbers: numberParser(process.env.PLAYWRIGHT_MCP_MY_OPTION)
+// For comma lists: commaSeparatedList(process.env.PLAYWRIGHT_MCP_MY_OPTION)
+// For semicolon lists: semicolonSeparatedList(process.env.PLAYWRIGHT_MCP_MY_OPTION)
+```
+
+### 5. MCP server CLI: `packages/playwright/src/mcp/program.ts`
+
+Add CLI flag:
+
+```typescript
+command
+  .option('--my-option <value>', 'description of option')
+```
+
+### 6. Merge config (if nested)
+
+If the option is nested, update `mergeConfig()` in `config.ts` to deep-merge it.
+
+**Config resolution order:** `defaultConfig` → config file → env vars → CLI args (last wins).
+
+---
+
+## SKILL File
+
+The skill file is located at `packages/playwright/src/skill/SKILL.md`. It contains documentation for all available CLI commands and MCP tools. Update it whenever you add new commands or tools.
+
+Reference docs live in `packages/playwright/src/skill/references/`:
+- `request-mocking.md` — network mocking patterns
+- `running-code.md` — code execution
+- `session-management.md` — session handling
+- `storage-state.md` — state persistence
+- `test-generation.md` — test creation
+- `tracing.md` — trace recording
+- `video-recording.md` — video capture
+
+Run `npm run playwright-cli -- --help` to see the latest available commands and use them to update the skill file.
+
+---
+
+## Architecture Reference
+
+### Directory Structure
+
+```
+packages/playwright/src/
+├── mcp/
+│   ├── browser/
+│   │   ├── tools/           # All MCP tool implementations
+│   │   │   ├── tool.ts      # Tool/TabTool types, defineTool(), defineTabTool()
+│   │   │   ├── common.ts    # close, resize
+│   │   │   ├── navigate.ts  # navigate, goBack, goForward, reload
+│   │   │   ├── snapshot.ts  # page snapshot
+│   │   │   ├── form.ts      # click, type, fill, select, check
+│   │   │   ├── keyboard.ts  # press, keydown, keyup
+│   │   │   ├── mouse.ts     # mouse move, click, wheel
+│   │   │   ├── tabs.ts      # tab management
+│   │   │   ├── cookies.ts   # cookie CRUD
+│   │   │   ├── webstorage.ts # localStorage, sessionStorage
+│   │   │   ├── storage.ts   # storage state save/load
+│   │   │   ├── network.ts   # network requests listing
+│   │   │   ├── route.ts     # request mocking/routing
+│   │   │   ├── console.ts   # console messages
+│   │   │   ├── evaluate.ts  # JS evaluation
+│   │   │   ├── screenshot.ts # screenshots
+│   │   │   ├── pdf.ts       # PDF generation
+│   │   │   ├── files.ts     # file upload
+│   │   │   ├── dialogs.ts   # dialog handling
+│   │   │   ├── verify.ts    # assertions
+│   │   │   ├── wait.ts      # wait operations
+│   │   │   ├── tracing.ts   # trace recording
+│   │   │   ├── video.ts     # video recording
+│   │   │   ├── runCode.ts   # run Playwright code
+│   │   │   ├── devtools.ts  # DevTools integration
+│   │   │   ├── config.ts    # config tool
+│   │   │   ├── install.ts   # browser install
+│   │   │   └── utils.ts     # shared utilities
+│   │   ├── tools.ts         # Tool registry (browserTools array, filteredTools)
+│   │   ├── config.ts        # Config resolution, CLIOptions, FullConfig
+│   │   ├── context.ts       # Browser context management
+│   │   ├── response.ts      # Response class, parseResponse()
+│   │   └── tab.ts           # Tab management
+│   ├── sdk/
+│   │   ├── server.ts        # MCP server
+│   │   └── tool.ts          # ToolSchema type, toMcpTool()
+│   ├── config.d.ts          # Config type, ToolCapability type
+│   └── program.ts           # MCP server CLI setup
+├── cli/
+│   ├── client/
+│   │   ├── program.ts       # CLI client entry (argument parsing)
+│   │   ├── session.ts       # Session management
+│   │   └── registry.ts      # Session registry
+│   └── daemon/
+│       ├── command.ts        # Category type, CommandSchema, declareCommand(), parseCommand()
+│       ├── commands.ts       # All CLI command declarations
+│       ├── helpGenerator.ts  # Help text generation (generateHelp, generateHelpJSON)
+│       └── daemon.ts         # Daemon server
+└── skill/
+    ├── SKILL.md              # Skill documentation
+    └── references/           # Reference docs
+
+tests/mcp/
+├── fixtures.ts               # MCP test fixtures (client, startClient, server)
+├── cli-fixtures.ts           # CLI test fixtures (cli helper)
+├── <category>.spec.ts        # MCP tool tests
+└── cli-<category>.spec.ts    # CLI command tests
+```
+
+### Execution Flow
+
+```
+MCP Server mode:
+  LLM → MCP protocol → Server.callTool(name, args)
+    → zod validates input → Tool.handle(context|tab, params, response)
+    → response.serialize() → MCP protocol → LLM
+
+CLI mode:
+  User → `playwright-cli my-command arg1 --opt=val`
+    → Client parses with minimist → sends to Daemon via socket
+    → parseCommand() maps CLI args to MCP tool params via zod
+    → backend.callTool(toolName, toolParams)
+    → Response formatted → printed to stdout
+```
diff --git a/.claude/skills/playwright-dev/vendor.md b/.claude/skills/playwright-dev/vendor.md
new file mode 100644
index 0000000000000..e58a39c945ebf
--- /dev/null
+++ b/.claude/skills/playwright-dev/vendor.md
@@ -0,0 +1,190 @@
+# Vendoring (Bundling) a New Dependency
+
+Playwright vendors third-party npm packages by bundling them with esbuild into self-contained files.
+This isolates dependencies, prevents version conflicts, and keeps the published packages lean.
+
+## Architecture Overview
+
+Each bundle lives under `packages/<package>/bundles/<name>/` and consists of three parts:
+
+1. **Bundle directory** (`bundles/<name>/`) — has its own `package.json` with the dependencies to vendor, plus a `src/<name>BundleImpl.ts` entry point that imports and re-exports them.
+2. **Build configuration** in `utils/build/build.js` — an esbuild entry that bundles the impl file into a single minified CJS file.
+3. **Wrapper file** (`src/<name>Bundle.ts`) — a thin typed wrapper that `require()`s the built bundle impl and re-exports symbols with TypeScript types.
+
+Data flow:
+```
+bundles/<name>/package.json          (declares npm deps)
+  → npm ci → node_modules/
+bundles/<name>/src/<name>BundleImpl.ts  (imports from node_modules, re-exports)
+  → esbuild (bundle + minify) →
+lib/<name>BundleImpl.js              (single self-contained file)
+  ←
+src/<name>Bundle.ts                  (typed wrapper, require('./...BundleImpl'))
+  → esbuild (normal compile) →
+lib/<name>Bundle.js                  (used by application code)
+```
+
+## Step-by-Step: Adding a New Bundle
+
+### Decide which package it belongs to
+
+- `packages/playwright-core/bundles/` — for core browser automation deps (networking, compression, protocols, etc.)
+- `packages/playwright/bundles/` — for test runner deps (assertion libs, transpilers, file watchers, etc.)
+
+### 1. Create the bundle directory
+
+```
+packages/<package>/bundles/<name>/
+├── package.json
+└── src/
+    └── <name>BundleImpl.ts
+```
+
+### 2. Create `package.json`
+
+Minimal private package with only the deps you want to bundle:
+
+```json
+{
+  "name": "<name>-bundle",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "some-lib": "^1.2.3"
+  },
+  "devDependencies": {
+    "@types/some-lib": "^1.2.0"
+  }
+}
+```
+
+Then run `npm install` inside the bundle directory to generate `package-lock.json`.
+
+### 3. Create `src/<name>BundleImpl.ts`
+
+This is the esbuild entry point. Import from `node_modules` and re-export:
+
+```typescript
+// For default exports:
+import someLibrary from 'some-lib';
+export const someLib = someLibrary;
+
+// For named exports:
+export { SomeClass } from 'some-lib';
+
+// For namespace imports:
+import * as someLibrary from 'some-lib';
+export const someLib = someLibrary;
+
+// For vendored/third-party code that can't be bundled:
+const custom = require('./third_party/custom');
+export const customThing = custom;
+```
+
+### 4. Register the bundle in `utils/build/build.js`
+
+Add an entry to the `bundles` array (around line 246):
+
+```javascript
+bundles.push({
+  modulePath: 'packages/<package>/bundles/<name>',
+  entryPoints: ['src/<name>BundleImpl.ts'],
+  // Use outdir for a single .js file alongside other lib files:
+  outdir: 'packages/<package>/lib',
+  // OR use outfile for output in a subdirectory (needed if bundle has non-JS assets):
+  // outfile: 'packages/<package>/lib/<name>BundleImpl/index.js',
+
+  // Optional: deps that should NOT be bundled (must be installed at runtime):
+  // external: ['express'],
+
+  // Optional: redirect imports to custom implementations:
+  // alias: { 'some-module': 'custom-impl.ts' },
+});
+```
+
+**`outdir` vs `outfile`:**
+- `outdir` — output goes to `lib/<name>BundleImpl.js` (most bundles use this)
+- `outfile` — output goes to `lib/<name>BundleImpl/index.js` (use when you need to copy companion files like binaries next to the bundle)
+
+### 5. Create the typed wrapper `src/<name>Bundle.ts`
+
+This file lives in the main package source (NOT in the bundle directory). It provides TypeScript types while loading the bundled code at runtime:
+
+```typescript
+// packages/<package>/src/<name>Bundle.ts
+// (or src/subdir/<name>Bundle.ts if it belongs in a subdirectory)
+
+export const someLib: typeof import('../bundles/<name>/node_modules/some-lib')
+  = require('./<name>BundleImpl').someLib;
+
+export const SomeClass: typeof import('../bundles/<name>/node_modules/some-lib').SomeClass
+  = require('./<name>BundleImpl').SomeClass;
+
+// Re-export types if needed:
+export type { SomeType } from '../bundles/<name>/node_modules/some-lib';
+```
+
+The pattern is: `typeof import('../bundles/<name>/node_modules/...')` for the type, `require('./<name>BundleImpl').<export>` for the value.
+
+If the wrapper lives in a subdirectory (e.g. `src/common/<name>Bundle.ts`), adjust the `outdir` accordingly so the BundleImpl ends up next to the compiled wrapper:
+```javascript
+// in build.js
+outdir: 'packages/<package>/lib/common',
+```
+
+### 6. Build and verify
+
+```bash
+npm run build
+```
+
+Or if watch is running, it will pick up changes automatically.
+
+### 7. Use the bundle in application code
+
+Import from the wrapper file, never from the bundle directory or `node_modules` directly:
+
+```typescript
+import { someLib } from '../<name>Bundle';
+```
+
+## Existing Bundles Reference
+
+### playwright-core bundles
+
+| Bundle | Deps | Output |
+|--------|------|--------|
+| `utils` | colors, commander, debug, diff, dotenv, graceful-fs, https-proxy-agent, jpeg-js, mime, minimatch, open, pngjs, progress, proxy-from-env, socks-proxy-agent, ws, yaml | `lib/utilsBundleImpl/index.js` |
+| `zip` | yauzl, yazl, get-stream, debug | `lib/zipBundleImpl.js` |
+| `mcp` | @modelcontextprotocol/sdk, zod, zod-to-json-schema | `lib/mcpBundleImpl/index.js` |
+
+### playwright bundles
+
+| Bundle | Deps | Output |
+|--------|------|--------|
+| `utils` | chokidar, enquirer, json5, source-map-support, stoppable, unified, remark-parse | `lib/utilsBundleImpl.js` |
+| `babel` | ~30 @babel/* packages | `lib/transform/babelBundleImpl.js` |
+| `expect` | expect, jest-matcher-utils | `lib/common/expectBundleImpl.js` |
+
+## Advanced Patterns
+
+### Adding a dep to an existing bundle
+
+If the dep logically belongs with an existing bundle (e.g. a new utility lib → `utils` bundle):
+
+1. Add the dependency to the existing `bundles/<name>/package.json`
+2. Run `npm install` in that bundle directory
+3. Add the import/export to the existing `src/<name>BundleImpl.ts`
+4. Add the typed re-export to the existing `src/<name>Bundle.ts`
+
+### Vendored third-party code
+
+If a package can't be bundled by esbuild (e.g. it uses dynamic requires or has runtime file dependencies), place a modified copy in `bundles/<name>/src/third_party/` and require it from the BundleImpl. See `bundles/zip/src/third_party/extract-zip.js` for an example.
+
+### External dependencies
+
+Use `external: ['pkg']` in the build.js config when a dependency should NOT be bundled — e.g. optional peer deps that users install themselves. These must be available at runtime in the consumer's `node_modules`.
+
+### Module aliases
+
+Use `alias: { 'module-name': 'local-file.ts' }` to replace a dependency with a custom local implementation. The alias path is relative to the bundle's `modulePath`. See the `mcp` bundle's `raw-body` alias for an example.
diff --git a/.claude/skills/playwright-mcp-dev/SKILL.md b/.claude/skills/playwright-mcp-dev/SKILL.md
deleted file mode 100644
index 30dd879c34ec4..0000000000000
--- a/.claude/skills/playwright-mcp-dev/SKILL.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-name: playwright-mcp-dev
-description: Explains how to add and debug playwright MCP tools and CLI commands.
----
-
-# MCP
-
-## Adding MCP Tools
-- Create a new tool in `packages/playwright/src/mcp/browser/tools/your-tool.ts`
-- Register the tool in `packages/playwright/src/mcp/browser/tools.ts`
-- Add ToolCapability in `packages/playwright/src/mcp/config.d.ts`
-- Place new tests in `tests/mcp/mcp-<category>.spec.ts`
-
-## Building
-- Assume watch is running at all times, run lint to see type errors
-
-## Testing
-- Run tests as `npm run ctest-mcp <category>`
-- Do not run test --debug
-
-# CLI
-
-## Adding commands
-- CLI commands are based on MCP tools. Implement the corresponding MCP tool as per `Adding MCP Tools` section above, if needed.
-- Add new CLI category for tool if needed:
-  - Add Category in `packages/playwright/src/mcp/terminal/command.ts`
-  - Update doc generator `packages/playwright/src/mcp/terminal/helpGenerator.ts`
-- Register command in `packages/playwright/src/mcp/terminal/commands.ts`
-- Update skill file at `packages/playwright/src/skill/SKILL.md` and references if necessary
-  in `packages/playwright/src/skill/references/`
-- Place new tests in `tests/mcp/cli-<category>.spec.ts`
-
-## Adding CLI options or Config options
-When you need to add something to config.
-
-- `packages/playwright/src/mcp/program.ts`
-  - add CLI option and doc
-- `packages/playwright/src/mcp/config.d.ts`
-  - add and document the option
-- `packages/playwright/src/mcp/config.ts`
-  - modify FullConfig if needed
-  - and CLIOptions if needed
-  - add it to configFromEnv
-
-## Building
-- Assume watch is running at all times, run lint to see type errors
-
-## Testing
-- Run tests as `npm run ctest-mcp cli-<category>`
-- Do not run test --debug
-
-# Lint
-- run `npm run flint` to lint everything before commit
-
-# SKILL File
-
-The skill file is located at `packages/playwright/src/skill/SKILL.md`. It contains documentation for all available CLI commands and MCP tools. Update it whenever you add new commands or tools.
-At any point in time you can run "npm run playwright-cli -- --help" to see the latest available commands and use them to update the skill file.
diff --git a/packages/playwright-core/ThirdPartyNotices.txt b/packages/playwright-core/ThirdPartyNotices.txt
index 9d6b7ba66be57..6a7d6a88bced0 100644
--- a/packages/playwright-core/ThirdPartyNotices.txt
+++ b/packages/playwright-core/ThirdPartyNotices.txt
@@ -66,6 +66,7 @@ This project incorporates components from the projects listed below. The origina
 -	https-proxy-agent@7.0.6 (https://github.com/TooTallNate/proxy-agents)
 -	iconv-lite@0.7.2 (https://github.com/pillarjs/iconv-lite)
 -	inherits@2.0.4 (https://github.com/isaacs/inherits)
+-	ini@6.0.0 (https://github.com/npm/ini)
 -	ip-address@10.0.1 (https://github.com/beaugunderson/ip-address)
 -	ip-address@9.0.5 (https://github.com/beaugunderson/ip-address)
 -	ipaddr.js@1.9.1 (https://github.com/whitequark/ipaddr.js)
@@ -2270,6 +2271,26 @@ PERFORMANCE OF THIS SOFTWARE.
 =========================================
 END OF inherits@2.0.4 AND INFORMATION
 
+%% ini@6.0.0 NOTICES AND INFORMATION BEGIN HERE
+=========================================
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+=========================================
+END OF ini@6.0.0 AND INFORMATION
+
 %% ip-address@10.0.1 NOTICES AND INFORMATION BEGIN HERE
 =========================================
 Copyright (C) 2011 by Beau Gunderson
@@ -4069,6 +4090,6 @@ END OF zod@4.3.5 AND INFORMATION
 
 SUMMARY BEGIN HERE
 =========================================
-Total Packages: 133
+Total Packages: 134
 =========================================
 END OF SUMMARY
\ No newline at end of file
diff --git a/packages/playwright-core/bundles/utils/package-lock.json b/packages/playwright-core/bundles/utils/package-lock.json
index 3d2a48a6e5f01..05ded979e73b9 100644
--- a/packages/playwright-core/bundles/utils/package-lock.json
+++ b/packages/playwright-core/bundles/utils/package-lock.json
@@ -15,6 +15,7 @@
         "dotenv": "^16.4.5",
         "graceful-fs": "4.2.10",
         "https-proxy-agent": "7.0.6",
+        "ini": "^6.0.0",
         "jpeg-js": "0.4.4",
         "mime": "^3.0.0",
         "minimatch": "^3.1.2",
@@ -31,6 +32,7 @@
       "devDependencies": {
         "@types/debug": "^4.1.7",
         "@types/diff": "^6.0.0",
+        "@types/ini": "^4.1.1",
         "@types/mime": "^2.0.3",
         "@types/minimatch": "^3.0.5",
         "@types/pngjs": "^6.0.1",
@@ -57,6 +59,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/ini": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@types/ini/-/ini-4.1.1.tgz",
+      "integrity": "sha512-MIyNUZipBTbyUNnhvuXJTY7B6qNI78meck9Jbv3wk0OgNwRyOOVEKDutAkOs1snB/tx0FafyR6/SN4Ps0hZPeg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
@@ -246,6 +255,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ini": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
     "node_modules/ip-address": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
diff --git a/packages/playwright-core/bundles/utils/package.json b/packages/playwright-core/bundles/utils/package.json
index f0023dc38a928..6c183cca1542f 100644
--- a/packages/playwright-core/bundles/utils/package.json
+++ b/packages/playwright-core/bundles/utils/package.json
@@ -10,6 +10,7 @@
     "dotenv": "^16.4.5",
     "graceful-fs": "4.2.10",
     "https-proxy-agent": "7.0.6",
+    "ini": "^6.0.0",
     "jpeg-js": "0.4.4",
     "mime": "^3.0.0",
     "minimatch": "^3.1.2",
@@ -26,6 +27,7 @@
   "devDependencies": {
     "@types/debug": "^4.1.7",
     "@types/diff": "^6.0.0",
+    "@types/ini": "^4.1.1",
     "@types/mime": "^2.0.3",
     "@types/minimatch": "^3.0.5",
     "@types/pngjs": "^6.0.1",
diff --git a/packages/playwright-core/bundles/utils/src/utilsBundleImpl.ts b/packages/playwright-core/bundles/utils/src/utilsBundleImpl.ts
index cc57a921c1256..3b15106ae6438 100644
--- a/packages/playwright-core/bundles/utils/src/utilsBundleImpl.ts
+++ b/packages/playwright-core/bundles/utils/src/utilsBundleImpl.ts
@@ -22,6 +22,9 @@ export const colors = colorsLibrary;
 import debugLibrary from 'debug';
 export const debug = debugLibrary;
 
+import * as iniLibrary from 'ini';
+export const ini = iniLibrary;
+
 import * as diffLibrary from 'diff';
 export const diff = diffLibrary;
 
diff --git a/packages/playwright-core/src/utilsBundle.ts b/packages/playwright-core/src/utilsBundle.ts
index d5e8a2d940673..2eab1d9872899 100644
--- a/packages/playwright-core/src/utilsBundle.ts
+++ b/packages/playwright-core/src/utilsBundle.ts
@@ -18,6 +18,7 @@ export const colors: typeof import('../bundles/utils/node_modules/colors/safe')
 export const debug: typeof import('../bundles/utils/node_modules/@types/debug') = require('./utilsBundleImpl').debug;
 export const diff: typeof import('../bundles/utils/node_modules/@types/diff') = require('./utilsBundleImpl').diff;
 export const dotenv: typeof import('../bundles/utils/node_modules/dotenv') = require('./utilsBundleImpl').dotenv;
+export const ini: typeof import('../bundles/utils/node_modules/@types/ini') = require('./utilsBundleImpl').ini;
 export const getProxyForUrl: typeof import('../bundles/utils/node_modules/@types/proxy-from-env').getProxyForUrl = require('./utilsBundleImpl').getProxyForUrl;
 export const HttpsProxyAgent: typeof import('../bundles/utils/node_modules/https-proxy-agent').HttpsProxyAgent = require('./utilsBundleImpl').HttpsProxyAgent;
 export const jpegjs: typeof import('../bundles/utils/node_modules/jpeg-js') = require('./utilsBundleImpl').jpegjs;
diff --git a/packages/playwright/src/mcp/browser/config.ts b/packages/playwright/src/mcp/browser/config.ts
index 9b3e189cfd2c7..2dbecdc8a51b9 100644
--- a/packages/playwright/src/mcp/browser/config.ts
+++ b/packages/playwright/src/mcp/browser/config.ts
@@ -22,6 +22,7 @@ import { registry } from 'playwright-core/lib/server';
 import { devices } from 'playwright-core';
 import { dotenv, debug } from 'playwright-core/lib/utilsBundle';
 
+import { configFromIniFile } from './configIni';
 import { fileExistsAsync } from '../../util';
 import { firstRootPath } from '../sdk/server';
 
@@ -359,10 +360,13 @@ export async function loadConfig(configFile: string | undefined): Promise<Config
   if (!configFile)
     return {};
 
+  if (configFile.endsWith('.ini'))
+    return configFromIniFile(configFile);
+
   try {
     return JSON.parse(await fs.promises.readFile(configFile, 'utf8'));
-  } catch (error) {
-    throw new Error(`Failed to load config file: ${configFile}, ${error}`);
+  } catch {
+    return configFromIniFile(configFile);
   }
 }
 
diff --git a/packages/playwright/src/mcp/browser/configIni.ts b/packages/playwright/src/mcp/browser/configIni.ts
new file mode 100644
index 0000000000000..5afd79845b40a
--- /dev/null
+++ b/packages/playwright/src/mcp/browser/configIni.ts
@@ -0,0 +1,189 @@
+/**
+ * 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 { ini } from 'playwright-core/lib/utilsBundle';
+
+import type { Config } from '../config';
+
+export function configFromIniFile(filePath: string): Config {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const parsed = ini.parse(content);
+  return iniEntriesToConfig(parsed);
+}
+
+export function configsFromIniFile(filePath: string): Map<string, Config> {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const parsed = ini.parse(content);
+  const result = new Map<string, Config>();
+  for (const [sectionName, sectionData] of Object.entries(parsed)) {
+    if (typeof sectionData !== 'object' || sectionData === null)
+      continue;
+    result.set(sectionName, iniEntriesToConfig(sectionData as Record<string, any>));
+  }
+  return result;
+}
+
+function iniEntriesToConfig(entries: Record<string, any>): Config {
+  const config: Record<string, any> = {};
+  for (const [targetPath, rawValue] of Object.entries(entries)) {
+    const type = longhandTypes[targetPath];
+    const value = type ? coerceToType(rawValue, type) : coerceIniValue(rawValue);
+    setNestedValue(config, targetPath, value);
+  }
+  return config as Config;
+}
+
+function coerceToType(value: any, type: LonghandType): any {
+  switch (type) {
+    case 'string':
+      return String(value);
+    case 'number':
+      return Number(value);
+    case 'boolean':
+      if (typeof value === 'boolean')
+        return value;
+      return value === 'true' || value === '1';
+    case 'string[]':
+      if (Array.isArray(value))
+        return value.map(String);
+      return [String(value)];
+    case 'size': {
+      if (typeof value === 'string' && value.includes('x')) {
+        const [w, h] = value.split('x').map(Number);
+        if (!isNaN(w) && !isNaN(h) && w > 0 && h > 0)
+          return { width: w, height: h };
+      }
+      return undefined;
+    }
+  }
+}
+
+function coerceIniValue(value: any): any {
+  if (typeof value !== 'string')
+    return value;
+  const trimmed = value.trim();
+  if (trimmed === '')
+    return trimmed;
+  const num = Number(trimmed);
+  if (!isNaN(num))
+    return num;
+  return value;
+}
+
+function setNestedValue(obj: Record<string, any>, dotPath: string, value: any) {
+  const parts = dotPath.split('.');
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    if (!(part in current) || typeof current[part] !== 'object' || current[part] === null)
+      current[part] = {};
+    current = current[part];
+  }
+  current[parts[parts.length - 1]] = value;
+}
+
+// Regenerate this based on packages/playwright/src/mcp/config.d.ts when config changes.
+
+type LonghandType = 'string' | 'number' | 'boolean' | 'string[]' | 'size';
+
+const longhandTypes: Record<string, LonghandType> = {
+  // browser direct
+  'browser.browserName': 'string',
+  'browser.isolated': 'boolean',
+  'browser.userDataDir': 'string',
+  'browser.cdpEndpoint': 'string',
+  'browser.cdpTimeout': 'number',
+  'browser.remoteEndpoint': 'string',
+  'browser.initPage': 'string[]',
+  'browser.initScript': 'string[]',
+
+  // browser.launchOptions
+  'browser.launchOptions.channel': 'string',
+  'browser.launchOptions.headless': 'boolean',
+  'browser.launchOptions.executablePath': 'string',
+  'browser.launchOptions.chromiumSandbox': 'boolean',
+  'browser.launchOptions.args': 'string[]',
+  'browser.launchOptions.downloadsPath': 'string',
+  'browser.launchOptions.handleSIGHUP': 'boolean',
+  'browser.launchOptions.handleSIGINT': 'boolean',
+  'browser.launchOptions.handleSIGTERM': 'boolean',
+  'browser.launchOptions.slowMo': 'number',
+  'browser.launchOptions.timeout': 'number',
+  'browser.launchOptions.tracesDir': 'string',
+  'browser.launchOptions.proxy.server': 'string',
+  'browser.launchOptions.proxy.bypass': 'string',
+  'browser.launchOptions.proxy.username': 'string',
+  'browser.launchOptions.proxy.password': 'string',
+
+  // browser.contextOptions
+  'browser.contextOptions.acceptDownloads': 'boolean',
+  'browser.contextOptions.baseURL': 'string',
+  'browser.contextOptions.bypassCSP': 'boolean',
+  'browser.contextOptions.colorScheme': 'string',
+  'browser.contextOptions.contrast': 'string',
+  'browser.contextOptions.deviceScaleFactor': 'number',
+  'browser.contextOptions.forcedColors': 'string',
+  'browser.contextOptions.hasTouch': 'boolean',
+  'browser.contextOptions.ignoreHTTPSErrors': 'boolean',
+  'browser.contextOptions.isMobile': 'boolean',
+  'browser.contextOptions.javaScriptEnabled': 'boolean',
+  'browser.contextOptions.locale': 'string',
+  'browser.contextOptions.offline': 'boolean',
+  'browser.contextOptions.permissions': 'string[]',
+  'browser.contextOptions.reducedMotion': 'string',
+  'browser.contextOptions.screen': 'size',
+  'browser.contextOptions.serviceWorkers': 'string',
+  'browser.contextOptions.storageState': 'string',
+  'browser.contextOptions.strictSelectors': 'boolean',
+  'browser.contextOptions.timezoneId': 'string',
+  'browser.contextOptions.userAgent': 'string',
+  'browser.contextOptions.viewport': 'size',
+
+  // top-level
+  'extension': 'boolean',
+  'capabilities': 'string[]',
+  'saveSession': 'boolean',
+  'saveTrace': 'boolean',
+  'saveVideo': 'size',
+  'sharedBrowserContext': 'boolean',
+  'outputDir': 'string',
+  'outputMode': 'string',
+  'imageResponses': 'string',
+  'allowUnrestrictedFileAccess': 'boolean',
+  'codegen': 'string',
+  'testIdAttribute': 'string',
+
+  // server
+  'server.port': 'number',
+  'server.host': 'string',
+  'server.allowedHosts': 'string[]',
+
+  // console
+  'console.level': 'string',
+
+  // network
+  'network.allowedOrigins': 'string[]',
+  'network.blockedOrigins': 'string[]',
+
+  // timeouts
+  'timeouts.action': 'number',
+  'timeouts.navigation': 'number',
+
+  // snapshot
+  'snapshot.mode': 'string',
+};
diff --git a/tests/mcp/config.ini.spec.ts b/tests/mcp/config.ini.spec.ts
new file mode 100644
index 0000000000000..9746d09adad8c
--- /dev/null
+++ b/tests/mcp/config.ini.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * 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 { test, expect, parseResponse } from './fixtures';
+
+test('ini config sets viewport', async ({ startClient, server }) => {
+  server.setContent('/', `
+    <title>Test</title>
+    <script>document.title = window.innerWidth + 'x' + window.innerHeight</script>
+  `, 'text/html');
+
+  const { client } = await startClient({
+    config: `
+      browser.contextOptions.viewport = 640x480
+    `,
+  });
+
+  expect(await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  })).toHaveResponse({
+    page: expect.stringContaining('640x480'),
+  });
+});
+
+test('ini config sets timeouts and console level', async ({ startClient }) => {
+  const { client } = await startClient({
+    config: `
+      capabilities = config
+      console.level = error
+      timeouts.action = 12345
+      timeouts.navigation = 54321
+    `,
+    noTimeoutForTest: true,
+  });
+
+  const result = await client.callTool({ name: 'browser_get_config' });
+  const config = JSON.parse(parseResponse(result).result);
+  expect(config.console.level).toBe('error');
+  expect(config.timeouts.action).toBe(12345);
+  expect(config.timeouts.navigation).toBe(54321);
+});
+
+test('ini config sets browser launch options', async ({ startClient }) => {
+  const { client } = await startClient({
+    config: `
+      capabilities = config
+      browser.launchOptions.headless = true
+      browser.isolated = true
+    `,
+  });
+
+  const result = await client.callTool({ name: 'browser_get_config' });
+  const config = JSON.parse(parseResponse(result).result);
+  expect(config.browser.launchOptions.headless).toBe(true);
+  expect(config.browser.isolated).toBe(true);
+});
+
+test('ini config sets context options', async ({ startClient }) => {
+  const { client } = await startClient({
+    config: `
+      capabilities = config
+      browser.contextOptions.userAgent = TestAgent/1.0
+      browser.contextOptions.locale = fr-FR
+      browser.contextOptions.timezoneId = Europe/Paris
+    `,
+  });
+
+  const result = await client.callTool({ name: 'browser_get_config' });
+  const config = JSON.parse(parseResponse(result).result);
+  expect(config.browser.contextOptions.userAgent).toBe('TestAgent/1.0');
+  expect(config.browser.contextOptions.locale).toBe('fr-FR');
+  expect(config.browser.contextOptions.timezoneId).toBe('Europe/Paris');
+});
+
+test('ini config sets server and network options', async ({ startClient }) => {
+  const { client } = await startClient({
+    config: `
+      capabilities = config
+      server.host = localhost
+      network.allowedOrigins = https://example.com
+    `,
+  });
+
+  const result = await client.callTool({ name: 'browser_get_config' });
+  const config = JSON.parse(parseResponse(result).result);
+  expect(config.server.host).toBe('localhost');
+  expect(config.network.allowedOrigins).toEqual(['https://example.com']);
+});
+
+test('ini config boolean values', async ({ startClient }) => {
+  const { client } = await startClient({
+    config: `
+      capabilities = config
+      saveTrace = true
+      browser.contextOptions.bypassCSP = true
+      browser.contextOptions.javaScriptEnabled = false
+    `,
+  });
+
+  const result = await client.callTool({ name: 'browser_get_config' });
+  const config = JSON.parse(parseResponse(result).result);
+  expect(config.saveTrace).toBe(true);
+  expect(config.browser.contextOptions.bypassCSP).toBe(true);
+  expect(config.browser.contextOptions.javaScriptEnabled).toBe(false);
+});
diff --git a/tests/mcp/fixtures.ts b/tests/mcp/fixtures.ts
index 76d47746e28e3..33cb3b91ae1e7 100644
--- a/tests/mcp/fixtures.ts
+++ b/tests/mcp/fixtures.ts
@@ -54,7 +54,7 @@ export type StartClient = (options?: {
   args?: string[],
   omitArgs?: string[],
   cwd?: string,
-  config?: Config,
+  config?: Config | string,
   roots?: { name: string, uri: string }[],
   rootsResponseDelay?: number,
   env?: NodeJS.ProcessEnv,
@@ -110,7 +110,10 @@ export const test = serverTest.extend<TestFixtures & TestOptions, WorkerFixtures
           args.push(`--browser=${mcpBrowser}`);
         if (options?.config) {
           const configFile = testInfo.outputPath('config.json');
-          await fs.promises.writeFile(configFile, JSON.stringify(options.config, null, 2));
+          if (typeof options.config === 'object')
+            await fs.promises.writeFile(configFile, JSON.stringify(options.config, null, 2));
+          else if (typeof options.config === 'string')
+            await fs.promises.writeFile(configFile, options.config.trim());
           args.push(`--config=${path.relative(configDir, configFile)}`);
         }
         if (!options?.noTimeoutForTest)

From 0bd37174dea4e6e681902100fb820cbbc537df68 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 13 Feb 2026 21:23:44 -0800
Subject: [PATCH 5/5] chore: fix the cli export, bump screencast resolution
 (#39272)

---
 packages/playwright-core/src/server/devtoolsController.ts | 2 +-
 packages/playwright/package.json                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/src/server/devtoolsController.ts b/packages/playwright-core/src/server/devtoolsController.ts
index 499bdac4231e2..02d8f79be3732 100644
--- a/packages/playwright-core/src/server/devtoolsController.ts
+++ b/packages/playwright-core/src/server/devtoolsController.ts
@@ -254,7 +254,7 @@ class DevToolsConnection implements Transport, DevToolsChannel {
         eventsHelper.addEventListener(page, Page.Events.ScreencastFrame, frame => this._writeFrame(frame.buffer, frame.width, frame.height))
     );
 
-    await page.screencast.startScreencast(this, { width: 800, height: 600, quality: 90 });
+    await page.screencast.startScreencast(this, { width: 1280, height: 800, quality: 90 });
   }
 
   private _deselectPage() {
diff --git a/packages/playwright/package.json b/packages/playwright/package.json
index 2c60bd0b99344..5f715cfc0aa87 100644
--- a/packages/playwright/package.json
+++ b/packages/playwright/package.json
@@ -26,7 +26,7 @@
     "./lib/mcp/program": "./lib/mcp/program.js",
     "./lib/mcp/sdk/bundle": "./lib/mcp/sdk/bundle.js",
     "./lib/mcp/sdk/exports": "./lib/mcp/sdk/exports.js",
-    "./lib/mcp/terminal/program": "./lib/mcp/terminal/program.js",
+    "./lib/cli/client/program": "./lib/cli/client/program.js",
     "./lib/program": "./lib/program.js",
     "./lib/reporters/base": "./lib/reporters/base.js",
     "./lib/reporters/list": "./lib/reporters/list.js",