feat: enhance HttpServer and utilities; introduce EXTENSION_INSTALLED_FILENAME constant and improve browser name validation

Author: TheLarkInn

apps/playwright-browser-tunnel/src/HttpServer.ts

@@ -6,6 +6,9 @@ import http from 'node:http';
 import { WebSocketServer, type WebSocket, type AddressInfo } from 'ws';
 
 import type { ITerminal } from '@rushstack/terminal';
+
+const LOCALHOST_IP: string = '127.0.0.1';
+
 /**
  * This HttpServer is used for the localProxyWs WebSocketServer.
  * The purpose is to parse the query params and path for the websocket url to get the
@@ -34,10 +37,12 @@ export class HttpServer {
 
   public listen(): Promise<void> {
     return new Promise((resolve) => {
-      this._server.listen(0, '127.0.0.1', () => {
+      this._server.listen(0, LOCALHOST_IP, () => {
         this._listeningPort = (this._server.address() as AddressInfo).port;
         // This MUST be printed to terminal so VS Code can auto-port forward
-        this._logger.writeLine(`Local proxy HttpServer listening at ws://127.0.0.1:${this._listeningPort}`);
+        this._logger.writeLine(
+          `Local proxy HttpServer listening at ws://${LOCALHOST_IP}:${this._listeningPort}`
+        );
         resolve();
       });
     });
@@ -47,7 +52,7 @@ export class HttpServer {
     if (this._listeningPort === undefined) {
       throw new Error('HttpServer not listening yet');
     }
-    return `ws://127.0.0.1:${this._listeningPort}`;
+    return `ws://${LOCALHOST_IP}:${this._listeningPort}`;
   }
 
   public get wsServer(): WebSocketServer {

apps/playwright-browser-tunnel/src/index.ts

@@ -24,4 +24,4 @@ export type {
   IDisposableTunneledBrowserConnection,
   IDisposableTunneledBrowser
 } from './tunneledBrowserConnection';
-export { isExtensionInstalledAsync } from './utilities';
+export { isExtensionInstalledAsync, EXTENSION_INSTALLED_FILENAME } from './utilities';

apps/playwright-browser-tunnel/src/tunneledBrowserConnection.ts

@@ -13,6 +13,8 @@ import { HttpServer } from './HttpServer';
 
 const { version: playwrightVersion } = playwrightPackageJson;
 
+const SUPPORTED_BROWSER_NAMES: Set<string> = new Set(['chromium', 'firefox', 'webkit']);
+
 interface IHandshake {
   action: 'handshake';
   browserName: BrowserName;
@@ -156,7 +158,7 @@ export async function tunneledBrowserConnection(
           const parsed: URL = new URL(urlString, 'http://localhost');
           logger.writeLine(`Local client connected with query params: ${parsed.searchParams.toString()}`);
           const bName: string | null = parsed.searchParams.get('browser');
-          if (bName && ['chromium', 'firefox', 'webkit'].includes(bName)) {
+          if (bName && SUPPORTED_BROWSER_NAMES.has(bName)) {
             browserName = bName as BrowserName;
           }
           const launchOptionsParam: string | null = parsed.searchParams.get('launchOptions');
@@ -173,7 +175,8 @@ export async function tunneledBrowserConnection(
       }
 
       if (!browserName) {
-        console.error('browser query param required (chromium|firefox|webkit)');
+        const supportedBrowsersString: string = Array.from(SUPPORTED_BROWSER_NAMES).join('|');
+        console.error(`browser query param required (${supportedBrowsersString})`);
         localWs.close();
         return;
       }

apps/playwright-browser-tunnel/src/utilities.ts

@@ -5,6 +5,12 @@ import { tmpdir } from 'node:os';
 
 import { FileSystem } from '@rushstack/node-core-library';
 
+/**
+ * The filename used to indicate that the Playwright on Codespaces extension is installed.
+ * @beta
+ */
+export const EXTENSION_INSTALLED_FILENAME: string = '.playwright-codespaces-extension-installed.txt';
+
 /**
  * Helper to determine if the Playwright on Codespaces extension is installed. This check's for the
  * existence of a well-known file in the OS temp directory.
@@ -14,7 +20,7 @@ export async function isExtensionInstalledAsync(): Promise<boolean> {
   // Read file from os.tempdir() + '/.playwright-codespaces-extension-installed'
   const tempDir: string = tmpdir();
 
-  const extensionInstalledFilePath: string = `${tempDir}/.playwright-codespaces-extension-installed.txt`;
+  const extensionInstalledFilePath: string = `${tempDir}/${EXTENSION_INSTALLED_FILENAME}`;
   const doesExist: boolean = FileSystem.exists(extensionInstalledFilePath);
 
   // check if file exists

common/reviews/api/playwright-browser-tunnel.api.md

@@ -11,6 +11,9 @@ import type { LaunchOptions } from 'playwright-core';
 // @beta
 export type BrowserName = 'chromium' | 'firefox' | 'webkit';
 
+// @beta
+export const EXTENSION_INSTALLED_FILENAME: string;
+
 // @beta
 export interface IDisposableTunneledBrowser {
     [Symbol.asyncDispose]: () => Promise<void>;

vscode-extensions/playwright-on-codespaces-vscode-extension/src/extension.ts

@@ -4,7 +4,11 @@
 import * as os from 'node:os';
 import * as path from 'node:path';
 import * as vscode from 'vscode';
-import { PlaywrightTunnel, type TunnelStatus } from '@rushstack/playwright-browser-tunnel';
+import {
+  PlaywrightTunnel,
+  type TunnelStatus,
+  EXTENSION_INSTALLED_FILENAME
+} from '@rushstack/playwright-browser-tunnel';
 import { Terminal, type ITerminal, type ITerminalProvider } from '@rushstack/terminal';
 
 import { runWorkspaceCommandAsync } from '@rushstack/vscode-shared/lib/runWorkspaceCommandAsync';
@@ -43,15 +47,12 @@ async function writeExtensionInstalledFile(terminal: ITerminal): Promise<void> {
         fileUri = vscode.Uri.from({
           scheme: workspaceFolder.uri.scheme,
           authority: workspaceFolder.uri.authority,
-          path: `${tempDir}/playwright-codespaces-extension-installed.txt`
+          path: `${tempDir}/${EXTENSION_INSTALLED_FILENAME}`
         });
       } else {
         // Fallback if no workspace folder
         fileUri = vscode.Uri.parse(
-          `vscode-remote://${vscode.env.remoteName}${path.posix.join(
-            tempDir,
-            '.playwright-codespaces-extension-installed.txt'
-          )}`
+          `vscode-remote://${vscode.env.remoteName}${path.posix.join(tempDir, EXTENSION_INSTALLED_FILENAME)}`
         );
       }