update readme. show usage with cli first
This commit is contained in:
@@ -20,11 +20,11 @@
|
|||||||
|
|
||||||
1. **Install the Chrome Extension**
|
1. **Install the Chrome Extension**
|
||||||
|
|
||||||
[**Install Extension**](https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe) - Install the [Playwriter MCP Extension](https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe) from the Chrome Web Store (or load it unpacked during development). Pin the extension to your Chrome toolbar for easy access.
|
[**Install Extension**](https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe) from the Chrome Web Store. Pin the extension to your Chrome toolbar for easy access.
|
||||||
|
|
||||||
2. **Connect to a Tab**
|
2. **Connect to a Tab**
|
||||||
|
|
||||||
Click the Playwriter MCP extension icon on any tab you want to control. The icon will turn green when successfully connected.
|
Click the Playwriter extension icon on any tab you want to control. The icon will turn green when successfully connected.
|
||||||
|
|
||||||
**Icon states:**
|
**Icon states:**
|
||||||
- **Gray:** Not connected
|
- **Gray:** Not connected
|
||||||
@@ -32,41 +32,85 @@
|
|||||||
- **Orange badge (...):** Connecting
|
- **Orange badge (...):** Connecting
|
||||||
- **Red badge (!):** Error
|
- **Red badge (!):** Error
|
||||||
|
|
||||||
3. **Add MCP to Your Agent**
|
3. **Add the Skill to Your Agent**
|
||||||
|
|
||||||
Add the following configuration to your MCP client settings (e.g., Claude Desktop's `claude_desktop_config.json`):
|
```bash
|
||||||
|
npx skills add remorses/playwriter
|
||||||
```json
|
|
||||||
{
|
|
||||||
"mcpServers": {
|
|
||||||
"playwriter": {
|
|
||||||
"command": "npx",
|
|
||||||
"args": ["-y", "playwriter@latest"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Or use the following command to automatically add the MCP setting for your client:
|
This gives your AI agent the knowledge to use Playwriter via CLI commands.
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
Once installed, your agent can control the browser:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
playwriter session new # → 1
|
||||||
|
playwriter -s 1 -e "await page.goto('https://example.com')"
|
||||||
|
playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page }))"
|
||||||
|
playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
|
||||||
|
```
|
||||||
|
|
||||||
|
## MCP Setup (Alternative)
|
||||||
|
|
||||||
|
If you prefer using Playwriter as an MCP server instead of the CLI, add this to your MCP client settings:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwriter": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["-y", "playwriter@latest"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Or auto-configure with:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npx -y @playwriter/install-mcp playwriter@latest
|
npx -y @playwriter/install-mcp playwriter@latest
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Restart your MCP client and you're ready to go! Your AI assistant can now control the browser through the extension.
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
### Using the CLI
|
||||||
|
|
||||||
|
The CLI is the recommended way to use Playwriter. Sessions persist state across commands.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Session management
|
||||||
|
playwriter session new # Create new session, outputs ID (e.g., 1)
|
||||||
|
playwriter session list # List active sessions with their state keys
|
||||||
|
playwriter session reset <id> # Reset if connection has issues
|
||||||
|
|
||||||
|
# Execute code
|
||||||
|
playwriter -s 1 -e "await page.goto('https://example.com')"
|
||||||
|
playwriter -s 1 -e "await page.click('button')"
|
||||||
|
playwriter -s 1 -e "console.log(await page.title())"
|
||||||
|
playwriter -s 1 -e "await page.screenshot({ path: 'screenshot.png', scale: 'css' })"
|
||||||
|
playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page }))"
|
||||||
|
```
|
||||||
|
|
||||||
|
Multiline code:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
playwriter -s 1 -e $'
|
||||||
|
const title = await page.title();
|
||||||
|
const url = page.url();
|
||||||
|
console.log({ title, url });
|
||||||
|
'
|
||||||
|
```
|
||||||
|
|
||||||
### Using the MCP
|
### Using the MCP
|
||||||
|
|
||||||
**Important:** Before using the MCP, you must [install](https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe) and enable the extension on at least one tab:
|
If using the MCP instead of CLI, make sure the extension is enabled on at least one tab:
|
||||||
|
|
||||||
1. Pin the Playwriter extension to your Chrome toolbar (click the puzzle icon)
|
1. Pin the Playwriter extension to your Chrome toolbar (click the puzzle icon)
|
||||||
2. Navigate to a tab you want to control
|
2. Navigate to a tab you want to control
|
||||||
3. Click the extension icon - it will turn green when connected
|
3. Click the extension icon - it will turn green when connected
|
||||||
|
|
||||||
Once enabled on one or more tabs, your AI assistant can:
|
Once enabled, your AI assistant can:
|
||||||
|
|
||||||
- Control all enabled tabs through the `execute` tool
|
- Control all enabled tabs through the `execute` tool
|
||||||
- Switch between tabs using playwright's context and page APIs
|
- Switch between tabs using playwright's context and page APIs
|
||||||
|
|||||||
Reference in New Issue
Block a user