Playwright MCP Setup

This project includes Playwright MCP (Model Context Protocol) for AI-assisted browser automation.

What is Playwright MCP?

Playwright MCP allows AI assistants (like Claude) to interact with a real browser through the Model Context Protocol. This enables:

Automated browser testing
Web scraping and data extraction
Visual testing and screenshots
Navigation and interaction with web pages

Setup

All dependencies are already installed:

@playwright/mcp - MCP server for Playwright
@playwright/test - Playwright test framework
playwright - Browser automation library
Chromium browser (downloaded via bunx playwright install)

Configuration

Qwen Code MCP Config (`.qwen/settings.json`)

Qwen Code automatically loads this file on new session start:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless"],
      "timeout": 30000
    }
  }
}

Playwright Config (`playwright.config.ts`)

Standard E2E test configuration with:

Chromium browser
Base URL: http://localhost:3000
Auto-starts dev server for testing

Usage

Start MCP Server

bun run mcp:playwright

This starts the MCP server on port 3000 in headless mode. AI assistants can connect to this server to control the browser.

Run E2E Tests

# Using Playwright's test runner
bunx playwright test

# Using the existing test suite
bun run test:e2e

Install/Update Browsers

# Install all browsers
bunx playwright install

# Install specific browser
bunx playwright install chromium

Integration with AI Assistants

When using an AI assistant that supports MCP:

Start your app: bun run dev
Start the MCP server: bun run mcp:playwright
The AI assistant can now:
- Navigate to your app
- Take screenshots
- Click elements and fill forms
- Test user flows
- Debug UI issues

Available MCP Tools

The Playwright MCP server provides tools for:

browser_navigate - Navigate to a URL
browser_screenshot - Take a screenshot
browser_click - Click an element
browser_type - Type text into an element
browser_select_option - Select dropdown options
browser_hover - Hover over elements
browser_evaluate - Execute JavaScript
browser_snapshot - Get page accessibility snapshot
And more...

Files

mcp.json - MCP server configuration
playwright.config.ts - Playwright test configuration
tests/e2e/ - E2E test files

2.5 KiB Raw Blame History