Add automatic browser installation feature

kartmcad · kartmcad · commit 60c56195e983 · 2025-12-12T12:43:21.000+05:30
- Automatically detects when browsers are not installed
- Runs 'npx playwright install &lt;browser&gt;' automatically on first use
- Handles browser installation for chromium, firefox, and webkit
- Provides clear error messages if auto-installation fails
- Updates README with browser installation information
- No breaking changes - fully backward compatible

Fixes issue where users get 'Executable doesn't exist' error on first run.
Users no longer need to manually run 'npx playwright install' before using the server.
diff --git a/README.md b/README.md
@@ -116,6 +116,39 @@ code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executea
 
 After installation, the ExecuteAutomation Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
 
+## Browser Installation
+
+### Automatic Installation (Recommended)
+
+The Playwright MCP Server **automatically installs browser binaries** when you first use it. When the server detects that a browser is missing, it will:
+
+1. Automatically download and install the required browser (Chromium, Firefox, or WebKit)
+2. Display installation progress in the console
+3. Retry your request once installation completes
+
+**No manual setup required!** Just start using the server, and it handles browser installation for you.
+
+### Manual Installation (Optional)
+
+If you prefer to install browsers manually or encounter any issues with automatic installation:
+
+```bash
+# Install all browsers
+npx playwright install
+
+# Or install specific browsers
+npx playwright install chromium
+npx playwright install firefox
+npx playwright install webkit
+```
+
+### Browser Storage Location
+
+Browsers are installed to:
+- **Windows:** `%USERPROFILE%\AppData\Local\ms-playwright`
+- **macOS:** `~/Library/Caches/ms-playwright`
+- **Linux:** `~/.cache/ms-playwright`
+
 ## Configuration to use Playwright Server
 
 ### Standard Mode (stdio)
diff --git a/src/toolHandler.ts b/src/toolHandler.ts
@@ -4,6 +4,7 @@ import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
 import { BROWSER_TOOLS, API_TOOLS } from './tools.js';
 import type { ToolContext } from './tools/common/types.js';
 import { ActionRecorder } from './tools/codegen/recorder.js';
+import { spawn } from 'child_process';
 import { 
   startCodegenSession,
   endCodegenSession,
@@ -157,6 +158,64 @@ async function registerConsoleMessage(page) {
   });
 }
 
+/**
+ * Attempts to install browsers automatically
+ */
+async function installBrowsers(browserType: string = 'chromium'): Promise<{ success: boolean; message: string }> {
+  return new Promise((resolve) => {
+    console.error(`[Playwright MCP] Attempting to install ${browserType} browser...`);
+    
+    const installProcess = spawn('npx', ['playwright', 'install', browserType], {
+      stdio: ['ignore', 'pipe', 'pipe'],
+      shell: true
+    });
+
+    let output = '';
+    let errorOutput = '';
+
+    installProcess.stdout?.on('data', (data) => {
+      output += data.toString();
+    });
+
+    installProcess.stderr?.on('data', (data) => {
+      errorOutput += data.toString();
+    });
+
+    installProcess.on('close', (code) => {
+      if (code === 0) {
+        console.error(`[Playwright MCP] Successfully installed ${browserType} browser`);
+        resolve({
+          success: true,
+          message: `Successfully installed ${browserType} browser. Please try your request again.`
+        });
+      } else {
+        console.error(`[Playwright MCP] Failed to install browser: ${errorOutput}`);
+        resolve({
+          success: false,
+          message: `Failed to automatically install ${browserType} browser. Please run: npx playwright install ${browserType}`
+        });
+      }
+    });
+
+    installProcess.on('error', (error) => {
+      console.error(`[Playwright MCP] Error during browser installation: ${error.message}`);
+      resolve({
+        success: false,
+        message: `Error during installation: ${error.message}. Please run: npx playwright install ${browserType}`
+      });
+    });
+
+    // Timeout after 2 minutes
+    setTimeout(() => {
+      installProcess.kill();
+      resolve({
+        success: false,
+        message: `Browser installation timed out. Please run manually: npx playwright install ${browserType}`
+      });
+    }, 120000);
+  });
+}
+
 /**
  * Ensures a browser is launched and returns the page
  */
@@ -204,12 +263,36 @@ export async function ensureBrowser(browserSettings?: BrowserSettings) {
       
       const executablePath = process.env.CHROME_EXECUTABLE_PATH;
 
-      browser = await browserInstance.launch({
-        headless,
-        executablePath: executablePath
-      });
-      
-      currentBrowserType = browserType;
+      try {
+        browser = await browserInstance.launch({
+          headless,
+          executablePath: executablePath
+        });
+        
+        currentBrowserType = browserType;
+      } catch (launchError: any) {
+        // Check if error is due to missing browser executable
+        if (launchError.message?.includes("Executable doesn't exist") || 
+            launchError.message?.includes("Failed to launch") ||
+            launchError.message?.includes("browserType.launch")) {
+          
+          console.error(`[Playwright MCP] Browser not found, attempting auto-installation...`);
+          const installResult = await installBrowsers(browserType);
+          
+          if (installResult.success) {
+            // Try launching again after installation
+            browser = await browserInstance.launch({
+              headless,
+              executablePath: executablePath
+            });
+            currentBrowserType = browserType;
+          } else {
+            throw new Error(installResult.message);
+          }
+        } else {
+          throw launchError;
+        }
+      }
 
       // Add cleanup logic when browser is disconnected
       browser.on('disconnected', () => {
@@ -255,6 +338,22 @@ export async function ensureBrowser(browserSettings?: BrowserSettings) {
     
     resetBrowserState();
     
+    // Check if error is due to missing browser, if so attempt install
+    const errorMessage = (error as Error).message;
+    if (errorMessage?.includes("Executable doesn't exist") || 
+        errorMessage?.includes("Failed to launch") ||
+        errorMessage?.includes("browserType.launch")) {
+      
+      const { browserType = 'chromium' } = browserSettings ?? {};
+      console.error(`[Playwright MCP] Browser not found in retry, attempting auto-installation...`);
+      const installResult = await installBrowsers(browserType);
+      
+      if (!installResult.success) {
+        throw new Error(installResult.message);
+      }
+      // If installation successful, continue to retry
+    }
+    
     // Try one more time from scratch
     const { viewport, userAgent, headless = false, browserType = 'chromium' } = browserSettings ?? {};
     
