MCP server setup enabling coding agents to launch headless browsers, execute end-to-end user flows, inspect DOM trees, and take visual regression screenshots.
Playwright Web Automation & Browser Testing MCP Config
Overview
This Model Context Protocol (MCP) server configuration exposes headless Chromium browser controls to your AI agent. The agent can navigate web pages, click elements, fill forms, inspect DOM states, capture screenshots, and perform automated end-to-end visual verification.
MCP Configuration (mcp_config.json)
{
"mcpServers": {
"playwright-browser": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-playwright"
],
"env": {
"PLAYWRIGHT_HEADLESS": "true",
"PLAYWRIGHT_SCREENSHOT_DIR": "./artifacts/screenshots"
}
}
}
}
Available MCP Tools
browser_navigate({ url }): Navigates to a target URL and waits for DOM content loaded.browser_click({ selector }): Clicks on an interactive DOM element.browser_fill({ selector, text }): Inputs text into a form field or text input.browser_screenshot({ name }): Captures a high-resolution PNG screenshot and saves to artifacts directory.browser_evaluate({ script }): Evaluates arbitrary client JavaScript in page context.
Usage Scenarios
1. Verifying UI Changes: Automatically navigates to local dev server (http://localhost:5000) after editing UI components.
2. E2E Smoke Testing: Runs user signup and checkout flows to verify zero console errors.