upd: qwen
This commit is contained in:
100
PLAYWRIGHT_MCP.md
Normal file
100
PLAYWRIGHT_MCP.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user