From 7ae458f0ae6ff4742fb6d1eaa6c8c2a99ee395e3 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 19 Feb 2026 09:39:17 +0100
Subject: [PATCH] chore(cli): blocking `show` + tests

---
 packages/devtools/src/devtools.tsx            |   5 +-
 .../playwright/src/cli/client/devtoolsApp.ts  |  13 +-
 .../src/cli/client/devtoolsDaemon.ts          |  19 ++
 packages/playwright/src/cli/client/program.ts |  12 +-
 .../playwright/src/cli/daemon/commands.ts     |   4 +
 tests/mcp/cli-fixtures.ts                     |  46 ++--
 tests/mcp/cli-show.spec.ts                    | 235 ++++++++++++++++++
 7 files changed, 308 insertions(+), 26 deletions(-)
 create mode 100644 packages/playwright/src/cli/client/devtoolsDaemon.ts
 create mode 100644 tests/mcp/cli-show.spec.ts

diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index 520f7577dba7f..5d886e16f3f05 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()}
       />
-      {false && <button
+      <button
         className={'nav-btn' + (picking ? ' active-toggle' : '')}
         title={picking ? 'Cancel pick locator' : 'Pick locator'}
         onClick={() => {
@@ -368,8 +368,7 @@ 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>
-      }
-      {false && selectedTab?.inspectorUrl && (
+      {selectedTab?.inspectorUrl && (
         <button
           className={'nav-btn' + (showInspector ? ' active-toggle' : '')}
           title={showInspector ? 'Hide Chrome DevTools' : 'Show Chrome DevTools'}
diff --git a/packages/playwright/src/cli/client/devtoolsApp.ts b/packages/playwright/src/cli/client/devtoolsApp.ts
index e5056d2e5ba5a..1f01a63e93f90 100644
--- a/packages/playwright/src/cli/client/devtoolsApp.ts
+++ b/packages/playwright/src/cli/client/devtoolsApp.ts
@@ -116,7 +116,7 @@ async function handleApiRequest(clientInfo: ClientInfo, request: http.IncomingMe
   response.end(JSON.stringify({ error: 'Not found' }));
 }
 
-async function openDevToolsApp(): Promise<Page> {
+export async function startDevToolsServer(options: { host?: string, port?: number } = {}): Promise<HttpServer> {
   const httpServer = new HttpServer();
   const libDir = require.resolve('playwright-core/package.json');
   const devtoolsDir = path.join(path.dirname(libDir), 'lib/vite/devtools');
@@ -138,7 +138,12 @@ async function openDevToolsApp(): Promise<Page> {
       return false;
     return httpServer.serveFile(request, response, resolved);
   });
-  await httpServer.start();
+  await httpServer.start({ host: options.host, preferredPort: options.port });
+  return httpServer;
+}
+
+async function openDevToolsApp(options: { host?: string, port?: number } = {}): Promise<Page> {
+  const httpServer = await startDevToolsServer(options);
   const url = httpServer.urlPrefix('human-readable');
 
   const { page } = await launchApp('devtools');
@@ -240,7 +245,7 @@ async function acquireSingleton(): Promise<net.Server> {
   });
 }
 
-async function main() {
+export async function runDevToolsAppDaemon(): Promise<void> {
   let server: net.Server | undefined;
   process.on('exit', () => server?.close());
   try {
@@ -256,5 +261,3 @@ async function main() {
     });
   });
 }
-
-void main();
diff --git a/packages/playwright/src/cli/client/devtoolsDaemon.ts b/packages/playwright/src/cli/client/devtoolsDaemon.ts
new file mode 100644
index 0000000000000..deff182e9de41
--- /dev/null
+++ b/packages/playwright/src/cli/client/devtoolsDaemon.ts
@@ -0,0 +1,19 @@
+/**
+ * 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 { runDevToolsAppDaemon } from './devtoolsApp';
+
+void runDevToolsAppDaemon();
diff --git a/packages/playwright/src/cli/client/program.ts b/packages/playwright/src/cli/client/program.ts
index 780578f46dbeb..ebd003da65261 100644
--- a/packages/playwright/src/cli/client/program.ts
+++ b/packages/playwright/src/cli/client/program.ts
@@ -184,7 +184,17 @@ async function program() {
       await installBrowser();
       return;
     case 'show': {
-      const daemonScript = path.join(__dirname, 'devtoolsApp.js');
+      if (args.host || args.port) {
+        const { startDevToolsServer } = await import('./devtoolsApp.js');
+        const httpServer = await startDevToolsServer({
+          host: args.host || undefined,
+          port: args.port
+        });
+        console.log('Listening on ' + httpServer.urlPrefix('human-readable'));
+        return;
+      }
+
+      const daemonScript = path.join(__dirname, 'devtoolsDaemon.js');
       const child = spawn(process.execPath, [daemonScript], {
         detached: true,
         stdio: 'ignore',
diff --git a/packages/playwright/src/cli/daemon/commands.ts b/packages/playwright/src/cli/daemon/commands.ts
index 6fc435c7b157e..f5e0f512e0ad5 100644
--- a/packages/playwright/src/cli/daemon/commands.ts
+++ b/packages/playwright/src/cli/daemon/commands.ts
@@ -768,6 +768,10 @@ const devtoolsShow = declareCommand({
   description: 'Show browser DevTools',
   category: 'devtools',
   args: z.object({}),
+  options: z.object({
+    host: z.string().optional().describe('Serves devtools on the given host instead of opening a window.'),
+    port: z.string().optional().describe('Serves devtools on the given port instead of opening a window.'),
+  }),
   toolName: '',
   toolParams: () => ({}),
 });
diff --git a/tests/mcp/cli-fixtures.ts b/tests/mcp/cli-fixtures.ts
index b90ed6d251093..54748ed06507f 100644
--- a/tests/mcp/cli-fixtures.ts
+++ b/tests/mcp/cli-fixtures.ts
@@ -20,7 +20,7 @@ import path from 'path';
 import { test as baseTest } from './fixtures';
 import { killProcessGroup } from '../config/commonFixtures';
 
-import type { CommonFixtures } from '../config/commonFixtures';
+import type { CommonFixtures, TestChildProcess } from '../config/commonFixtures';
 
 export { expect } from './fixtures';
 export const test = baseTest.extend<{
@@ -31,6 +31,7 @@ export const test = baseTest.extend<{
     snapshot?: string,
     attachments?: { name: string, data: Buffer | null }[],
   }>;
+  startCli: (...args: any[]) => Promise<TestChildProcess>;
 }>({
   cli: async ({ mcpBrowser, mcpHeadless, childProcess }, use) => {
     const sessions: { name: string, pid: number }[] = [];
@@ -55,27 +56,38 @@ export const test = baseTest.extend<{
     for (const dir of userDataDirs.filter(f => f.startsWith('ud-')))
       await fs.promises.rm(path.join(daemonDir, dir), { recursive: true, force: true }).catch(() => {});
   },
+  startCli: async ({ mcpBrowser, mcpHeadless, childProcess }, use) => {
+    await use(async (...args: string[]) => {
+      const cliArgs = args.filter(arg => typeof arg === 'string');
+      const cliOptions = args.findLast(arg => typeof arg === 'object') || {};
+      return await startCli(childProcess, cliArgs, cliOptions, { mcpBrowser, mcpHeadless });
+    });
+  },
 });
 
+async function startCli(childProcess: CommonFixtures['childProcess'], args: string[], cliOptions: { cwd?: string, env?: Record<string, string> }, options: { mcpBrowser: string, mcpHeadless: boolean }) {
+  const testInfo = test.info();
+  return childProcess({
+    command: [process.execPath, require.resolve('../../packages/playwright/lib/cli/client/program.js'), ...args],
+    cwd: cliOptions.cwd ?? testInfo.outputPath(),
+    env: {
+      ...process.env,
+      ...cliOptions.env,
+      PLAYWRIGHT_DAEMON_SESSION_DIR: testInfo.outputPath('daemon'),
+      PLAYWRIGHT_DAEMON_SOCKETS_DIR: path.join(testInfo.project.outputDir, 'daemon-sockets'),
+      PLAYWRIGHT_MCP_BROWSER: options.mcpBrowser,
+      PLAYWRIGHT_MCP_HEADLESS: String(options.mcpHeadless),
+      ...cliOptions.env,
+    },
+  });
+}
+
 async function runCli(childProcess: CommonFixtures['childProcess'], args: string[], cliOptions: { cwd?: string, env?: Record<string, string> }, options: { mcpBrowser: string, mcpHeadless: boolean }, sessions: { name: string, pid: number }[]) {
   const stepTitle = `cli ${args.join(' ')}`;
-  return await test.step(stepTitle, async () => {
-    const testInfo = test.info();
-    const cli = childProcess({
-      command: [process.execPath, require.resolve('../../packages/playwright/lib/cli/client/program.js'), ...args],
-      cwd: cliOptions.cwd ?? testInfo.outputPath(),
-      env: {
-        ...process.env,
-        ...cliOptions.env,
-        PLAYWRIGHT_DAEMON_SESSION_DIR: testInfo.outputPath('daemon'),
-        PLAYWRIGHT_DAEMON_SOCKETS_DIR: path.join(testInfo.project.outputDir, 'daemon-sockets'),
-        PLAYWRIGHT_MCP_BROWSER: options.mcpBrowser,
-        PLAYWRIGHT_MCP_HEADLESS: String(options.mcpHeadless),
-        ...cliOptions.env,
-      },
-    });
+  return await test.step(stepTitle, async stepInfo => {
+    const cli = await startCli(childProcess, args, cliOptions, options);
     await cli.exited.finally(async () => {
-      await testInfo.attach(stepTitle, { body: cli.output, contentType: 'text/plain' });
+      await stepInfo.attach('output', { body: cli.output, contentType: 'text/plain' });
     });
 
     let snapshot: string | undefined;
diff --git a/tests/mcp/cli-show.spec.ts b/tests/mcp/cli-show.spec.ts
new file mode 100644
index 0000000000000..31a99295050c1
--- /dev/null
+++ b/tests/mcp/cli-show.spec.ts
@@ -0,0 +1,235 @@
+/**
+ * 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 as cliTest, expect } from './cli-fixtures';
+
+const test = cliTest.extend<{ showServer: string }>({
+  showServer: async ({ startCli }, use) => {
+    const show = await startCli('show', '--port=0');
+    await show.waitForOutput('Listening on ');
+    await use(show.output.match(/Listening on (.+)/)[1]);
+  },
+  baseURL: ({ showServer }, use) => use(showServer),
+});
+
+test('grid', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX);
+  await page.goto('/');
+  await expect(page.getByRole('link', { name: 'default' })).toMatchAriaSnapshot(`
+    - link /default/:
+      - button "Close session"
+      - img "screencast"
+  `);
+});
+
+test('show connected status', async ({ cli, page }) => {
+  await cli('open');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.locator('#status')).toHaveText('Connected');
+  await expect(page.locator('#status')).toHaveClass(/connected/);
+});
+
+test('show tab title after navigation', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof" [selected]
+  `);
+});
+
+test('show multiple tabs', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await page.getByRole('button', { name: 'New Tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof"
+      - tab "about:blank" [selected]
+  `);
+});
+
+test('switch active tab on click', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await page.getByRole('button', { name: 'New Tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof"
+      - tab "about:blank" [selected]
+  `);
+  await page.getByRole('tab', { name: 'Woof-Woof' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof" [selected]
+      - tab "about:blank"
+  `);
+});
+
+test('close tab via close button', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await page.getByRole('button', { name: 'New Tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof"
+      - tab "about:blank" [selected]
+  `);
+  await page.getByRole('tab', { name: 'about:blank' }).getByRole('button', { name: 'Close tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab "Woof-Woof" [selected]
+  `);
+});
+
+test('show no-pages placeholder when all tabs are closed', async ({ cli, page }) => {
+  test.skip(process.platform === 'win32', 'closing the tab breaks following tests on windows, need to investigate');
+  await cli('open');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab /.*/ [selected]
+  `);
+  await page.getByRole('button', { name: 'Close tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - /children: deep-equal
+    - tablist
+  `);
+  await expect(page.locator('#no-pages')).toHaveText('No tabs open');
+});
+
+test('open new tab via new-tab button', async ({ cli, page }) => {
+  await cli('open');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab /.*/ [selected]
+  `);
+  await page.getByRole('button', { name: 'New Tab' }).click();
+  await expect(page.getByRole('tablist')).toMatchAriaSnapshot(`
+    - tablist:
+      - /children: equal
+      - tab /.*/
+      - tab /.*/ [selected]
+  `);
+});
+
+test('update omnibox on navigation', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.getByRole('textbox', { name: 'Search or enter URL' })).toMatchAriaSnapshot(`
+    - textbox "Search or enter URL": /.*\/title\.html/
+  `);
+});
+
+test('display screencast image', async ({ cli, page }) => {
+  await cli('open', 'data:text/html,<body style="background:red"></body>');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+  await expect(page.getByRole('img', { name: 'screencast' })).toHaveAttribute('src', /^data:image\/jpeg;base64,/, { timeout: 15000 });
+});
+
+test('chrome devtools', async ({ cli, page, server, mcpBrowser }) => {
+  test.skip(mcpBrowser === 'firefox' || mcpBrowser === 'webkit');
+
+  await cli('open', server.PREFIX);
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+
+  await page.getByTitle('Show Chrome DevTools').click();
+  const devtools = page.frameLocator('iframe[title="Chrome DevTools"]');
+  await devtools.getByRole('tab', { name: 'Console' }).click();
+
+  await cli('eval', 'console.log("hello-from-cli-show")');
+  await expect(devtools.getByText('hello-from-cli-show')).toBeVisible();
+});
+
+test('chrome devtools on unsupported browsers', async ({ cli, page, server, mcpBrowser }) => {
+  test.skip(mcpBrowser !== 'firefox' && mcpBrowser !== 'webkit');
+
+  await cli('open', server.PREFIX);
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+
+  await expect(page.getByTitle('Pick locator')).toBeVisible();
+  await expect(page.getByTitle('Show Chrome DevTools')).not.toBeVisible();
+});
+
+test('pick locator disable paths', async ({ cli, page, server }) => {
+  await cli('open', server.PREFIX + '/title.html');
+  await page.goto('/');
+  await page.getByRole('link', { name: /default/ }).click();
+
+  // Disable via toolbar toggle.
+  await page.getByTitle('Pick locator').click();
+  await expect(page.getByTitle('Cancel pick locator')).toBeVisible();
+  await expect(page.getByText('Click an element to pick its locator')).toBeVisible();
+
+  await page.getByTitle('Cancel pick locator').click();
+  await expect(page.getByTitle('Pick locator')).toBeVisible();
+  await expect(page.getByText('Click an element to pick its locator')).toBeHidden();
+
+  // Disable via Escape while focused on the screen.
+  await page.getByTitle('Pick locator').click();
+  await expect(page.getByTitle('Cancel pick locator')).toBeVisible();
+  await expect(page.getByText('Click an element to pick its locator')).toBeVisible();
+
+  await page.locator('.screen').click();
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByTitle('Pick locator')).toBeVisible();
+  await expect(page.getByText('Click an element to pick its locator')).toBeHidden();
+});
+
+test('pick locator copies locator to clipboard', async ({ cli, page, server }) => {
+  server.setContent('/pick-locator-target.html', `<div id='picker-target' style='position:fixed; inset:0; background:red;'></div>`, 'text/html');
+
+  await cli('open', server.PREFIX + '/pick-locator-target.html');
+  await page.goto('/');
+  await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+  await page.getByRole('link', { name: /default/ }).click();
+
+  await page.getByTitle('Pick locator').click();
+  await page.waitForTimeout(500); // TODO: replace this with a more robust wait, e.g. on the button being enabled.
+  await page.locator('.screen').click();
+  await expect(page.getByText(/^Copied:/)).toBeVisible();
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+  expect(copied).toContain('#picker-target');
+});
+
+test('show with --port is blocking and does not use singleton', async ({ startCli }) => {
+  const show1 = await startCli('show', '--port=0');
+  await show1.waitForOutput('Listening on ');
+
+  const show2 = await startCli('show', '--port=0');
+  await show2.waitForOutput('Listening on ');
+});