# 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:
```json
{
  "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
```bash
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
```bash
# Using Playwright's test runner
bunx playwright test

# Using the existing test suite
bun run test:e2e
```

### Install/Update Browsers
```bash
# 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:
1. Start your app: `bun run dev`
2. Start the MCP server: `bun run mcp:playwright`
3. 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