feat: add comprehensive device emulation with geolocation, locale, timezone, permissions, and colorScheme

- Added browser_list_devices tool to show 143+ available device profiles organized by category (iPhone, iPad, Pixel, Galaxy, Desktop, Other)
- Enhanced browser_configure tool with device emulation using Playwright's device descriptors database
- Added support for geolocation coordinates with accuracy settings
- Implemented locale and timezone configuration for internationalization testing
- Added colorScheme preference (light/dark/no-preference) for accessibility testing
- Included permissions management for various browser APIs (geolocation, notifications, camera, microphone)
- Device emulation properly overrides individual viewport/userAgent settings when specified
- All context options are properly applied and browser context is recreated with new settings

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/context.ts

@@ -16,6 +16,7 @@
 
 import debug from 'debug';
 import * as playwright from 'playwright';
+import { devices } from 'playwright';
 
 import { logUnhandledError } from './log.js';
 import { Tab } from './tab.js';
@@ -341,6 +342,12 @@ export class Context {
     headless?: boolean;
     viewport?: { width: number; height: number };
     userAgent?: string;
+    device?: string;
+    geolocation?: { latitude: number; longitude: number; accuracy?: number };
+    locale?: string;
+    timezone?: string;
+    colorScheme?: 'light' | 'dark' | 'no-preference';
+    permissions?: string[];
   }): Promise<void> {
     const currentConfig = { ...this.config };
     
@@ -348,12 +355,53 @@ export class Context {
     if (changes.headless !== undefined) {
       currentConfig.browser.launchOptions.headless = changes.headless;
     }
+    
+    // Handle device emulation - this overrides individual viewport/userAgent settings
+    if (changes.device) {
+      if (!devices[changes.device]) {
+        throw new Error(`Unknown device: ${changes.device}`);
+      }
+      const deviceConfig = devices[changes.device];
+      
+      // Apply all device properties to context options
+      currentConfig.browser.contextOptions = {
+        ...currentConfig.browser.contextOptions,
+        ...deviceConfig,
+      };
+    } else {
+      // Apply individual settings only if no device is specified
       if (changes.viewport) {
         currentConfig.browser.contextOptions.viewport = changes.viewport;
       }
       if (changes.userAgent) {
         currentConfig.browser.contextOptions.userAgent = changes.userAgent;
       }
+    }
+
+    // Apply additional context options
+    if (changes.geolocation) {
+      currentConfig.browser.contextOptions.geolocation = {
+        latitude: changes.geolocation.latitude,
+        longitude: changes.geolocation.longitude,
+        accuracy: changes.geolocation.accuracy || 100
+      };
+    }
+    
+    if (changes.locale) {
+      currentConfig.browser.contextOptions.locale = changes.locale;
+    }
+    
+    if (changes.timezone) {
+      currentConfig.browser.contextOptions.timezoneId = changes.timezone;
+    }
+    
+    if (changes.colorScheme) {
+      currentConfig.browser.contextOptions.colorScheme = changes.colorScheme;
+    }
+    
+    if (changes.permissions) {
+      currentConfig.browser.contextOptions.permissions = changes.permissions;
+    }
 
     // Store the modified config
     (this as any).config = currentConfig;

src/tools/configure.ts

@@ -15,6 +15,7 @@
  */
 
 import { z } from 'zod';
+import { devices } from 'playwright';
 import { defineTool } from './tool.js';
 import type { Context } from '../context.js';
 import type { Response } from '../response.js';
@@ -26,15 +27,79 @@ const configureSchema = z.object({
     height: z.number(),
   }).optional().describe('Browser viewport size'),
   userAgent: z.string().optional().describe('User agent string for the browser'),
+  device: z.string().optional().describe('Device to emulate (e.g., "iPhone 13", "iPad", "Pixel 5"). Use browser_list_devices to see available devices.'),
+  geolocation: z.object({
+    latitude: z.number().min(-90).max(90),
+    longitude: z.number().min(-180).max(180),
+    accuracy: z.number().min(0).optional().describe('Accuracy in meters (default: 100)')
+  }).optional().describe('Set geolocation coordinates'),
+  locale: z.string().optional().describe('Browser locale (e.g., "en-US", "fr-FR", "ja-JP")'),
+  timezone: z.string().optional().describe('Timezone ID (e.g., "America/New_York", "Europe/London", "Asia/Tokyo")'),
+  colorScheme: z.enum(['light', 'dark', 'no-preference']).optional().describe('Preferred color scheme'),
+  permissions: z.array(z.string()).optional().describe('Permissions to grant (e.g., ["geolocation", "notifications", "camera", "microphone"])')
 });
 
