101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
# 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
|