chore: add support for device (#300)

Fixes https://github.com/microsoft/playwright-mcp/issues/294

src/config.ts

@@ -18,11 +18,12 @@ import fs from 'fs';
 import net from 'net';
 import os from 'os';
 import path from 'path';
+import { devices } from 'playwright';
 
 import { sanitizeForFilePath } from './tools/utils';
 
 import type { Config, ToolCapability } from '../config';
-import type { LaunchOptions } from 'playwright';
+import type { BrowserContextOptions, LaunchOptions } from 'playwright';
 
 export type CLIOptions = {
   browser?: string;
@@ -30,6 +31,7 @@ export type CLIOptions = {
   cdpEndpoint?: string;
   executablePath?: string;
   headless?: boolean;
+  device?: string;
   userDataDir?: string;
   port?: number;
   host?: string;
@@ -93,11 +95,14 @@ export async function configFromCLIOptions(cliOptions: CLIOptions): Promise<Conf
   if (browserName === 'chromium')
     (launchOptions as any).webSocketPort = await findFreePort();
 
+  const contextOptions: BrowserContextOptions | undefined = cliOptions.device ? devices[cliOptions.device] : undefined;
+
   return {
     browser: {
       browserName,
       userDataDir: cliOptions.userDataDir ?? await createUserDataDir({ browserName, channel }),
       launchOptions,
+      contextOptions,
       cdpEndpoint: cliOptions.cdpEndpoint,
     },
     server: {

src/context.ts

@@ -306,7 +306,7 @@ ${code.join('\n')}
 async function launchPersistentContext(browserConfig: Config['browser']): Promise<playwright.BrowserContext> {
   try {
     const browserType = browserConfig?.browserName ? playwright[browserConfig.browserName] : playwright.chromium;
-    return await browserType.launchPersistentContext(browserConfig?.userDataDir || '', browserConfig?.launchOptions);
+    return await browserType.launchPersistentContext(browserConfig?.userDataDir || '', { ...browserConfig?.launchOptions, ...browserConfig?.contextOptions });
   } catch (error: any) {
     if (error.message.includes('Executable doesn\'t exist'))
       throw new Error(`Browser specified in your config is not installed. Either install it (likely) or change the config.`);

src/program.ts

@@ -33,6 +33,7 @@ program
     .option('--cdp-endpoint <endpoint>', 'CDP endpoint to connect to.')
     .option('--executable-path <path>', 'Path to the browser executable.')
     .option('--headless', 'Run browser in headless mode, headed by default')
+    .option('--device <device>', 'Device to emulate, for example: "iPhone 15"')
     .option('--user-data-dir <path>', 'Path to the user data directory')
     .option('--port <port>', 'Port to listen on for SSE transport.')
     .option('--host <host>', 'Host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.')