diff --git a/README.md b/README.md index 6932df15e..ac565dc58 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,9 @@ node utils/generate-links.js ### Getting started -First, install the Playwright MCP server with your client. A typical configuration looks like this: +First, install the Playwright MCP server with your client. + +**Standard config** works in most of the tools: ```js { @@ -37,20 +39,25 @@ First, install the Playwright MCP server with your client. A typical configurati [Install in VS Code](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [Install in VS Code Insiders](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) -
Install in VS Code +
+Claude Code -You can also install the Playwright MCP server using the VS Code CLI: +Use the Claude Code CLI to add the Playwright MCP server: ```bash -# For VS Code -code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}' +claude mcp add playwright npx @playwright/mcp@latest ``` +
+ +
+Claude Desktop + +Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user), use the standard config above. -After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
-Install in Cursor +Cursor #### Click the button to install: @@ -60,118 +67,53 @@ After installation, the Playwright MCP server will be available for use with you Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, use `command` type with the command `npx @playwright/mcp`. You can also verify config or add command like arguments via clicking `Edit`. -```js -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} -```
-Install in Windsurf +Gemini CLI -Follow Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use following configuration: +Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use the standard config above. -```js -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} -```
-Install in Claude Desktop +Goose -Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user), use following configuration: - -```js -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} -``` -
+#### Click the button to install: -
-Install in Claude Code +[![Install in Goose](https://block.github.io/goose/img/extension-install-dark.svg)](https://block.github.io/goose/extension?cmd=npx&arg=%40playwright%2Fmcp%40latest&id=playwright&name=Playwright&description=Interact%20with%20web%20pages%20through%20structured%20accessibility%20snapshots%20using%20Playwright) -Use the Claude Code CLI to add the Playwright MCP server: +#### Or install manually: -```bash -claude mcp add playwright npx @playwright/mcp@latest -``` +Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @playwright/mcp`. Click "Add Extension".
-Install in Goose - -#### Click the button to install: - -[![Install in Goose](https://block.github.io/goose/img/extension-install-dark.svg)](https://block.github.io/goose/extension?cmd=npx&arg=%40playwright%2Fmcp%40latest&id=playwright&name=Playwright&description=Interact%20with%20web%20pages%20through%20structured%20accessibility%20snapshots%20using%20Playwright) +Qodo Gen -#### Or install manually: +Open [Qodo Gen](https://docs.qodo.ai/qodo-documentation/qodo-gen) chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the standard config above. -Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @playwright/mcp`. Click "Add Extension". +Click Save.
-Install in Qodo Gen +VS Code -Open [Qodo Gen](https://docs.qodo.ai/qodo-documentation/qodo-gen) chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the following configuration: +You can also install the Playwright MCP server using the VS Code CLI: -```js -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} +```bash +# For VS Code +code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}' ``` -Click Save. +After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
-Install in Gemini CLI +Windsurf -Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use following configuration: +Follow Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use the standard config above. -```js -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} -```
### Configuration