mirror of
https://github.com/microsoft/playwright-mcp.git
synced 2026-02-02 08:33:39 +00:00
Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b4e016a0b8 | ||
|
|
e17bf17dff | ||
|
|
7ee5c87a4b | ||
|
|
2817952d0d | ||
|
|
fb900a8827 | ||
|
|
29e532687c | ||
|
|
d149b89889 | ||
|
|
1caecd00c7 | ||
|
|
9657b58e17 | ||
|
|
8dfea1c67f | ||
|
|
a86b580797 | ||
|
|
927e570c18 | ||
|
|
24e68fa41d | ||
|
|
e50322731b | ||
|
|
711089d261 | ||
|
|
4a7be8de75 | ||
|
|
1523338246 | ||
|
|
08bd91d119 | ||
|
|
ef83729796 |
47
.github/workflows/publish-canary.yml
vendored
47
.github/workflows/publish-canary.yml
vendored
@@ -1,47 +0,0 @@
|
|||||||
name: Publish Canary
|
|
||||||
on:
|
|
||||||
schedule:
|
|
||||||
- cron: '0 8 * * *'
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
publish-canary:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
id-token: write # Needed for npm provenance
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
- uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 18
|
|
||||||
registry-url: https://registry.npmjs.org/
|
|
||||||
|
|
||||||
- name: Get current date
|
|
||||||
id: date
|
|
||||||
run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Get current version
|
|
||||||
id: version
|
|
||||||
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Set canary version
|
|
||||||
id: canary-version
|
|
||||||
run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Update package.json version
|
|
||||||
run: |
|
|
||||||
npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
|
|
||||||
|
|
||||||
- run: npm ci
|
|
||||||
- run: npx playwright install --with-deps
|
|
||||||
- run: npm run lint
|
|
||||||
- run: npm run ctest
|
|
||||||
|
|
||||||
- name: Publish to npm with next tag
|
|
||||||
run: npm publish --tag next --provenance
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
||||||
|
|
||||||
- name: Reset package.json version
|
|
||||||
run: git checkout -- package.json
|
|
||||||
74
.github/workflows/publish.yml
vendored
74
.github/workflows/publish.yml
vendored
@@ -1,35 +1,82 @@
|
|||||||
name: Publish
|
name: Publish
|
||||||
on:
|
on:
|
||||||
|
workflow_dispatch:
|
||||||
|
schedule:
|
||||||
|
- cron: '0 8 * * *'
|
||||||
release:
|
release:
|
||||||
types: [published]
|
types: [published]
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
publish-npm:
|
publish-canary-npm:
|
||||||
|
if: github.event.schedule || github.event_name == 'workflow_dispatch'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
id-token: write # Needed for npm provenance
|
id-token: write # Required for OIDC npm publishing
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v5
|
||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 20
|
||||||
registry-url: https://registry.npmjs.org/
|
registry-url: https://registry.npmjs.org/
|
||||||
|
# Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
|
||||||
|
- name: Update npm
|
||||||
|
run: npm install -g npm@latest
|
||||||
|
|
||||||
|
- name: Get current date
|
||||||
|
id: date
|
||||||
|
run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Get current version
|
||||||
|
id: version
|
||||||
|
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Set canary version
|
||||||
|
id: canary-version
|
||||||
|
run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Update package.json version
|
||||||
|
run: |
|
||||||
|
npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
|
||||||
|
|
||||||
- run: npm ci
|
- run: npm ci
|
||||||
- run: npx playwright install --with-deps
|
- run: npx playwright install --with-deps
|
||||||
- run: npm run lint
|
- run: npm run lint
|
||||||
- run: npm run ctest
|
- run: npm run ctest
|
||||||
- run: npm publish --provenance
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
||||||
|
|
||||||
publish-docker:
|
- name: Publish to npm with next tag
|
||||||
|
run: npm publish --tag next
|
||||||
|
|
||||||
|
publish-release-npm:
|
||||||
|
if: github.event_name == 'release'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
id-token: write # Required for OIDC npm publishing
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v5
|
||||||
|
- uses: actions/setup-node@v5
|
||||||
|
with:
|
||||||
|
node-version: 20
|
||||||
|
registry-url: https://registry.npmjs.org/
|
||||||
|
# Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
|
||||||
|
- name: Update npm
|
||||||
|
run: npm install -g npm@latest
|
||||||
|
- run: npm ci
|
||||||
|
- run: npx playwright install --with-deps
|
||||||
|
- run: npm run lint
|
||||||
|
- run: npm run ctest
|
||||||
|
- run: npm publish
|
||||||
|
|
||||||
|
publish-release-docker:
|
||||||
|
if: github.event_name == 'release'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
id-token: write # Needed for OIDC login to Azure
|
id-token: write # Needed for OIDC login to Azure
|
||||||
environment: allow-publishing-docker-to-acr
|
environment: allow-publishing-docker-to-acr
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- name: Set up QEMU # Needed for multi-platform builds (e.g., arm64 on amd64 runner)
|
- name: Set up QEMU # Needed for multi-platform builds (e.g., arm64 on amd64 runner)
|
||||||
uses: docker/setup-qemu-action@v3
|
uses: docker/setup-qemu-action@v3
|
||||||
- name: Set up Docker Buildx # Needed for multi-platform builds
|
- name: Set up Docker Buildx # Needed for multi-platform builds
|
||||||
@@ -68,13 +115,14 @@ jobs:
|
|||||||
attach_eol_manifest $tag
|
attach_eol_manifest $tag
|
||||||
done
|
done
|
||||||
|
|
||||||
package-extension:
|
package-release-extension:
|
||||||
|
if: github.event_name == 'release'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: write # Needed to upload release assets
|
contents: write # Needed to upload release assets
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v5
|
||||||
with:
|
with:
|
||||||
node-version: 20
|
node-version: 20
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|||||||
92
README.md
92
README.md
@@ -38,6 +38,31 @@ First, install the Playwright MCP server with your client.
|
|||||||
|
|
||||||
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="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) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](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)
|
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="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) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](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)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Amp</summary>
|
||||||
|
|
||||||
|
Add via the Amp VS Code extension settings screen or by updating your settings.json file:
|
||||||
|
|
||||||
|
```json
|
||||||
|
"amp.mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": [
|
||||||
|
"@playwright/mcp@latest"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Amp CLI Setup:**
|
||||||
|
|
||||||
|
Add via the `amp mcp add`command below
|
||||||
|
|
||||||
|
```bash
|
||||||
|
amp mcp add playwright -- npx @playwright/mcp@latest
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Claude Code</summary>
|
<summary>Claude Code</summary>
|
||||||
@@ -165,6 +190,27 @@ code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@la
|
|||||||
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
|
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Warp</summary>
|
||||||
|
|
||||||
|
Go to `Settings` -> `AI` -> `Manage MCP Servers` -> `+ Add` to [add an MCP Server](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server). Use the standard config above.
|
||||||
|
|
||||||
|
Alternatively, use the slash command `/add-mcp` in the Warp prompt and paste the standard config from above:
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": [
|
||||||
|
"@playwright/mcp@latest"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Windsurf</summary>
|
<summary>Windsurf</summary>
|
||||||
|
|
||||||
@@ -180,6 +226,10 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
|
|
||||||
```
|
```
|
||||||
> npx @playwright/mcp@latest --help
|
> npx @playwright/mcp@latest --help
|
||||||
|
--allowed-hosts <hosts...> comma-separated list of hosts this
|
||||||
|
server is allowed to serve from.
|
||||||
|
Defaults to the host the server is bound
|
||||||
|
to. Pass '*' to disable the host check.
|
||||||
--allowed-origins <origins> semicolon-separated list of origins to
|
--allowed-origins <origins> semicolon-separated list of origins to
|
||||||
allow the browser to request. Default is
|
allow the browser to request. Default is
|
||||||
to allow all.
|
to allow all.
|
||||||
@@ -217,6 +267,11 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
localhost. Use 0.0.0.0 to bind to all
|
localhost. Use 0.0.0.0 to bind to all
|
||||||
interfaces.
|
interfaces.
|
||||||
--ignore-https-errors ignore https errors
|
--ignore-https-errors ignore https errors
|
||||||
|
--init-script <path...> path to JavaScript file to add as an
|
||||||
|
initialization script. The script will
|
||||||
|
be evaluated in every page before any of
|
||||||
|
the page's scripts. Can be specified
|
||||||
|
multiple times.
|
||||||
--isolated keep the browser profile in memory, do
|
--isolated keep the browser profile in memory, do
|
||||||
not save it to disk.
|
not save it to disk.
|
||||||
--image-responses <mode> whether to send image responses to the
|
--image-responses <mode> whether to send image responses to the
|
||||||
@@ -236,10 +291,17 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
session into the output directory.
|
session into the output directory.
|
||||||
--save-trace Whether to save the Playwright Trace of
|
--save-trace Whether to save the Playwright Trace of
|
||||||
the session into the output directory.
|
the session into the output directory.
|
||||||
|
--save-video <size> Whether to save the video of the session
|
||||||
|
into the output directory. For example
|
||||||
|
"--save-video=800x600"
|
||||||
--secrets <path> path to a file containing secrets in the
|
--secrets <path> path to a file containing secrets in the
|
||||||
dotenv format
|
dotenv format
|
||||||
|
--shared-browser-context reuse the same browser context between
|
||||||
|
all connected HTTP clients.
|
||||||
--storage-state <path> path to the storage state file for
|
--storage-state <path> path to the storage state file for
|
||||||
isolated sessions.
|
isolated sessions.
|
||||||
|
--test-id-attribute <attribute> specify the attribute to use for test
|
||||||
|
ids, defaults to "data-testid"
|
||||||
--timeout-action <timeout> specify action timeout in milliseconds,
|
--timeout-action <timeout> specify action timeout in milliseconds,
|
||||||
defaults to 5000ms
|
defaults to 5000ms
|
||||||
--timeout-navigation <timeout> specify navigation timeout in
|
--timeout-navigation <timeout> specify navigation timeout in
|
||||||
@@ -249,7 +311,7 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
specified, a temporary directory will be
|
specified, a temporary directory will be
|
||||||
created.
|
created.
|
||||||
--viewport-size <size> specify browser viewport size in pixels,
|
--viewport-size <size> specify browser viewport size in pixels,
|
||||||
for example "1280, 720"
|
for example "1280x720"
|
||||||
```
|
```
|
||||||
|
|
||||||
<!--- End of options generated section -->
|
<!--- End of options generated section -->
|
||||||
@@ -420,6 +482,19 @@ And then in MCP client config, set the `url` to the HTTP endpoint:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Or If you prefer to run the container as a long-lived service instead of letting the MCP client spawn it, use:
|
||||||
|
|
||||||
|
```
|
||||||
|
docker run -d -i --rm --init --pull=always \
|
||||||
|
--entrypoint node \
|
||||||
|
--name playwright \
|
||||||
|
-p 8931:8931 \
|
||||||
|
mcr.microsoft.com/playwright/mcp \
|
||||||
|
cli.js --headless --browser chromium --no-sandbox --port 8931
|
||||||
|
```
|
||||||
|
|
||||||
|
The server will listen on host port **8931** and can be reached by any MCP client.
|
||||||
|
|
||||||
You can build the Docker image yourself.
|
You can build the Docker image yourself.
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -475,14 +550,15 @@ http.createServer(async (req, res) => {
|
|||||||
- Title: Close browser
|
- Title: Close browser
|
||||||
- Description: Close the page
|
- Description: Close the page
|
||||||
- Parameters: None
|
- Parameters: None
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
|
|
||||||
- **browser_console_messages**
|
- **browser_console_messages**
|
||||||
- Title: Get console messages
|
- Title: Get console messages
|
||||||
- Description: Returns all console messages
|
- Description: Returns all console messages
|
||||||
- Parameters: None
|
- Parameters:
|
||||||
|
- `onlyErrors` (boolean, optional): Only return error messages
|
||||||
- Read-only: **true**
|
- Read-only: **true**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
@@ -544,7 +620,7 @@ http.createServer(async (req, res) => {
|
|||||||
- Parameters:
|
- Parameters:
|
||||||
- `element` (string): Human-readable element description used to obtain permission to interact with the element
|
- `element` (string): Human-readable element description used to obtain permission to interact with the element
|
||||||
- `ref` (string): Exact target element reference from the page snapshot
|
- `ref` (string): Exact target element reference from the page snapshot
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
|
|
||||||
@@ -561,7 +637,7 @@ http.createServer(async (req, res) => {
|
|||||||
- Title: Go back
|
- Title: Go back
|
||||||
- Description: Go back to the previous page
|
- Description: Go back to the previous page
|
||||||
- Parameters: None
|
- Parameters: None
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
|
|
||||||
@@ -588,7 +664,7 @@ http.createServer(async (req, res) => {
|
|||||||
- Parameters:
|
- Parameters:
|
||||||
- `width` (number): Width of the browser window
|
- `width` (number): Width of the browser window
|
||||||
- `height` (number): Height of the browser window
|
- `height` (number): Height of the browser window
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
|
|
||||||
@@ -644,7 +720,7 @@ http.createServer(async (req, res) => {
|
|||||||
- `time` (number, optional): The time to wait in seconds
|
- `time` (number, optional): The time to wait in seconds
|
||||||
- `text` (string, optional): The text to wait for
|
- `text` (string, optional): The text to wait for
|
||||||
- `textGone` (string, optional): The text to wait for to disappear
|
- `textGone` (string, optional): The text to wait for to disappear
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -712,7 +788,7 @@ http.createServer(async (req, res) => {
|
|||||||
- `element` (string): Human-readable element description used to obtain permission to interact with the element
|
- `element` (string): Human-readable element description used to obtain permission to interact with the element
|
||||||
- `x` (number): X coordinate
|
- `x` (number): X coordinate
|
||||||
- `y` (number): Y coordinate
|
- `y` (number): Y coordinate
|
||||||
- Read-only: **true**
|
- Read-only: **false**
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
|||||||
33
config.d.ts
vendored
33
config.d.ts
vendored
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
import type * as playwright from 'playwright';
|
import type * as playwright from 'playwright';
|
||||||
|
|
||||||
export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'verify';
|
export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'testing' | 'tracing';
|
||||||
|
|
||||||
export type Config = {
|
export type Config = {
|
||||||
/**
|
/**
|
||||||
@@ -68,6 +68,12 @@ export type Config = {
|
|||||||
* Remote endpoint to connect to an existing Playwright server.
|
* Remote endpoint to connect to an existing Playwright server.
|
||||||
*/
|
*/
|
||||||
remoteEndpoint?: string;
|
remoteEndpoint?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Paths to JavaScript files to add as initialization scripts.
|
||||||
|
* The scripts will be evaluated in every page before any of the page's scripts.
|
||||||
|
*/
|
||||||
|
initScript?: string[];
|
||||||
},
|
},
|
||||||
|
|
||||||
server?: {
|
server?: {
|
||||||
@@ -80,6 +86,12 @@ export type Config = {
|
|||||||
* The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
|
* The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
|
||||||
*/
|
*/
|
||||||
host?: string;
|
host?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The hosts this server is allowed to serve from. Defaults to the host server is bound to.
|
||||||
|
* This is not for CORS, but rather for the DNS rebinding protection.
|
||||||
|
*/
|
||||||
|
allowedHosts?: string[];
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -100,6 +112,19 @@ export type Config = {
|
|||||||
*/
|
*/
|
||||||
saveTrace?: boolean;
|
saveTrace?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If specified, saves the Playwright video of the session into the output directory.
|
||||||
|
*/
|
||||||
|
saveVideo?: {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reuse the same browser context between all connected HTTP clients.
|
||||||
|
*/
|
||||||
|
sharedBrowserContext?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Secrets are used to prevent LLM from getting sensitive data while
|
* Secrets are used to prevent LLM from getting sensitive data while
|
||||||
* automating scenarios such as authentication.
|
* automating scenarios such as authentication.
|
||||||
@@ -124,6 +149,11 @@ export type Config = {
|
|||||||
blockedOrigins?: string[];
|
blockedOrigins?: string[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the attribute to use for test ids, defaults to "data-testid".
|
||||||
|
*/
|
||||||
|
testIdAttribute?: string;
|
||||||
|
|
||||||
timeouts?: {
|
timeouts?: {
|
||||||
/*
|
/*
|
||||||
* Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms.
|
* Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms.
|
||||||
@@ -141,3 +171,4 @@ export type Config = {
|
|||||||
*/
|
*/
|
||||||
imageResponses?: 'allow' | 'omit';
|
imageResponses?: 'allow' | 'omit';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "Playwright MCP Bridge",
|
"name": "Playwright MCP Bridge",
|
||||||
"version": "0.0.38",
|
"version": "0.0.42",
|
||||||
"description": "Share browser tabs with Playwright MCP server",
|
"description": "Share browser tabs with Playwright MCP server",
|
||||||
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9nMS2b0WCohjVHPGb8D9qAdkbIngDqoAjTeSccHJijgcONejge+OJxOQOMLu7b0ovt1c9BiEJa5JcpM+EHFVGL1vluBxK71zmBy1m2f9vZF3HG0LSCp7YRkum9rAIEthDwbkxx6XTvpmAY5rjFa/NON6b9Hlbo+8peUSkoOK7HTwYnnI36asZ9eUTiveIf+DMPLojW2UX33vDWG2UKvMVDewzclb4+uLxAYshY7Mx8we/b44xu+Anb/EBLKjOPk9Yh541xJ5Ozc8EiP/5yxOp9c/lRiYUHaRW+4r0HKZyFt0eZ52ti2iM4Nfk7jRXR7an3JPsUIf5deC/1cVM/+1ZQIDAQAB",
|
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9nMS2b0WCohjVHPGb8D9qAdkbIngDqoAjTeSccHJijgcONejge+OJxOQOMLu7b0ovt1c9BiEJa5JcpM+EHFVGL1vluBxK71zmBy1m2f9vZF3HG0LSCp7YRkum9rAIEthDwbkxx6XTvpmAY5rjFa/NON6b9Hlbo+8peUSkoOK7HTwYnnI36asZ9eUTiveIf+DMPLojW2UX33vDWG2UKvMVDewzclb4+uLxAYshY7Mx8we/b44xu+Anb/EBLKjOPk9Yh541xJ5Ozc8EiP/5yxOp9c/lRiYUHaRW+4r0HKZyFt0eZ52ti2iM4Nfk7jRXR7an3JPsUIf5deC/1cVM/+1ZQIDAQAB",
|
||||||
"permissions": [
|
"permissions": [
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp-extension",
|
"name": "@playwright/mcp-extension",
|
||||||
"version": "0.0.38",
|
"version": "0.0.42",
|
||||||
"description": "Playwright MCP Browser Extension",
|
"description": "Playwright MCP Browser Extension",
|
||||||
"private": true,
|
"private": true,
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|||||||
@@ -68,3 +68,75 @@
|
|||||||
.auth-token-refresh:not(:disabled):hover {
|
.auth-token-refresh:not(:disabled):hover {
|
||||||
background-color: var(--color-btn-selected-bg);
|
background-color: var(--color-btn-selected-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.auth-token-example-section {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #656d76;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-toggle:hover {
|
||||||
|
color: #1f2328;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron.expanded {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron .octicon {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-content {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-description {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #656d76;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-config {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-code {
|
||||||
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #1f2328;
|
||||||
|
white-space: pre;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ import './authToken.css';
|
|||||||
|
|
||||||
export const AuthTokenSection: React.FC<{}> = ({}) => {
|
export const AuthTokenSection: React.FC<{}> = ({}) => {
|
||||||
const [authToken, setAuthToken] = useState<string>(getOrCreateAuthToken);
|
const [authToken, setAuthToken] = useState<string>(getOrCreateAuthToken);
|
||||||
|
const [isExampleExpanded, setIsExampleExpanded] = useState<boolean>(false);
|
||||||
|
|
||||||
const onRegenerateToken = useCallback(() => {
|
const onRegenerateToken = useCallback(() => {
|
||||||
const newToken = generateAuthToken();
|
const newToken = generateAuthToken();
|
||||||
@@ -28,20 +29,69 @@ export const AuthTokenSection: React.FC<{}> = ({}) => {
|
|||||||
setAuthToken(newToken);
|
setAuthToken(newToken);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const toggleExample = useCallback(() => {
|
||||||
|
setIsExampleExpanded(!isExampleExpanded);
|
||||||
|
}, [isExampleExpanded]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='auth-token-section'>
|
<div className='auth-token-section'>
|
||||||
<div className='auth-token-description'>
|
<div className='auth-token-description'>
|
||||||
Set this environment variable to bypass the connection dialog:
|
Set this environment variable to bypass the connection dialog:
|
||||||
</div>
|
</div>
|
||||||
<div className='auth-token-container'>
|
<div className='auth-token-container'>
|
||||||
<code className='auth-token-code'>PLAYWRIGHT_MCP_EXTENSION_TOKEN={authToken}</code>
|
<code className='auth-token-code'>{authTokenCode(authToken)}</code>
|
||||||
<button className='auth-token-refresh' title='Generate new token' aria-label='Generate new token'onClick={onRegenerateToken}>{icons.refresh()}</button>
|
<button className='auth-token-refresh' title='Generate new token' aria-label='Generate new token'onClick={onRegenerateToken}>{icons.refresh()}</button>
|
||||||
<CopyToClipboard value={authToken} />
|
<CopyToClipboard value={authTokenCode(authToken)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='auth-token-example-section'>
|
||||||
|
<button
|
||||||
|
className='auth-token-example-toggle'
|
||||||
|
onClick={toggleExample}
|
||||||
|
aria-expanded={isExampleExpanded}
|
||||||
|
title={isExampleExpanded ? 'Hide example config' : 'Show example config'}
|
||||||
|
>
|
||||||
|
<span className={`auth-token-chevron ${isExampleExpanded ? 'expanded' : ''}`}>
|
||||||
|
{icons.chevronDown()}
|
||||||
|
</span>
|
||||||
|
Example MCP server configuration
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExampleExpanded && (
|
||||||
|
<div className='auth-token-example-content'>
|
||||||
|
<div className='auth-token-example-description'>
|
||||||
|
Add this configuration to your MCP client (e.g., VS Code) to connect to the Playwright MCP Bridge:
|
||||||
|
</div>
|
||||||
|
<div className='auth-token-example-config'>
|
||||||
|
<code className='auth-token-example-code'>{exampleConfig(authToken)}</code>
|
||||||
|
<CopyToClipboard value={exampleConfig(authToken)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function authTokenCode(authToken: string) {
|
||||||
|
return `PLAYWRIGHT_MCP_EXTENSION_TOKEN=${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exampleConfig(authToken: string) {
|
||||||
|
return `{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["@playwright/mcp@latest", "--extension"],
|
||||||
|
"env": {
|
||||||
|
"PLAYWRIGHT_MCP_EXTENSION_TOKEN":
|
||||||
|
"${authToken}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
function generateAuthToken(): string {
|
function generateAuthToken(): string {
|
||||||
// Generate a cryptographically secure random token
|
// Generate a cryptographically secure random token
|
||||||
const array = new Uint8Array(32);
|
const array = new Uint8Array(32);
|
||||||
|
|||||||
@@ -41,3 +41,9 @@ export const refresh = () => {
|
|||||||
<path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
|
<path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
|
||||||
</svg>;
|
</svg>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const chevronDown = () => {
|
||||||
|
return <svg className='octicon' viewBox="0 0 16 16" width="16" height="16" aria-hidden='true'>
|
||||||
|
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>
|
||||||
|
</svg>;
|
||||||
|
};
|
||||||
|
|||||||
32
package-lock.json
generated
32
package-lock.json
generated
@@ -1,23 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.38",
|
"version": "0.0.42",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.38",
|
"version": "0.0.42",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-2025-09-18",
|
"playwright": "1.57.0-alpha-2025-10-09",
|
||||||
"playwright-core": "1.56.0-alpha-2025-09-18"
|
"playwright-core": "1.57.0-alpha-2025-10-09"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"mcp-server-playwright": "cli.js"
|
"mcp-server-playwright": "cli.js"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modelcontextprotocol/sdk": "^1.17.5",
|
"@modelcontextprotocol/sdk": "^1.17.5",
|
||||||
"@playwright/test": "1.56.0-alpha-2025-09-18",
|
"@playwright/test": "1.57.0-alpha-2025-10-09",
|
||||||
"@types/node": "^24.3.0",
|
"@types/node": "^24.3.0",
|
||||||
"zod-to-json-schema": "^3.24.6"
|
"zod-to-json-schema": "^3.24.6"
|
||||||
},
|
},
|
||||||
@@ -50,13 +50,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@playwright/test": {
|
"node_modules/@playwright/test": {
|
||||||
"version": "1.56.0-alpha-2025-09-18",
|
"version": "1.57.0-alpha-2025-10-09",
|
||||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0-alpha-2025-09-18.tgz",
|
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0-alpha-2025-10-09.tgz",
|
||||||
"integrity": "sha512-HqvJRABhT5yTbWw93erQR8yK9EDbEJzbCVYH6WNlzDHUyVSyJWhkcqTSX318cfByeCunKOqGGSoHfBzp+NWlsA==",
|
"integrity": "sha512-2JBSbeimUS2kQQxvi9x17GqsU5AWeB33gKUAGv08ViYfoIop+b++t2vzUoid2+Bq3xYWd4JpBoUPAz+/tQZ7LQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-2025-09-18"
|
"playwright": "1.57.0-alpha-2025-10-09"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright": "cli.js"
|
"playwright": "cli.js"
|
||||||
@@ -825,12 +825,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/playwright": {
|
"node_modules/playwright": {
|
||||||
"version": "1.56.0-alpha-2025-09-18",
|
"version": "1.57.0-alpha-2025-10-09",
|
||||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0-alpha-2025-09-18.tgz",
|
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0-alpha-2025-10-09.tgz",
|
||||||
"integrity": "sha512-rvZ5liplc1VWzOuk6WnxiYpb5IIfgyvtMuviy/hT4iaRo3aneRUZeIa2Bk4axIQ+PckEC12Q8pHh3yKtl+Z/2g==",
|
"integrity": "sha512-43vX0bt/YQANmKuWMDJSQMtic5iKBgqD6YMFgM045hELzFE5/mbRKRZI+iPVrFbKsvyClWzd/HVIvluwkbJVqg==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright-core": "1.56.0-alpha-2025-09-18"
|
"playwright-core": "1.57.0-alpha-2025-10-09"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright": "cli.js"
|
"playwright": "cli.js"
|
||||||
@@ -843,9 +843,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/playwright-core": {
|
"node_modules/playwright-core": {
|
||||||
"version": "1.56.0-alpha-2025-09-18",
|
"version": "1.57.0-alpha-2025-10-09",
|
||||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0-alpha-2025-09-18.tgz",
|
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0-alpha-2025-10-09.tgz",
|
||||||
"integrity": "sha512-Uah9BolKRWGmQYBx4qlo6iwdQymHFfx2yM8KS2PrJln7/SYzgem3vfJCcKJ0toGG0H7TvaazcOxkImvebC8Tjg==",
|
"integrity": "sha512-K6BwJMLn+2wLRu/iqk0l4MJ1Ou1tObap3UMX+sVoXrgAOBG1/L5RTe70NVTB1ROrsgZYxaqFGMyo53bBN/uw5Q==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright-core": "cli.js"
|
"playwright-core": "cli.js"
|
||||||
|
|||||||
12
package.json
12
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.38",
|
"version": "0.0.42",
|
||||||
"description": "Playwright Tools for MCP",
|
"description": "Playwright Tools for MCP",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -23,7 +23,9 @@
|
|||||||
"ftest": "playwright test --project=firefox",
|
"ftest": "playwright test --project=firefox",
|
||||||
"wtest": "playwright test --project=webkit",
|
"wtest": "playwright test --project=webkit",
|
||||||
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
|
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
|
||||||
"npm-publish": "npm run clean && npm run test && npm publish"
|
"npm-publish": "npm run clean && npm run test && npm publish",
|
||||||
|
"copy-config": "cp ../playwright/packages/playwright/src/mcp/config.d.ts . && perl -pi -e \"s|import type \\* as playwright from 'playwright-core';|import type * as playwright from 'playwright';|\" ./config.d.ts",
|
||||||
|
"roll": "npm run copy-config && npm run lint"
|
||||||
},
|
},
|
||||||
"exports": {
|
"exports": {
|
||||||
"./package.json": "./package.json",
|
"./package.json": "./package.json",
|
||||||
@@ -33,15 +35,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-2025-09-18",
|
"playwright": "1.57.0-alpha-2025-10-09",
|
||||||
"playwright-core": "1.56.0-alpha-2025-09-18"
|
"playwright-core": "1.57.0-alpha-2025-10-09"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"mcp-server-playwright": "cli.js"
|
"mcp-server-playwright": "cli.js"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modelcontextprotocol/sdk": "^1.17.5",
|
"@modelcontextprotocol/sdk": "^1.17.5",
|
||||||
"@playwright/test": "1.56.0-alpha-2025-09-18",
|
"@playwright/test": "1.57.0-alpha-2025-10-09",
|
||||||
"@types/node": "^24.3.0",
|
"@types/node": "^24.3.0",
|
||||||
"zod-to-json-schema": "^3.24.6"
|
"zod-to-json-schema": "^3.24.6"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user