Official Microsoft Playwright MCP server for browser automation
## Playwright MCP Server: Browser Automation for AI Development The **Playwright MCP Server** brings Microsoft's powerful browser automation framework directly into Google Antigravity. Automate web testing, scrape dynamic content, generate screenshots, and interact with web applications—all through natural language commands from your IDE. ### Why Playwright MCP? Playwright has become the gold standard for browser automation, offering: - **Cross-Browser Support**: Chrome, Firefox, Safari, and Edge - **Modern Web Handling**: JavaScript rendering, SPAs, shadow DOM - **Reliable Automation**: Auto-wait, retry logic, and network interception - **Mobile Emulation**: Test responsive designs on any device - **Visual Testing**: Screenshots, videos, and trace files The Playwright MCP makes these capabilities accessible through conversational AI. ### Key Features #### 1. Web Navigation and Interaction Control browsers with natural language: ``` "Open https://example.com in Chrome" "Click the Sign In button" "Fill in the email field with test@example.com" "Submit the login form and wait for the dashboard" ``` The MCP handles: - Element location using multiple strategies - Automatic waiting for elements to be ready - Handling of dynamic content and animations - Frame and popup management #### 2. Web Scraping Extract data from any website: ``` "Get all product names and prices from this page" "Extract the article content and save as markdown" "Scrape all links from the navigation menu" "Get the table data and convert to JSON" ``` Features include: - Dynamic content extraction after JavaScript execution - Pagination handling for multi-page scraping - Data transformation and formatting - Rate limiting and polite scraping #### 3. Visual Testing Capture and compare visual states: ``` "Take a screenshot of the homepage" "Generate a full-page PDF of this article" "Record a video of the checkout flow" "Compare this page with the baseline screenshot" ``` #### 4. Form Automation Handle complex form interactions: - Text input with validation - Dropdown and select handling - File upload and download - Multi-step wizards - CAPTCHA detection (with warning) ``` "Fill out the registration form with test data" "Upload the file to the document submission form" "Complete the multi-step checkout process" ``` #### 5. Network Control Intercept and modify network requests: - Mock API responses for testing - Block unwanted resources (ads, trackers) - Capture network traffic for debugging - Simulate slow network conditions ``` "Block all image requests to speed up the test" "Mock the /api/users endpoint with test data" "Log all XHR requests made by the page" ``` ### Configuration Set up Playwright MCP: ```json { "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@anthropic/mcp-server-playwright"], "env": { "PLAYWRIGHT_BROWSER": "chromium", "PLAYWRIGHT_HEADLESS": "true" } } } } ``` ### Browser Options Configure browser behavior: - **chromium**: Fastest, most features - **firefox**: Good for cross-browser testing - **webkit**: Safari testing on any platform ```json { "env": { "PLAYWRIGHT_BROWSER": "firefox", "PLAYWRIGHT_HEADLESS": "false", "PLAYWRIGHT_SLOW_MO": "100" } } ``` ### Common Workflows #### End-to-End Testing ``` 1. "Open our staging site" 2. "Log in as a test user" 3. "Navigate to the products page" 4. "Add the first item to cart" 5. "Complete checkout with test card" 6. "Verify the order confirmation appears" ``` #### Content Extraction ``` 1. "Open the competitor pricing page" 2. "Wait for the product grid to load" 3. "Extract all product names and prices" 4. "Save the data as a CSV file" ``` #### Visual Regression Testing ``` 1. "Take baseline screenshots of all main pages" 2. "Deploy new version" 3. "Take new screenshots" 4. "Compare and highlight differences" ``` ### Best Practices 1. **Use Specific Selectors**: Prefer data-testid over CSS classes 2. **Wait Properly**: Let Playwright auto-wait instead of fixed delays 3. **Handle Errors**: Expect elements to sometimes not exist 4. **Clean Up**: Close browsers after use to free resources 5. **Respect Robots.txt**: Don't scrape sites that prohibit it ### Mobile Testing Emulate any mobile device: ``` "Open the site as an iPhone 14" "Test the responsive menu on a tablet" "Check touch interactions on mobile" ``` Device presets include: - iPhone 12/13/14/15 series - iPad and iPad Pro - Pixel phones - Galaxy devices - Custom viewports ### Authentication Handling Save and reuse authentication state: ``` "Log in and save the session" "Load the saved session for testing" "Test as an authenticated user" ``` ### Debugging When tests fail, Playwright provides: - **Trace Files**: Step-by-step execution replay - **Screenshots**: Automatic failure captures - **Console Logs**: Browser console output - **Network Logs**: All requests and responses ``` "Show me what failed in the last test" "Open the trace viewer for debugging" ``` ### Performance Testing Measure page performance: ``` "Measure the page load time" "Get Core Web Vitals metrics" "Profile JavaScript execution" ``` ### Integration with CI/CD Playwright MCP works in automated pipelines: - Headless mode for CI environments - Docker-compatible execution - Parallel test execution - Report generation The Playwright MCP Server transforms browser automation into a conversational experience, making web testing and scraping accessible to developers at any skill level.
{
"mcpServers": {
"playwright": {
"mcpServers": {
"playwright": {
"args": [
"-y",
"@playwright/mcp@latest"
],
"command": "npx"
}
}
}
}
}