chore: print listening on message in terminal for web trace modes (#23546)

packages/playwright-core/src/cli/program.ts

@@ -285,9 +285,8 @@ program
 program
     .command('show-trace [trace...]')
     .option('-b, --browser <browserType>', 'browser to use, one of cr, chromium, ff, firefox, wk, webkit', 'chromium')
-    .option('-h, --host <host>', 'Host to serve trace on', 'localhost')
+    .option('-h, --host <host>', 'Host to serve trace on; specifying this option opens trace in a browser tab')
-    .option('-p, --port <port>', 'Port to serve trace on', '9322')
+    .option('-p, --port <port>', 'Port to serve trace on, 0 for any free port; specifying this option opens trace in a browser tab')
-    .option('--web', 'Open trace viewer as a PWA in a browser tab')
     .option('--stdin', 'Accept trace URLs over stdin to update the viewer')
     .description('show trace viewer')
     .action(function(traces, options) {
@@ -298,7 +297,13 @@ program
       if (options.browser === 'wk')
         options.browser = 'webkit';
 
-      const openOptions = { headless: false, host: options.host, port: +options.port, isServer: !!options.stdin, openInBrowser: !!options.web };
+      const openOptions = {
+        headless: false,
+        host: options.host,
+        port: +options.port,
+        isServer: !!options.stdin,
+        openInBrowser: options.port !== undefined || options.host !== undefined
+      };
       showTraceViewer(traces, options.browser, openOptions).catch(logErrorAndExit);
     }).addHelpText('afterAll', `
 Examples:

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -119,10 +119,18 @@ async function startTraceViewerServer(traceUrls: string[], options?: Options): P
     params.push('isUnderTest=true');
 
   const { host, port } = options || {};
-  const urlPrefix = await server.start({ preferredPort: port, host });
+  const url = await server.start({ preferredPort: port, host });
   const { app } = options || {};
   const searchQuery = params.length ? '?' + params.join('&') : '';
-  const url = urlPrefix + `/trace/${app || 'index.html'}${searchQuery}`;
+  const urlPath  = `/trace/${app || 'index.html'}${searchQuery}`;
+
+  server.routePath('/', (_, response) => {
+    response.statusCode = 301;
+    response.setHeader('Location', urlPath);
+    response.end();
+    return true;
+  });
+
   return { server, url };
 }
 
@@ -175,6 +183,8 @@ export async function openTraceViewerApp(traceUrls: string[], browserName: strin
 async function openTraceInBrowser(traceUrls: string[], options?: Options) {
   const { url } = await startTraceViewerServer(traceUrls, options);
   // eslint-disable-next-line no-console
+  console.log('\nListening on ' + url);
+  // eslint-disable-next-line no-console
   await open(url, { wait: true }).catch(() => console.log(`Failed to open browser on ${url}`));
 }
 

packages/playwright-test/src/cli.ts

@@ -139,8 +139,8 @@ async function runTests(args: string[], opts: { [key: string]: any }) {
 
   const runner = new Runner(config);
   let status: FullResult['status'];
-  if (opts.ui || opts.uiWeb)
+  if (opts.ui || opts.uiHost || opts.uiPort)
-    status = await runner.uiAllTests(!!opts.uiWeb);
+    status = await runner.uiAllTests({ host: opts.uiHost, port: opts.uiPort ? +opts.uiPort : undefined });
   else if (process.env.PWTEST_WATCH)
     status = await runner.watchAllTests();
   else
@@ -328,7 +328,8 @@ const testOptions: [string, string][] = [
   ['--timeout <timeout>', `Specify test timeout threshold in milliseconds, zero for unlimited (default: ${defaultTimeout})`],
   ['--trace <mode>', `Force tracing mode, can be ${kTraceModes.map(mode => `"${mode}"`).join(', ')}`],
   ['--ui', `Run tests in interactive UI mode`],
-  ['--ui-web', `Open interactive UI mode in a browser tab`],
+  ['--ui-host <host>', 'Host to serve UI on; specifying this option opens UI in a browser tab'],
+  ['--ui-port <port>', 'Port to serve UI on, 0 for any free port; specifying this option opens UI in a browser tab'],
   ['-u, --update-snapshots', `Update snapshots with actual results (default: only create missing snapshots)`],
   ['-j, --workers <workers>', `Number of concurrent workers or percentage of logical CPU cores, use 1 to run in a single worker (default: 50%)`],
   ['-x', `Stop after the first failure`],

packages/playwright-test/src/runner/runner.ts

@@ -107,9 +107,9 @@ export class Runner {
     return await runWatchModeLoop(config);
   }
 
-  async uiAllTests(openInBrowser: boolean): Promise<FullResult['status']> {
+  async uiAllTests(options: { host?: string, port?: number }): Promise<FullResult['status']> {
     const config = this._config;
     webServerPluginsForConfig(config).forEach(p => config.plugins.push({ factory: p }));
-    return await runUIMode(config, openInBrowser);
+    return await runUIMode(config, options);
   }
 }

packages/playwright-test/src/runner/uiMode.ts

@@ -81,7 +81,7 @@ class UIMode {
     return status;
   }
 
-  async showUI(openInBrowser: boolean) {
+  async showUI(options: { host?: string, port?: number }) {
     const exitPromise = new ManualPromise();
     let queue = Promise.resolve();
 
@@ -120,7 +120,9 @@ class UIMode {
       app: 'uiMode.html',
       headless: isUnderTest() && process.env.PWTEST_HEADED_FOR_TEST !== '1',
       transport: this._transport,
-      openInBrowser,
+      host: options.host,
+      port: options.port,
+      openInBrowser: options.host !== undefined || options.port !== undefined,
     });
 
     if (!process.env.PWTEST_DEBUG) {
@@ -210,12 +212,12 @@ class UIMode {
   }
 }
 
-export async function runUIMode(config: FullConfigInternal, openInBrowser: boolean): Promise<FullResult['status']> {
+export async function runUIMode(config: FullConfigInternal, options: { host?: string, port?: number }): Promise<FullResult['status']> {
   const uiMode = new UIMode(config);
   const status = await uiMode.runGlobalSetup();
   if (status !== 'passed')
     return status;
-  await uiMode.showUI(openInBrowser);
+  await uiMode.showUI(options);
   return await uiMode.globalCleanup?.() || 'passed';
 }