chore(cli): blocking show + tests

.github/actions/run-test/action.yml

@@ -55,6 +55,10 @@ runs:
         npx playwright install --with-deps ${{ inputs.browsers-to-install }}
         echo "::endgroup::"
       shell: bash
+    - name: Setup upterm session
+      uses: owenthereal/action-upterm@v1
+      with:
+        limit-access-to-actor: true # Restrict to the user who triggered the workflow
     - name: Run tests
       if: inputs.shell == 'bash'
       run: |

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'}

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();

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();

packages/playwright/src/cli/client/program.ts

@@ -18,6 +18,7 @@
 /* eslint-disable no-restricted-properties */
 
 import { execSync, spawn } from 'child_process';
+import crypto from 'crypto';
 
 import fs from 'fs';
 import os from 'os';
@@ -184,7 +185,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',
@@ -291,9 +302,11 @@ async function findOrInstallDefaultBrowser() {
 
 function daemonSocketPath(clientInfo: ClientInfo, sessionName: string): string {
   const socketName = `${sessionName}.sock`;
-  if (os.platform() === 'win32')
-    return `\\\\.\\pipe\\${clientInfo.workspaceDirHash}-${socketName}`;
   const socketsDir = process.env.PLAYWRIGHT_DAEMON_SOCKETS_DIR || path.join(os.tmpdir(), 'playwright-cli');
+  if (os.platform() === 'win32') {
+    const hash = crypto.createHash('sha1').update(socketsDir).update(clientInfo.workspaceDirHash).digest('hex');
+    return `\\\\.\\pipe\\${hash.substring(0, 16)}-${socketName}`;
+  }
   return path.join(socketsDir, clientInfo.workspaceDirHash, socketName);
 }
 

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: () => ({}),
 });

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;