cherry-pick(#30853): chore: print friendly localhost address from http server

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

@@ -145,7 +145,7 @@ export async function runTraceViewerApp(traceUrls: string[], browserName: string
   validateTraceUrls(traceUrls);
   const server = await startTraceViewerServer(options);
   await installRootRedirect(server, traceUrls, options);
-  const page = await openTraceViewerApp(server.urlPrefix(), browserName, options);
+  const page = await openTraceViewerApp(server.urlPrefix('precise'), browserName, options);
   if (exitOnClose)
     page.on('close', () => gracefullyProcessExitDoNotHang(0));
   return page;
@@ -155,7 +155,7 @@ export async function runTraceInBrowser(traceUrls: string[], options: TraceViewe
   validateTraceUrls(traceUrls);
   const server = await startTraceViewerServer(options);
   await installRootRedirect(server, traceUrls, options);
-  await openTraceInBrowser(server.urlPrefix());
+  await openTraceInBrowser(server.urlPrefix('human-readable'));
 }
 
 export async function openTraceViewerApp(url: string, browserName: string, options?: TraceViewerAppOptions): Promise<Page> {

packages/playwright-core/src/utils/httpServer.ts

@@ -34,14 +34,14 @@ export type Transport = {
 
 export class HttpServer {
   private _server: http.Server;
-  private _urlPrefix: string;
+  private _urlPrefixPrecise: string = '';
+  private _urlPrefixHumanReadable: string = '';
   private _port: number = 0;
   private _started = false;
   private _routes: { prefix?: string, exact?: string, handler: ServerRouteHandler }[] = [];
   private _wsGuid: string | undefined;
 
-  constructor(address: string = '') {
-    this._urlPrefix = address;
+  constructor() {
     this._server = createHttpServer(this._onRequest.bind(this));
   }
 
@@ -102,7 +102,7 @@ export class HttpServer {
     return this._wsGuid;
   }
 
-  async start(options: { port?: number, preferredPort?: number, host?: string } = {}): Promise<string> {
+  async start(options: { port?: number, preferredPort?: number, host?: string } = {}): Promise<void> {
     assert(!this._started, 'server already started');
     this._started = true;
 
@@ -121,24 +121,23 @@ export class HttpServer {
 
     const address = this._server.address();
     assert(address, 'Could not bind server socket');
-    if (!this._urlPrefix) {
-      if (typeof address === 'string') {
-        this._urlPrefix = address;
-      } else {
-        this._port = address.port;
-        const resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
-        this._urlPrefix = `http://${resolvedHost}:${address.port}`;
-      }
+    if (typeof address === 'string') {
+      this._urlPrefixPrecise = address;
+      this._urlPrefixHumanReadable = address;
+    } else {
+      this._port = address.port;
+      const resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
+      this._urlPrefixPrecise = `http://${resolvedHost}:${address.port}`;
+      this._urlPrefixHumanReadable = `http://${host}:${address.port}`;
     }
-    return this._urlPrefix;
   }
 
   async stop() {
     await new Promise(cb => this._server!.close(cb));
   }
 
-  urlPrefix(): string {
-    return this._urlPrefix;
+  urlPrefix(purpose: 'human-readable' | 'precise'): string {
+    return purpose === 'human-readable' ? this._urlPrefixHumanReadable : this._urlPrefixPrecise;
   }
 
   serveFile(request: http.IncomingMessage, response: http.ServerResponse, absoluteFilePath: string, headers?: { [name: string]: string }): boolean {

packages/playwright/src/reporters/html.ts

@@ -177,7 +177,8 @@ export async function showHTMLReport(reportFolder: string | undefined, host: str
     return;
   }
   const server = startHtmlReportServer(folder);
-  let url = await server.start({ port, host, preferredPort: port ? undefined : 9323 });
+  await server.start({ port, host, preferredPort: port ? undefined : 9323 });
+  let url = server.urlPrefix('human-readable');
   console.log('');
   console.log(colors.cyan(`  Serving HTML report at ${url}. Press Ctrl+C to quit.`));
   if (testId)

packages/playwright/src/runner/testServer.ts

@@ -418,9 +418,9 @@ export async function runUIMode(configFile: string | undefined, options: TraceVi
   return await innerRunTestServer(configLocation, options, async (server: HttpServer, cancelPromise: ManualPromise<void>) => {
     await installRootRedirect(server, [], { ...options, webApp: 'uiMode.html' });
     if (options.host !== undefined || options.port !== undefined) {
-      await openTraceInBrowser(server.urlPrefix());
+      await openTraceInBrowser(server.urlPrefix('human-readable'));
     } else {
-      const page = await openTraceViewerApp(server.urlPrefix(), 'chromium', {
+      const page = await openTraceViewerApp(server.urlPrefix('precise'), 'chromium', {
         headless: isUnderTest() && process.env.PWTEST_HEADED_FOR_TEST !== '1',
         persistentContextOptions: {
           handleSIGINT: false,
@@ -435,7 +435,7 @@ export async function runTestServer(configFile: string | undefined, options: { h
   const configLocation = resolveConfigLocation(configFile);
   return await innerRunTestServer(configLocation, options, async server => {
     // eslint-disable-next-line no-console
-    console.log('Listening on ' + server.urlPrefix().replace('http:', 'ws:') + '/' + server.wsGuid());
+    console.log('Listening on ' + server.urlPrefix('precise').replace('http:', 'ws:') + '/' + server.wsGuid());
   });
 }
 

tests/playwright-test/reporter-blob.spec.ts

@@ -38,8 +38,8 @@ const test = baseTest.extend<{
           await use(async (reportFolder?: string) => {
             reportFolder ??=  test.info().outputPath('playwright-report');
             server = startHtmlReportServer(reportFolder) as HttpServer;
-            const location = await server.start();
-            await page.goto(location);
+            await server.start();
+            await page.goto(server.urlPrefix('precise'));
           });
           await server?.stop();
         }

tests/playwright-test/reporter-html.spec.ts

@@ -29,8 +29,8 @@ const test = baseTest.extend<{ showReport: (reportFolder?: string) => Promise<vo
     await use(async (reportFolder?: string) => {
       reportFolder ??=  testInfo.outputPath('playwright-report');
       server = startHtmlReportServer(reportFolder) as HttpServer;
-      const location = await server.start();
-      await page.goto(location);
+      await server.start();
+      await page.goto(server.urlPrefix('precise'));
     });
     await server?.stop();
   }