+const listDevicesSchema = z.object({});
+
 export default [
+  defineTool({
+    capability: 'core',
+    schema: {
+      name: 'browser_list_devices',
+      title: 'List available devices for emulation',
+      description: 'Get a list of all available device emulation profiles including mobile phones, tablets, and desktop browsers. Each device includes viewport, user agent, and capabilities information.',
+      inputSchema: listDevicesSchema,
+      type: 'readOnly',
+    },
+    handle: async (context: Context, params: z.output<typeof listDevicesSchema>, response: Response) => {
+      try {
+        const deviceList = Object.keys(devices).sort();
+        const deviceCount = deviceList.length;
+        
+        // Organize devices by category for better presentation
+        const categories = {
+          'iPhone': deviceList.filter(d => d.includes('iPhone')),
+          'iPad': deviceList.filter(d => d.includes('iPad')),
+          'Pixel': deviceList.filter(d => d.includes('Pixel')),
+          'Galaxy': deviceList.filter(d => d.includes('Galaxy')),
+          'Desktop': deviceList.filter(d => d.includes('Desktop')),
+          'Other': deviceList.filter(d => 
+            !d.includes('iPhone') && 
+            !d.includes('iPad') && 
+            !d.includes('Pixel') && 
+            !d.includes('Galaxy') && 
+            !d.includes('Desktop')
+          )
+        };
+        
+        let result = `Available devices for emulation (${deviceCount} total):\n\n`;
+        
+        for (const [category, deviceNames] of Object.entries(categories)) {
+          if (deviceNames.length > 0) {
+            result += `**${category}:**\n`;
+            deviceNames.forEach(device => {
+              const deviceInfo = devices[device];
+              result += `• ${device} - ${deviceInfo.viewport.width}x${deviceInfo.viewport.height}${deviceInfo.isMobile ? ' (mobile)' : ''}${deviceInfo.hasTouch ? ' (touch)' : ''}\n`;
+            });
+            result += '\n';
+          }
+        }
+        
+        result += 'Use browser_configure with the "device" parameter to emulate any of these devices.';
+        
+        response.addResult(result);
+        
+      } catch (error) {
+        throw new Error(`Failed to list devices: ${error}`);
+      }
+    },
+  }),
   defineTool({
     capability: 'core',
     schema: {
       name: 'browser_configure',
       title: 'Configure browser settings',
-      description: 'Change browser configuration settings like headless/headed mode, viewport size, or user agent for subsequent operations. This will close the current browser and restart it with new settings.',
+      description: 'Change browser configuration settings like headless/headed mode, viewport size, user agent, device emulation, geolocation, locale, timezone, color scheme, or permissions for subsequent operations. This will close the current browser and restart it with new settings.',
       inputSchema: configureSchema,
       type: 'destructive',
     },
@@ -65,6 +130,33 @@ export default [
           }
         }
         
+        if (params.device) {
+          if (!devices[params.device]) {
+            throw new Error(`Unknown device: ${params.device}. Use browser_list_devices to see available devices.`);
+          }
+          changes.push(`device: emulating ${params.device}`);
+        }
+        
+        if (params.geolocation) {
+          changes.push(`geolocation: ${params.geolocation.latitude}, ${params.geolocation.longitude} (±${params.geolocation.accuracy || 100}m)`);
+        }
+        
+        if (params.locale) {
+          changes.push(`locale: ${params.locale}`);
+        }
+        
+        if (params.timezone) {
+          changes.push(`timezone: ${params.timezone}`);
+        }
+        
+        if (params.colorScheme) {
+          changes.push(`colorScheme: ${params.colorScheme}`);
+        }
+        
+        if (params.permissions && params.permissions.length > 0) {
+          changes.push(`permissions: ${params.permissions.join(', ')}`);
+        }
+        
         if (changes.length === 0) {
           response.addResult('No configuration changes detected. Current settings remain the same.');
           return;
@@ -75,6 +167,12 @@ export default [
           headless: params.headless,
           viewport: params.viewport,
           userAgent: params.userAgent,
+          device: params.device,
+          geolocation: params.geolocation,
+          locale: params.locale,
+          timezone: params.timezone,
+          colorScheme: params.colorScheme,
+          permissions: params.permissions,
         });
         
         response.addResult(`Browser configuration updated successfully:\n${changes.map(c => `• ${c}`).join('\n')}\n\nThe browser has been restarted with the new settings.`);