Compare commits

...

89 Commits

Author SHA1 Message Date
Pavel Feldman
4c6d66d04e chore: roll Playwright to 1.59.0-alpha-1773608981000 (#1461)
## Summary
- Roll playwright and playwright-core to `1.59.0-alpha-1773451864000`
- Fix `install-browser` CLI command registration (was calling
`parseAsync` before registering the subcommand)
- Add `selector` parameter to accessibility snapshot documentation
- Add CLAUDE.md
2026-03-16 09:40:52 -07:00
Yury Semikhatsky
a6baddb044 feat(extension): inject public key into release zip to preserve Web Store extension ID (#1462)
The public key is hardcoded in vite.config.mts. When
SET_EXTENSION_PUBLIC_KEY_IN_MANIFEST is set, the vite build transforms
the copied manifest.json to include the key field, ensuring the packed
extension shares the same Chrome extension ID as the Web Store listing.

Fixes #1452
2026-03-16 09:38:48 -07:00
Yury Semikhatsky
112cbb8574 chore: fix npm audits (#1460) 2026-03-13 18:23:09 -07:00
Mark Zhang
81f5084757 fix(extension): arm inactivity timers for all pending tabs (#1443) 2026-03-13 11:59:21 -07:00
Yury Semikhatsky
2bb0de1fa8 fix(readme): add missing tool categories (#1459)
Closes #1457
2026-03-13 10:16:27 -07:00
dependabot[bot]
6e69d62c7a chore(deps-dev): bump hono from 4.12.5 to 4.12.7 (#1453) 2026-03-13 10:12:48 -07:00
Willian Tolotti
55622bf5f1 feat(package): add mcpName field for MCP Registry ownership verification (#1432) 2026-03-09 15:37:44 -07:00
Yury Semikhatsky
a9d95f8d83 docs: not a security boundary section (#1435) 2026-03-04 18:38:40 -08:00
Yury Semikhatsky
d8f8b7b52d Revert "docs: fix PLAYWRIGHT_MCP_ALLOWED_HOSTS env var name (#1414)" (#1440)
This reverts commit f1f42f8616.

It broke lint. See
https://github.com/microsoft/playwright-mcp/pull/1414/checks in the
original PR.
2026-03-04 17:13:40 -08:00
dependabot[bot]
0d8753294d chore(deps-dev): bump hono from 4.11.8 to 4.12.5 (#1437) 2026-03-04 17:05:26 -08:00
dependabot[bot]
1e0b51325e chore(deps-dev): bump @hono/node-server from 1.19.9 to 1.19.10 (#1438) 2026-03-04 17:05:05 -08:00
Promode
43e31e8361 doc: Add Antigravity to MCP client list in README (#1419) 2026-02-25 11:10:43 -08:00
Luca Moretti
f1f42f8616 docs: fix PLAYWRIGHT_MCP_ALLOWED_HOSTS env var name (#1414) 2026-02-21 15:07:56 -08:00
Luca Moretti
c60d7bd7a6 docs: add --host 0.0.0.0 to Docker service example (#1415) 2026-02-21 15:06:51 -08:00
Yury Semikhatsky
066e54b6ea chore: mark 0.0.68 (#1406) 2026-02-14 15:17:41 -08:00
Yury Semikhatsky
d6c2e7ce5e chore: roll to Feb 14 (#1405) 2026-02-14 14:33:34 -08:00
Yury Semikhatsky
8c4b1aaa25 chore: fix tests on linux (#1404) 2026-02-14 13:11:47 -08:00
Yury Semikhatsky
bd1428d5b4 chore: mark v0.0.67 (#1401) 2026-02-13 18:30:26 -08:00
Yury Semikhatsky
793215ac07 chore: roll 1.59.0-alpha-1771028105000 (#1400) 2026-02-13 18:28:41 -08:00
dependabot[bot]
b0b4b76d1b chore(deps-dev): bump qs from 6.14.1 to 6.14.2 (#1398) 2026-02-13 16:54:20 -08:00
Yury Semikhatsky
af9ec1823b chore: connect to published extension (#1399) 2026-02-13 16:50:28 -08:00
Yury Semikhatsky
79dd021d1d chore: normalize "repository.url" 2026-02-13 15:53:19 -08:00
Yury Semikhatsky
39d9213352 chore: remove stale @playwright/cli dependency from stub (#1397) 2026-02-13 15:49:32 -08:00
Yury Semikhatsky
167abba9e6 chore(extension): remove unused permission (#1383) 2026-02-09 12:33:16 -08:00
Yury Semikhatsky
e4575a6eb2 chore: bump deps (#1379)
Fixes audit errors
2026-02-06 14:07:30 -08:00
Yury Semikhatsky
1c8807acef devops: remove playwright-cli from this repo (#1378) 2026-02-06 13:40:38 -08:00
Yury Semikhatsky
a3d2ba699a devops: roll script (#1377) 2026-02-06 10:20:37 -08:00
Pavel Feldman
0e6e6d216e chore: mark v0.0.66 2026-02-06 10:07:42 -08:00
Yury Semikhatsky
6cbc866c2d chore: mark v0.0.65 (#1376) 2026-02-06 10:02:11 -08:00
Yury Semikhatsky
fe2e818968 chore: roll 1.59.0-alpha-1770400094000 (#1375) 2026-02-06 10:00:36 -08:00
Pavel Feldman
e39e83bb13 chore: mark v0.0.64 (#1371) 2026-02-05 17:11:02 -08:00
Pavel Feldman
de6776f318 update cli readme
Added installation instructions for skills and updated CLI commands.
2026-02-03 15:59:09 -08:00
Pavel Feldman
822d81e02b restoring readme 2026-02-03 15:52:13 -08:00
Pavel Feldman
fed2475a86 Enhance README with installation and feature details 2026-02-03 15:43:17 -08:00
Pavel Feldman
34679cc689 Update readme for new skills 2026-02-03 15:39:45 -08:00
Pavel Feldman
c83315e4c9 chore: mark v0.0.63 (#1365) 2026-02-03 15:21:11 -08:00
Pavel Feldman
d246fff5d7 chore: mark v0.0.62 (#1360) 2026-01-30 17:16:54 -08:00
Pavel Feldman
925735af51 chore: update the playwright-cli stub (#1353) 2026-01-28 20:24:13 -08:00
Yury Semikhatsky
8b8e518029 chore: add test for cli --extension (#1356) 2026-01-28 20:24:03 -08:00
Pavel Feldman
cd9819d0e8 chore: mark v0.0.61 (#1349) 2026-01-26 14:54:15 -08:00
Pavel Feldman
542b74d2b4 chore: remove dummy cli tests (#1348) 2026-01-26 14:33:53 -08:00
Pavel Feldman
15c299778a chore: read esbuild deps (#1347) 2026-01-26 14:20:58 -08:00
Pavel Feldman
5e0ac89c28 chore: split mcp into mcp and cli (#1346) 2026-01-26 14:17:36 -08:00
Pavel Feldman
9e176c409f chore: mark v0.0.60 (#1345) 2026-01-26 10:34:02 -08:00
Pavel Feldman
44fa8026c9 Update README for clarity on MCP and CLI usage 2026-01-25 18:15:16 -08:00
Pavel Feldman
d6414a6426 Fix formatting and punctuation in README.md 2026-01-25 18:08:10 -08:00
Pavel Feldman
c8a520fc48 Update readme 2026-01-25 18:04:04 -08:00
Pavel Feldman
f531b2c9cb chore: mark v0.0.59 (#1340) 2026-01-25 11:20:28 -08:00
Pavel Feldman
4b62f68979 chore: render nicer config (#1339) 2026-01-25 11:06:30 -08:00
Pavel Feldman
5b497bcca8 chore: roll pw to latest (#1338) 2026-01-25 11:00:23 -08:00
sno
00b9c54515 fix: update extension README link to packages/extension (#1335) 2026-01-25 10:17:32 -08:00
Pavel Feldman
79111366a9 chore: mark v0.0.58 (#1336) 2026-01-23 17:18:55 -08:00
Pavel Feldman
956b79a1ab chore: mark v0.0.57 (#1332) 2026-01-23 16:08:05 -08:00
Pavel Feldman
b58ad48e0a chore: roll pw to latest (#1334) 2026-01-23 16:06:09 -08:00
Pavel Feldman
41fba2bd71 chore: roll playwright to latest (#1331) 2026-01-23 19:31:12 +00:00
Dmitry Gozman
cd2b589338 chore: add "playwright-cli" binary (#1330) 2026-01-23 17:52:48 +00:00
Dmitry Gozman
fbd62cd838 chore: roll to 1.59.0-alpha-1769176698000 (#1327) 2026-01-23 17:24:40 +00:00
Dmitry Gozman
6aab683338 chore: monorepo (#1325) 2026-01-23 10:37:33 +00:00
Yury Semikhatsky
85c64bbe0f chore: add cli package (#1320) 2026-01-22 07:54:03 +00:00
dependabot[bot]
b213c187b0 chore(deps-dev): bump qs from 6.14.0 to 6.14.1 (#1292) 2026-01-16 10:32:34 -08:00
Yury Semikhatsky
412f6dc6fe chore: mark v0.0.55 (#1310) 2026-01-16 10:31:07 -08:00
Yury Semikhatsky
4b1a6842b1 chore: roll 1.58.0-alpha-2026-01-16 (#1312) 2026-01-16 09:49:16 -08:00
Yury Semikhatsky
9cc61b4faf chore: roll 1.58.0-alpha-2026-01-15 (#1309) 2026-01-15 11:18:57 -08:00
Yury Semikhatsky
33b4c00923 docs: reformat cline instructions, follow up to #1297 (#1303) 2026-01-09 14:59:08 -08:00
Alex Tumanov
f5ed83a4ca docs: add Cline configuration to Readme.md (#1297) 2026-01-09 14:18:01 -08:00
Yury Semikhatsky
2f7467ba29 chore: mark v0.0.55 (#1301) 2026-01-09 09:57:39 -08:00
Yury Semikhatsky
d47197f41f chore: roll 1.58.0-alpha-2026-01-07 (#1300) 2026-01-07 09:45:30 -08:00
Yury Semikhatsky
dba2fd054d Revert "Add step for publishing to MCP Registry #1197" (#1289) 2025-12-30 17:57:46 -08:00
Pavel Feldman
075397e57e chore: mark v0.0.54 (#1285) 2025-12-29 11:02:27 -08:00
Yury Semikhatsky
e8b471ec60 chore: roll 1.58.0-alpha-2025-12-29 (#1287) 2025-12-29 09:55:46 -08:00
Muhammad Salman
c806df7b13 docs: point to monorepo for the source code (#1282) 2025-12-26 18:10:02 -08:00
Yury Semikhatsky
a0b4ffbe15 chore(extensions): allow connections only from 127.0.0.1 (#1275)
Requires https://github.com/microsoft/playwright/pull/38626
2025-12-19 18:42:34 -08:00
Yury Semikhatsky
0a6f1c4ea4 chore: mark v0.0.53 (#1277) 2025-12-19 18:32:16 -08:00
Yury Semikhatsky
c784f93a65 chore: roll 1.58.0-alpha-1766189059000 (#1276) 2025-12-19 17:44:20 -08:00
Yury Semikhatsky
10c340c0b3 chore: mark v0.0.52 (#1256) 2025-12-11 11:01:20 -08:00
Yury Semikhatsky
850520321b chore: roll 1.58.0-alpha-2025-12-11 (#1255) 2025-12-11 10:25:03 -08:00
Pavel Feldman
b717a2a8ed chore: mark v0.0.51 (#1248) 2025-12-08 08:13:35 -08:00
Pavel Feldman
ff9544db83 chore: mark v0.0.50 (#1244) 2025-12-05 13:24:54 -08:00
Devraj Mehta
c85ee1a6ec docs: update README with Copilot CLI usage instructions (#1243) 2025-12-05 12:52:12 -08:00
Pavel Feldman
0fcb25d118 chore: mark v0.0.49 (#1232) 2025-11-30 11:28:12 -08:00
Simon Knott
f4df37ca71 chore: generate config section from config.d.ts (#1224) 2025-11-28 15:38:42 -08:00
Pavel Feldman
64f65ccd10 chore: mark v0.0.48 (#1218) 2025-11-21 14:34:32 -08:00
AJ (@techfren)
3f7e2d1b45 docs: add authentication token instructions to extension README (#1207) 2025-11-21 11:28:37 -08:00
Simon Knott
e0cb424dea docs: update config file section (#1209)
Copy-paste of
7671e2b7f0/packages/playwright/src/mcp/config.d.ts (L21).
2025-11-19 17:06:43 +01:00
Joel Verhagen
86e0020b4a Update version to 0.0.47 in server.json (#1204) 2025-11-18 08:47:32 -08:00
Joel Verhagen
009aa9275b Add step for publishing to MCP Registry (#1197)
This adds a new step for the `release` event to publish to the Official
MCP Registry.

Summary of changes:
- Add `server.json` which is the MCP Server manifest
  - Used metadata from the GH MCP Registry
  - Used the name `com.microsoft/playwright-mcp`
- Add `publish-release-mcp-registry` job that runs manually
   - Install Microsoft Go for compliant Go crypto
   - Log in to Azure for Key Vault access
   - Publish to the MCP Registry in the `microsoft.com` namespace.
- Add `mcpName` to the `package.json` which the MCP Registry validates.

The publishing requires some secret variables:
- `AZURE_MCP_REGISTRY_CLIENT_ID` - service principal client ID (app ID)
with Get Key and Sign access to a Key Vault
- `AZURE_MCP_REGISTRY_TENANT_ID` - tenant ID for the service principal
(should be a production tenant)
- `AZURE_MCP_REGISTRY_SUBSCRIPTION_ID` - Azure subscription ID holding
the Key Vault
- `KV_NAME` - the Key Vault name, e.g. `mykeyvault`
- `KV_KEY_NAME` - the name of a Key in the Key Vault, needs to be ECDSA
P-384.

I can provide internal documentation for how to set up the service
principal (managed identity is easiest), vault, and key as well as
registering the key so it can be used for the `microsoft.com` namespace.

**Note:** after the new job is proven to work as expected, we can switch
it to automatically running after the `publish-release-npm` job on the
`release` event.
2025-11-17 13:43:07 -08:00
Pavel Feldman
c016643bf9 chore: mark v0.0.47 (#1198) 2025-11-14 12:23:56 -08:00
Pavel Feldman
8cc557d677 chore: mark v0.0.46 (#1188) 2025-11-07 13:41:19 -08:00
Ben Tossell
15d382b940 docs: add Factory installation instructions (#1184) 2025-11-04 08:30:14 -08:00
67 changed files with 4266 additions and 2808 deletions

View File

@@ -6,6 +6,10 @@ on:
pull_request: pull_request:
branches: [ main ] branches: [ main ]
env:
PWMCP_DEBUG: '1'
PWDEBUGIMPL: '1'
jobs: jobs:
lint: lint:
runs-on: ubuntu-latest runs-on: ubuntu-latest
@@ -16,10 +20,8 @@ jobs:
with: with:
node-version: '20' node-version: '20'
cache: 'npm' cache: 'npm'
- name: Install dependencies - run: npm ci
run: npm ci - run: npm run lint
- name: Run ESLint
run: npm run lint
- name: Ensure no changes - name: Ensure no changes
run: git diff --exit-code run: git diff --exit-code
@@ -40,10 +42,22 @@ jobs:
run: npm ci run: npm ci
- name: Playwright install - name: Playwright install
run: npx playwright install --with-deps run: npx playwright install --with-deps
- name: Run tests - name: Build
run: npm run test run: npm run build
- name: Run playwright-mcp tests
id: test-mcp
run: npm run test --workspace=packages/playwright-mcp
continue-on-error: true
- name: Run extension tests
id: test-extension
if: matrix.os == 'macos-15'
run: npm run test --workspace=packages/extension
continue-on-error: true
- name: Check test results
if: steps.test-mcp.outcome == 'failure' || steps.test-extension.outcome == 'failure'
run: exit 1
test_docker: test_mcp_docker:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
@@ -71,41 +85,6 @@ jobs:
# Used for the Docker tests to share the test-results folder with the container. # Used for the Docker tests to share the test-results folder with the container.
umask 0000 umask 0000
npm run test -- --project=chromium-docker npm run test -- --project=chromium-docker
working-directory: ./packages/playwright-mcp
env: env:
MCP_IN_DOCKER: 1 MCP_IN_DOCKER: 1
test_extension:
runs-on: macos-latest
defaults:
run:
working-directory: ./extension
steps:
- uses: actions/checkout@v4
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: '20' # crypto.randomUUID(); stalls in v18.20.8
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build extension
run: npm run build
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: extension
path: ./extension/dist
retention-days: 7
- name: Install MCP server
run: |
cd ..
npm ci
npx playwright install chromium
- name: Run tests
run: |
if [[ "$(uname)" == "Linux" ]]; then
xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test
else
npm run test
fi
shell: bash

View File

@@ -7,7 +7,7 @@ on:
types: [published] types: [published]
jobs: jobs:
publish-canary-npm: publish-mcp-canary-npm:
if: github.event.schedule || github.event_name == 'workflow_dispatch' if: github.event.schedule || github.event_name == 'workflow_dispatch'
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions: permissions:
@@ -38,16 +38,19 @@ jobs:
- name: Update package.json version - name: Update package.json version
run: | run: |
npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
working-directory: ./packages/playwright-mcp
- 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
working-directory: ./packages/playwright-mcp
- name: Publish to npm with next tag - name: Publish to npm with next tag
run: npm publish --tag next run: npm publish --tag next
working-directory: ./packages/playwright-mcp
publish-release-npm: publish-mcp-release-npm:
if: github.event_name == 'release' if: github.event_name == 'release'
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions: permissions:
@@ -66,9 +69,11 @@ jobs:
- 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
working-directory: ./packages/playwright-mcp
- run: npm publish - run: npm publish
working-directory: ./packages/playwright-mcp
publish-release-docker: publish-mcp-release-docker:
if: github.event_name == 'release' if: github.event_name == 'release'
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions: permissions:
@@ -93,8 +98,7 @@ jobs:
id: build-push id: build-push
uses: docker/build-push-action@v6 uses: docker/build-push-action@v6
with: with:
context: . file: ./Dockerfile
file: ./Dockerfile # Adjust path if your Dockerfile is elsewhere
platforms: linux/amd64,linux/arm64 platforms: linux/amd64,linux/arm64
push: true push: true
tags: | tags: |
@@ -127,17 +131,18 @@ jobs:
node-version: 20 node-version: 20
cache: 'npm' cache: 'npm'
- name: Install extension dependencies - name: Install extension dependencies
working-directory: ./extension
run: npm ci run: npm ci
- name: Build extension - name: Build extension
working-directory: ./extension working-directory: ./packages/extension
run: npm run build run: npm run build
env:
SET_EXTENSION_PUBLIC_KEY_IN_MANIFEST: 1
- name: Get extension version - name: Get extension version
id: get-version id: get-version
working-directory: ./extension working-directory: ./packages/extension
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
- name: Package extension - name: Package extension
working-directory: ./extension working-directory: ./packages/extension
run: | run: |
cd dist cd dist
zip -r ../playwright-mcp-extension-${{ steps.get-version.outputs.version }}.zip . zip -r ../playwright-mcp-extension-${{ steps.get-version.outputs.version }}.zip .
@@ -146,4 +151,4 @@ jobs:
env: env:
GITHUB_TOKEN: ${{ github.token }} GITHUB_TOKEN: ${{ github.token }}
run: | run: |
gh release upload ${{github.event.release.tag_name}} ./extension/playwright-mcp-extension-${{ steps.get-version.outputs.version }}.zip gh release upload ${{github.event.release.tag_name}} ./packages/extension/playwright-mcp-extension-${{ steps.get-version.outputs.version }}.zip

2
.gitignore vendored
View File

@@ -1,5 +1,3 @@
lib/
dist/
node_modules/ node_modules/
test-results/ test-results/
playwright-report/ playwright-report/

31
CLAUDE.md Normal file
View File

@@ -0,0 +1,31 @@
## Commit Convention
Semantic commit messages: `label(scope): description`
Labels: `fix`, `feat`, `chore`, `docs`, `test`, `devops`
```bash
git checkout -b fix-39562
# ... make changes ...
git add <changed-files>
git commit -m "$(cat <<'EOF'
fix(proxy): handle SOCKS proxy authentication
Fixes: https://github.com/microsoft/playwright/issues/39562
EOF
)"
git push origin fix-39562
gh pr create --repo microsoft/playwright --head username:fix-39562 \
--title "fix(proxy): handle SOCKS proxy authentication" \
--body "$(cat <<'EOF'
## Summary
- <describe the change very! briefly>
Fixes https://github.com/microsoft/playwright/issues/39562
EOF
)"
```
Never add Co-Authored-By agents in commit message.
Branch naming for issue fixes: `fix-<issue-number>`

View File

@@ -16,6 +16,7 @@ WORKDIR /app
RUN --mount=type=cache,target=/root/.npm,sharing=locked,id=npm-cache \ RUN --mount=type=cache,target=/root/.npm,sharing=locked,id=npm-cache \
--mount=type=bind,source=package.json,target=package.json \ --mount=type=bind,source=package.json,target=package.json \
--mount=type=bind,source=package-lock.json,target=package-lock.json \ --mount=type=bind,source=package-lock.json,target=package-lock.json \
--mount=type=bind,source=packages/playwright-mcp/package.json,target=packages/playwright-mcp/package.json \
npm ci --omit=dev && \ npm ci --omit=dev && \
# Install system dependencies for playwright # Install system dependencies for playwright
npx -y playwright-core install-deps chromium npx -y playwright-core install-deps chromium
@@ -28,10 +29,11 @@ FROM base AS builder
RUN --mount=type=cache,target=/root/.npm,sharing=locked,id=npm-cache \ RUN --mount=type=cache,target=/root/.npm,sharing=locked,id=npm-cache \
--mount=type=bind,source=package.json,target=package.json \ --mount=type=bind,source=package.json,target=package.json \
--mount=type=bind,source=package-lock.json,target=package-lock.json \ --mount=type=bind,source=package-lock.json,target=package-lock.json \
--mount=type=bind,source=packages/playwright-mcp/package.json,target=packages/playwright-mcp/package.json \
npm ci npm ci
# Copy the rest of the app # Copy the rest of the app
COPY *.json *.js *.ts . COPY packages/playwright-mcp/*.json packages/playwright-mcp/*.js packages/playwright-mcp/*.ts .
# ------------------------------ # ------------------------------
# Browser # Browser
@@ -59,7 +61,7 @@ RUN chown -R ${USERNAME}:${USERNAME} node_modules
USER ${USERNAME} USER ${USERNAME}
COPY --from=browser --chown=${USERNAME}:${USERNAME} ${PLAYWRIGHT_BROWSERS_PATH} ${PLAYWRIGHT_BROWSERS_PATH} COPY --from=browser --chown=${USERNAME}:${USERNAME} ${PLAYWRIGHT_BROWSERS_PATH} ${PLAYWRIGHT_BROWSERS_PATH}
COPY --chown=${USERNAME}:${USERNAME} cli.js package.json ./ COPY --chown=${USERNAME}:${USERNAME} packages/playwright-mcp/cli.js packages/playwright-mcp/package.json ./
# Run in headless and only with chromium (other browsers need more dependencies not included in this image) # Run in headless and only with chromium (other browsers need more dependencies not included in this image)
ENTRYPOINT ["node", "cli.js", "--headless", "--browser", "chromium", "--no-sandbox"] ENTRYPOINT ["node", "cli.js", "--headless", "--browser", "chromium", "--no-sandbox"]

View File

@@ -186,8 +186,7 @@
same "printed page" as the copyright notice for easier same "printed page" as the copyright notice for easier
identification within third-party archives. identification within third-party archives.
Portions Copyright (c) Microsoft Corporation. Copyright (c) Microsoft Corporation.
Portions Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.

849
README.md

File diff suppressed because it is too large Load Diff

View File

@@ -1,48 +0,0 @@
# Playwright MCP Chrome Extension
## Introduction
The Playwright MCP Chrome Extension allows you to connect to pages in your existing browser and leverage the state of your default user profile. This means the AI assistant can interact with websites where you're already logged in, using your existing cookies, sessions, and browser state, providing a seamless experience without requiring separate authentication or setup.
## Prerequisites
- Chrome/Edge/Chromium browser
## Installation Steps
### Download the Extension
Download the latest Chrome extension from GitHub:
- **Download link**: https://github.com/microsoft/playwright-mcp/releases
### Load Chrome Extension
1. Open Chrome and navigate to `chrome://extensions/`
2. Enable "Developer mode" (toggle in the top right corner)
3. Click "Load unpacked" and select the extension directory
### Configure Playwright MCP server
Configure Playwright MCP server to connect to the browser using the extension by passing the `--extension` option when running the MCP server:
```json
{
"mcpServers": {
"playwright-extension": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--extension"
]
}
}
}
```
## Usage
### Browser Tab Selection
When the LLM interacts with the browser for the first time, it will load a page where you can select which browser tab the LLM will connect to. This allows you to control which specific page the AI assistant will interact with during the session.

File diff suppressed because it is too large Load Diff

View File

@@ -1,336 +0,0 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import fs from 'fs';
import path from 'path';
import { chromium } from 'playwright';
import { test as base, expect } from '../../tests/fixtures';
import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
import type { BrowserContext } from 'playwright';
import type { StartClient } from '../../tests/fixtures';
type BrowserWithExtension = {
userDataDir: string;
launch: (mode?: 'disable-extension') => Promise<BrowserContext>;
};
type TestFixtures = {
browserWithExtension: BrowserWithExtension,
pathToExtension: string,
useShortConnectionTimeout: (timeoutMs: number) => void
overrideProtocolVersion: (version: number) => void
};
const test = base.extend<TestFixtures>({
pathToExtension: async ({}, use) => {
await use(path.resolve(__dirname, '../dist'));
},
browserWithExtension: async ({ mcpBrowser, pathToExtension }, use, testInfo) => {
// The flags no longer work in Chrome since
// https://chromium.googlesource.com/chromium/src/+/290ed8046692651ce76088914750cb659b65fb17%5E%21/chrome/browser/extensions/extension_service.cc?pli=1#
test.skip('chromium' !== mcpBrowser, '--load-extension is not supported for official builds of Chromium');
let browserContext: BrowserContext | undefined;
const userDataDir = testInfo.outputPath('extension-user-data-dir');
await use({
userDataDir,
launch: async (mode?: 'disable-extension') => {
browserContext = await chromium.launchPersistentContext(userDataDir, {
channel: mcpBrowser,
// Opening the browser singleton only works in headed.
headless: false,
// Automation disables singleton browser process behavior, which is necessary for the extension.
ignoreDefaultArgs: ['--enable-automation'],
args: mode === 'disable-extension' ? [] : [
`--disable-extensions-except=${pathToExtension}`,
`--load-extension=${pathToExtension}`,
],
});
// for manifest v3:
let [serviceWorker] = browserContext.serviceWorkers();
if (!serviceWorker)
serviceWorker = await browserContext.waitForEvent('serviceworker');
return browserContext;
}
});
await browserContext?.close();
},
useShortConnectionTimeout: async ({}, use) => {
await use((timeoutMs: number) => {
process.env.PWMCP_TEST_CONNECTION_TIMEOUT = timeoutMs.toString();
});
process.env.PWMCP_TEST_CONNECTION_TIMEOUT = undefined;
},
overrideProtocolVersion: async ({}, use) => {
await use((version: number) => {
process.env.PWMCP_TEST_PROTOCOL_VERSION = version.toString();
});
process.env.PWMCP_TEST_PROTOCOL_VERSION = undefined;
}
});
async function startAndCallConnectTool(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
const { client } = await startClient({
args: [`--connect-tool`],
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
expect(await client.callTool({
name: 'browser_connect',
arguments: {
name: 'extension'
}
})).toHaveResponse({
result: 'Successfully changed connection method.',
});
return client;
}
async function startWithExtensionFlag(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
const { client } = await startClient({
args: [`--extension`],
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
return client;
}
const testWithOldExtensionVersion = test.extend({
pathToExtension: async ({}, use, testInfo) => {
const extensionDir = testInfo.outputPath('extension');
const oldPath = path.resolve(__dirname, '../dist');
await fs.promises.cp(oldPath, extensionDir, { recursive: true });
const manifestPath = path.join(extensionDir, 'manifest.json');
const manifest = JSON.parse(await fs.promises.readFile(manifestPath, 'utf8'));
manifest.version = '0.0.1';
await fs.promises.writeFile(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
await use(extensionDir);
},
});
for (const [mode, startClientMethod] of [
['connect-tool', startAndCallConnectTool],
['extension-flag', startWithExtensionFlag],
] as const) {
test(`navigate with extension (${mode})`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const client = await startClientMethod(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const selectorPage = await confirmationPagePromise;
// For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
await selectorPage.getByRole('button', { name: 'Allow' }).click();
expect(await navigateResponse).toHaveResponse({
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});
test(`snapshot of an existing page (${mode})`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const page = await browserContext.newPage();
await page.goto(server.HELLO_WORLD);
// Another empty page.
await browserContext.newPage();
expect(browserContext.pages()).toHaveLength(3);
const client = await startClientMethod(browserWithExtension, startClient);
expect(browserContext.pages()).toHaveLength(3);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
const navigateResponse = client.callTool({
name: 'browser_snapshot',
arguments: { },
});
const selectorPage = await confirmationPagePromise;
expect(browserContext.pages()).toHaveLength(4);
await selectorPage.locator('.tab-item', { hasText: 'Title' }).getByRole('button', { name: 'Connect' }).click();
expect(await navigateResponse).toHaveResponse({
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
expect(browserContext.pages()).toHaveLength(4);
});
test(`extension not installed timeout (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(100);
const browserContext = await browserWithExtension.launch();
const client = await startClientMethod(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
expect(await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
})).toHaveResponse({
result: expect.stringContaining('Extension connection timeout. Make sure the "Playwright MCP Bridge" extension is installed.'),
isError: true,
});
await confirmationPagePromise;
});
testWithOldExtensionVersion(`works with old extension version (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(500);
// Prelaunch the browser, so that it is properly closed after the test.
const browserContext = await browserWithExtension.launch();
const client = await startClientMethod(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const selectorPage = await confirmationPagePromise;
// For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
await selectorPage.getByRole('button', { name: 'Allow' }).click();
expect(await navigateResponse).toHaveResponse({
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});
test(`extension needs update (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout, overrideProtocolVersion }) => {
useShortConnectionTimeout(500);
overrideProtocolVersion(1000);
// Prelaunch the browser, so that it is properly closed after the test.
const browserContext = await browserWithExtension.launch();
const client = await startClientMethod(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const confirmationPage = await confirmationPagePromise;
await expect(confirmationPage.locator('.status-banner')).toContainText(`Playwright MCP version trying to connect requires newer extension version`);
expect(await navigateResponse).toHaveResponse({
result: expect.stringContaining('Extension connection timeout.'),
isError: true,
});
});
}
test(`custom executablePath`, async ({ startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(1000);
const executablePath = test.info().outputPath('echo.sh');
await fs.promises.writeFile(executablePath, '#!/bin/bash\necho "Custom exec args: $@" > "$(dirname "$0")/output.txt"', { mode: 0o755 });
const { client } = await startClient({
args: [`--extension`],
config: {
browser: {
launchOptions: {
executablePath,
},
}
},
});
const navigateResponse = await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
timeout: 1000,
});
expect(await navigateResponse).toHaveResponse({
result: expect.stringContaining('Extension connection timeout.'),
isError: true,
});
expect(await fs.promises.readFile(test.info().outputPath('output.txt'), 'utf8')).toContain('Custom exec args: chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html?');
});
test(`bypass connection dialog with token`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const page = await browserContext.newPage();
await page.goto('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/status.html');
const token = await page.locator('.auth-token-code').textContent();
const [name, value] = token?.split('=') || [];
const { client } = await startClient({
args: [`--extension`],
extensionToken: value,
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
const navigateResponse = await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
expect(await navigateResponse).toHaveResponse({
pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});

2592
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,52 +1,32 @@
{ {
"name": "@playwright/mcp", "name": "playwright-mcp-internal",
"version": "0.0.45", "version": "0.0.68",
"description": "Playwright Tools for MCP", "private": true,
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/microsoft/playwright-mcp.git" "url": "git+https://github.com/microsoft/playwright-mcp.git"
}, },
"homepage": "https://playwright.dev", "homepage": "https://playwright.dev",
"engines": {
"node": ">=18"
},
"author": { "author": {
"name": "Microsoft Corporation" "name": "Microsoft Corporation"
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"lint": "npm run update-readme",
"update-readme": "node update-readme.js",
"docker-build": "docker build --no-cache -t playwright-mcp-dev:latest .", "docker-build": "docker build --no-cache -t playwright-mcp-dev:latest .",
"docker-rm": "docker rm playwright-mcp-dev", "docker-rm": "docker rm playwright-mcp-dev",
"docker-run": "docker run -it -p 8080:8080 --name playwright-mcp-dev playwright-mcp-dev:latest", "docker-run": "docker run -it -p 8080:8080 --name playwright-mcp-dev playwright-mcp-dev:latest",
"test": "playwright test", "lint": "npm run lint --workspaces",
"ctest": "playwright test --project=chrome", "test": "npm run test --workspaces",
"ftest": "playwright test --project=firefox", "build": "npm run build --workspaces",
"wtest": "playwright test --project=webkit", "bump": "npm version --workspaces --no-git-tag-version",
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker", "roll": "node roll.js"
"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": {
"./package.json": "./package.json",
".": {
"types": "./index.d.ts",
"default": "./index.js"
}
},
"dependencies": {
"playwright": "1.57.0-alpha-1761929702000",
"playwright-core": "1.57.0-alpha-1761929702000"
},
"bin": {
"mcp-server-playwright": "cli.js"
}, },
"workspaces": [
"packages/*"
],
"devDependencies": { "devDependencies": {
"@modelcontextprotocol/sdk": "^1.17.5", "@modelcontextprotocol/sdk": "^1.25.2",
"@playwright/test": "1.57.0-alpha-1761929702000", "@playwright/test": "1.59.0-alpha-1773608981000",
"@types/node": "^24.3.0", "@types/node": "^24.3.0"
"zod-to-json-schema": "^3.24.6"
} }
} }

1
packages/extension/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
dist/

View File

@@ -0,0 +1,70 @@
# Playwright MCP Chrome Extension
## Introduction
The Playwright MCP Chrome Extension allows you to connect to pages in your existing browser and leverage the state of your default user profile. This means the AI assistant can interact with websites where you're already logged in, using your existing cookies, sessions, and browser state, providing a seamless experience without requiring separate authentication or setup.
## Prerequisites
- Chrome/Edge/Chromium browser
## Installation Steps
### Install the Extension
Install [Playwright MCP Bridge](https://chromewebstore.google.com/detail/playwright-mcp-bridge/mmlmfjhmonkocbjadbfplnigmagldckm) from the Chrome Web Store.
### Configure Playwright MCP server
Configure Playwright MCP server to connect to the browser using the extension by passing the `--extension` option when running the MCP server:
```json
{
"mcpServers": {
"playwright-extension": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--extension"
]
}
}
}
```
## Usage
### Browser Tab Selection
When the LLM interacts with the browser for the first time, it will load a page where you can select which browser tab the LLM will connect to. This allows you to control which specific page the AI assistant will interact with during the session.
### Bypassing the Connection Approval Dialog
By default, you'll need to approve each connection when the MCP server tries to connect to your browser. To bypass this approval dialog and allow automatic connections, you can use an authentication token.
#### Using Your Unique Authentication Token
1. After installing the extension, click on the extension icon or navigate to the extension's status page
2. Copy the `PLAYWRIGHT_MCP_EXTENSION_TOKEN` value displayed in the extension UI
3. Add it to your MCP server configuration:
```json
{
"mcpServers": {
"playwright-extension": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--extension"
],
"env": {
"PLAYWRIGHT_MCP_EXTENSION_TOKEN": "your-token-here"
}
}
}
}
```
This token is unique to your browser profile and provides secure authentication between the MCP server and the extension. Once configured, you won't need to manually approve connections each time.

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

Before

Width:  |  Height:  |  Size: 571 B

After

Width:  |  Height:  |  Size: 571 B

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -1,14 +1,12 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Playwright MCP Bridge", "name": "Playwright MCP Bridge",
"version": "0.0.45", "version": "0.0.68",
"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",
"permissions": [ "permissions": [
"debugger", "debugger",
"activeTab", "activeTab",
"tabs", "tabs"
"storage"
], ],
"host_permissions": [ "host_permissions": [
"<all_urls>" "<all_urls>"

View File

@@ -1,6 +1,6 @@
{ {
"name": "@playwright/mcp-extension", "name": "@playwright/mcp-extension",
"version": "0.0.45", "version": "0.0.68",
"description": "Playwright MCP Browser Extension", "description": "Playwright MCP Browser Extension",
"private": true, "private": true,
"repository": { "repository": {
@@ -19,6 +19,7 @@
"build": "tsc --project . && tsc --project tsconfig.ui.json && vite build && vite build --config vite.sw.config.mts", "build": "tsc --project . && tsc --project tsconfig.ui.json && vite build && vite build --config vite.sw.config.mts",
"watch": "tsc --watch --project . & tsc --watch --project tsconfig.ui.json & vite build --watch & vite build --watch --config vite.sw.config.mts", "watch": "tsc --watch --project . & tsc --watch --project tsconfig.ui.json & vite build --watch & vite build --watch --config vite.sw.config.mts",
"test": "playwright test", "test": "playwright test",
"lint": "tsc --project .",
"clean": "rm -rf dist" "clean": "rm -rf dist"
}, },
"devDependencies": { "devDependencies": {
@@ -26,10 +27,11 @@
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22", "@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.0.0", "@vitejs/plugin-react": "^4.0.0",
"minimist": "^1.2.5",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"typescript": "^5.8.2", "typescript": "^5.8.2",
"vite": "^5.4.21", "vite": "^7.3.1",
"vite-plugin-static-copy": "^3.1.1" "vite-plugin-static-copy": "^3.1.1"
} }
} }

View File

@@ -16,7 +16,7 @@
import { defineConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
import type { TestOptions } from '../tests/fixtures'; import type { TestOptions } from '../playwright-mcp/tests/fixtures';
export default defineConfig<TestOptions>({ export default defineConfig<TestOptions>({
testDir: './tests', testDir: './tests',

View File

@@ -190,7 +190,6 @@ class TabShareExtension {
chrome.tabs.sendMessage(tabId, { type: 'connectionTimeout' }); chrome.tabs.sendMessage(tabId, { type: 'connectionTimeout' });
} }
}, 5000); }, 5000);
return;
} }
} }
} }

View File

@@ -44,8 +44,18 @@ const ConnectApp: React.FC = () => {
const relayUrl = params.get('mcpRelayUrl'); const relayUrl = params.get('mcpRelayUrl');
if (!relayUrl) { if (!relayUrl) {
setShowButtons(false); handleReject('Missing mcpRelayUrl parameter in URL.');
setStatus({ type: 'error', message: 'Missing mcpRelayUrl parameter in URL.' }); return;
}
try {
const host = new URL(relayUrl).hostname;
if (host !== '127.0.0.1' && host !== '[::1]') {
handleReject(`MCP extension only allows loopback connections (127.0.0.1 or [::1]). Received host: ${host}`);
return;
}
} catch (e) {
handleReject(`Invalid mcpRelayUrl parameter in URL: ${relayUrl}. ${e}`);
return; return;
} }

View File

@@ -0,0 +1,422 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import fs from 'fs/promises';
import path from 'path';
import { chromium } from 'playwright';
import { spawn } from 'child_process';
import { test as base, expect } from '../../playwright-mcp/tests/fixtures';
import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
import type { BrowserContext } from 'playwright';
import type { StartClient } from '../../playwright-mcp/tests/fixtures';
type BrowserWithExtension = {
userDataDir: string;
launch: (mode?: 'disable-extension') => Promise<BrowserContext>;
};
type CliResult = {
output: string;
error: string;
};
type TestFixtures = {
browserWithExtension: BrowserWithExtension,
pathToExtension: string,
useShortConnectionTimeout: (timeoutMs: number) => void
overrideProtocolVersion: (version: number) => void
cli: (...args: string[]) => Promise<CliResult>;
};
const extensionPublicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwRsUUO4mmbCi4JpmrIoIw31iVW9+xUJRZ6nSzya17PQkaUPDxe1IpgM+vpd/xB6mJWlJSyE1Lj95c0sbomGfVY1M0zUeKbaRVcAb+/a6m59gNR+ubFlmTX0nK9/8fE2FpRB9D+4N5jyeIPQuASW/0oswI2/ijK7hH5NTRX8gWc/ROMSgUj7rKhTAgBrICt/NsStgDPsxRTPPJnhJ/ViJtM1P5KsSYswE987DPoFnpmkFpq8g1ae0eYbQfXy55ieaacC4QWyJPj3daU2kMfBQw7MXnnk0H/WDxouMOIHnd8MlQxpEMqAihj7KpuONH+MUhuj9HEQo4df6bSaIuQ0b4QIDAQAB';
const extensionId = 'mmlmfjhmonkocbjadbfplnigmagldckm';
const test = base.extend<TestFixtures>({
pathToExtension: async ({}, use, testInfo) => {
const extensionDir = testInfo.outputPath('extension');
const srcDir = path.resolve(__dirname, '../dist');
await fs.cp(srcDir, extensionDir, { recursive: true });
const manifestPath = path.join(extensionDir, 'manifest.json');
const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'));
// We don't hardcode the key in manifest, but for the tests we set the key field
// to ensure that locally installed extension has the same id as the one published
// in the store.
manifest.key = extensionPublicKey;
await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
await use(extensionDir);
},
browserWithExtension: async ({ mcpBrowser, pathToExtension }, use, testInfo) => {
// The flags no longer work in Chrome since
// https://chromium.googlesource.com/chromium/src/+/290ed8046692651ce76088914750cb659b65fb17%5E%21/chrome/browser/extensions/extension_service.cc?pli=1#
test.skip('chromium' !== mcpBrowser, '--load-extension is not supported for official builds of Chromium');
let browserContext: BrowserContext | undefined;
const userDataDir = testInfo.outputPath('extension-user-data-dir');
await use({
userDataDir,
launch: async (mode?: 'disable-extension') => {
browserContext = await chromium.launchPersistentContext(userDataDir, {
channel: mcpBrowser,
// Opening the browser singleton only works in headed.
headless: false,
// Automation disables singleton browser process behavior, which is necessary for the extension.
ignoreDefaultArgs: ['--enable-automation'],
args: mode === 'disable-extension' ? [] : [
`--disable-extensions-except=${pathToExtension}`,
`--load-extension=${pathToExtension}`,
],
});
// for manifest v3:
let [serviceWorker] = browserContext.serviceWorkers();
if (!serviceWorker)
serviceWorker = await browserContext.waitForEvent('serviceworker');
return browserContext;
}
});
await browserContext?.close();
// Free up disk space.
await fs.rm(userDataDir, { recursive: true, force: true }).catch(() => {});
},
useShortConnectionTimeout: async ({}, use) => {
await use((timeoutMs: number) => {
process.env.PWMCP_TEST_CONNECTION_TIMEOUT = timeoutMs.toString();
});
process.env.PWMCP_TEST_CONNECTION_TIMEOUT = undefined;
},
overrideProtocolVersion: async ({}, use) => {
await use((version: number) => {
process.env.PWMCP_TEST_PROTOCOL_VERSION = version.toString();
});
process.env.PWMCP_TEST_PROTOCOL_VERSION = undefined;
},
cli: async ({ mcpBrowser }, use, testInfo) => {
await use(async (...args: string[]) => {
return await runCli(args, { mcpBrowser, testInfo });
});
// Cleanup sessions
await runCli(['close-all'], { mcpBrowser, testInfo }).catch(() => {});
const daemonDir = path.join(testInfo.outputDir, 'daemon');
await fs.rm(daemonDir, { recursive: true, force: true }).catch(() => {});
},
});
async function runCli(
args: string[],
options: { mcpBrowser?: string, testInfo: any },
): Promise<CliResult> {
const stepTitle = `cli ${args.join(' ')}`;
return await test.step(stepTitle, async () => {
const testInfo = options.testInfo;
// Path to the terminal CLI
const cliPath = path.join(__dirname, '../../../node_modules/playwright/lib/cli/client/program.js');
return new Promise<CliResult>((resolve, reject) => {
let stdout = '';
let stderr = '';
const childProcess = spawn(process.execPath, [cliPath, ...args], {
cwd: testInfo.outputPath(),
env: {
...process.env,
PLAYWRIGHT_DAEMON_INSTALL_DIR: testInfo.outputPath(),
PLAYWRIGHT_DAEMON_SESSION_DIR: testInfo.outputPath('daemon'),
PLAYWRIGHT_DAEMON_SOCKETS_DIR: path.join(testInfo.project.outputDir, 'daemon-sockets'),
PLAYWRIGHT_MCP_BROWSER: options.mcpBrowser,
PLAYWRIGHT_MCP_HEADLESS: 'false',
},
detached: true,
});
childProcess.stdout?.on('data', (data) => {
stdout += data.toString();
});
childProcess.stderr?.on('data', (data) => {
if (process.env.PWMCP_DEBUG)
process.stderr.write(data);
stderr += data.toString();
});
childProcess.on('close', async (code) => {
await testInfo.attach(stepTitle, { body: stdout, contentType: 'text/plain' });
resolve({
output: stdout.trim(),
error: stderr.trim(),
});
});
childProcess.on('error', reject);
});
});
}
async function startWithExtensionFlag(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
const { client } = await startClient({
args: [`--extension`],
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
return client;
}
const testWithOldExtensionVersion = test.extend({
pathToExtension: async ({ pathToExtension }, use, testInfo) => {
const manifestPath = path.join(pathToExtension, 'manifest.json');
const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'));
manifest.key = extensionPublicKey;
manifest.version = '0.0.1';
await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
await use(pathToExtension);
},
});
test(`navigate with extension`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const client = await startWithExtensionFlag(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const selectorPage = await confirmationPagePromise;
// For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
await selectorPage.getByRole('button', { name: 'Allow' }).click();
expect(await navigateResponse).toHaveResponse({
snapshot: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});
test(`snapshot of an existing page`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const page = await browserContext.newPage();
await page.goto(server.HELLO_WORLD);
// Another empty page.
await browserContext.newPage();
expect(browserContext.pages()).toHaveLength(3);
const client = await startWithExtensionFlag(browserWithExtension, startClient);
expect(browserContext.pages()).toHaveLength(3);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
const navigateResponse = client.callTool({
name: 'browser_snapshot',
arguments: { },
});
const selectorPage = await confirmationPagePromise;
expect(browserContext.pages()).toHaveLength(4);
await selectorPage.locator('.tab-item', { hasText: 'Title' }).getByRole('button', { name: 'Connect' }).click();
expect(await navigateResponse).toHaveResponse({
snapshot: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
expect(browserContext.pages()).toHaveLength(4);
});
test(`extension not installed timeout`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(100);
const browserContext = await browserWithExtension.launch();
const client = await startWithExtensionFlag(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
expect(await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
})).toHaveResponse({
error: expect.stringContaining('Extension connection timeout. Make sure the "Playwright MCP Bridge" extension is installed.'),
isError: true,
});
await confirmationPagePromise;
});
testWithOldExtensionVersion(`works with old extension version`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(500);
// Prelaunch the browser, so that it is properly closed after the test.
const browserContext = await browserWithExtension.launch();
const client = await startWithExtensionFlag(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const selectorPage = await confirmationPagePromise;
// For browser_navigate command, the UI shows Allow/Reject buttons instead of tab selector
await selectorPage.getByRole('button', { name: 'Allow' }).click();
expect(await navigateResponse).toHaveResponse({
snapshot: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});
test(`extension needs update`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout, overrideProtocolVersion }) => {
useShortConnectionTimeout(500);
overrideProtocolVersion(1000);
// Prelaunch the browser, so that it is properly closed after the test.
const browserContext = await browserWithExtension.launch();
const client = await startWithExtensionFlag(browserWithExtension, startClient);
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
const navigateResponse = client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
const confirmationPage = await confirmationPagePromise;
await expect(confirmationPage.locator('.status-banner')).toContainText(`Playwright MCP version trying to connect requires newer extension version`);
expect(await navigateResponse).toHaveResponse({
error: expect.stringContaining('Extension connection timeout.'),
isError: true,
});
});
test(`custom executablePath`, async ({ startClient, server, useShortConnectionTimeout }) => {
useShortConnectionTimeout(1000);
const executablePath = test.info().outputPath('echo.sh');
await fs.writeFile(executablePath, '#!/bin/bash\necho "Custom exec args: $@" > "$(dirname "$0")/output.txt"', { mode: 0o755 });
const { client } = await startClient({
args: [`--extension`],
config: {
browser: {
launchOptions: {
executablePath,
},
}
},
});
const navigateResponse = await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
expect(await navigateResponse).toHaveResponse({
error: expect.stringContaining('Extension connection timeout.'),
isError: true,
});
expect(await fs.readFile(test.info().outputPath('output.txt'), 'utf8')).toMatch(new RegExp(`Custom exec args.*chrome-extension://${extensionId}/connect\\.html\\?`));
});
test(`bypass connection dialog with token`, async ({ browserWithExtension, startClient, server }) => {
const browserContext = await browserWithExtension.launch();
const page = await browserContext.newPage();
await page.goto(`chrome-extension://${extensionId}/status.html`);
const token = await page.locator('.auth-token-code').textContent();
const [name, value] = token?.split('=') || [];
const { client } = await startClient({
args: [`--extension`],
extensionToken: value,
config: {
browser: {
userDataDir: browserWithExtension.userDataDir,
}
},
});
const navigateResponse = await client.callTool({
name: 'browser_navigate',
arguments: { url: server.HELLO_WORLD },
});
expect(await navigateResponse).toHaveResponse({
snapshot: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
});
});
test.describe('CLI with extension', () => {
test('open <url> --extension', async ({ browserWithExtension, cli, server }, testInfo) => {
const browserContext = await browserWithExtension.launch();
// Write config file with userDataDir
const configPath = testInfo.outputPath('cli-config.json');
await fs.writeFile(configPath, JSON.stringify({
browser: {
userDataDir: browserWithExtension.userDataDir,
}
}, null, 2));
const confirmationPagePromise = browserContext.waitForEvent('page', page => {
return page.url().startsWith(`chrome-extension://${extensionId}/connect.html`);
});
// Start the CLI command in the background
const cliPromise = cli('open', server.HELLO_WORLD, '--extension', `--config=cli-config.json`);
// Wait for the confirmation page to appear
const confirmationPage = await confirmationPagePromise;
// Click the Connect button
await confirmationPage.locator('.tab-item', { hasText: 'Playwright MCP extension' }).getByRole('button', { name: 'Connect' }).click();
// Wait for the CLI command to complete
const { output } = await cliPromise;
// Verify the output
expect(output).toContain(`### Page`);
expect(output).toContain(`- Page URL: ${server.HELLO_WORLD}`);
expect(output).toContain(`- Page Title: Title`);
});
});

View File

@@ -19,6 +19,10 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy'; import { viteStaticCopy } from 'vite-plugin-static-copy';
// Public key matching the Chrome Web Store listing — used to fix the extension ID across installs.
// Set SET_EXTENSION_PUBLIC_KEY_IN_MANIFEST=1 in release builds to inject it into the manifest.
const extensionPublicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwRsUUO4mmbCi4JpmrIoIw31iVW9+xUJRZ6nSzya17PQkaUPDxe1IpgM+vpd/xB6mJWlJSyE1Lj95c0sbomGfVY1M0zUeKbaRVcAb+/a6m59gNR+ubFlmTX0nK9/8fE2FpRB9D+4N5jyeIPQuASW/0oswI2/ijK7hH5NTRX8gWc/ROMSgUj7rKhTAgBrICt/NsStgDPsxRTPPJnhJ/ViJtM1P5KsSYswE987DPoFnpmkFpq8g1ae0eYbQfXy55ieaacC4QWyJPj3daU2kMfBQw7MXnnk0H/WDxouMOIHnd8MlQxpEMqAihj7KpuONH+MUhuj9HEQo4df6bSaIuQ0b4QIDAQAB';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
@@ -31,7 +35,14 @@ export default defineConfig({
}, },
{ {
src: '../../manifest.json', src: '../../manifest.json',
dest: '.' dest: '.',
...(!!process.env.SET_EXTENSION_PUBLIC_KEY_IN_MANIFEST ? {
transform: (content: string) => {
const manifest = JSON.parse(content);
manifest.key = extensionPublicKey;
return JSON.stringify(manifest, null, 2);
}
} : {})
} }
] ]
}) })

View File

@@ -0,0 +1,201 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright (c) Microsoft Corporation.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@@ -0,0 +1,7 @@
# 🎭 Playwright CLI
This package has moved to @playwright/cli.
```sh
$ npm i -g @playwright/cli
```

View File

@@ -0,0 +1,19 @@
{
"name": "playwright-cli",
"version": "0.262.0",
"description": "Deprecated package, use @playwright/cli instead.",
"repository": {
"type": "git",
"url": "git+https://github.com/microsoft/playwright-cli.git"
},
"homepage": "https://playwright.dev",
"scripts": {
"lint": "echo OK",
"build": "echo OK",
"test": "echo OK"
},
"author": {
"name": "Microsoft Corporation"
},
"license": "Apache-2.0"
}

2
packages/playwright-mcp/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
README.md
LICENSE

View File

@@ -1,6 +1,6 @@
**/* **/*
README.md !README.md
LICENSE !LICENSE
!cli.js !cli.js
!index.* !index.*
!config.d.ts !config.d.ts

View File

@@ -16,9 +16,17 @@
*/ */
const { program } = require('playwright-core/lib/utilsBundle'); const { program } = require('playwright-core/lib/utilsBundle');
const { decorateCommand } = require('playwright/lib/mcp/program'); const { decorateMCPCommand } = require('playwright-core/lib/tools/mcp/program');
if (process.argv.includes('install-browser')) {
const argv = process.argv.map(arg => arg === 'install-browser' ? 'install' : arg);
const { program: mainProgram } = require('playwright-core/lib/cli/program');
mainProgram.parse(argv);
return;
}
const packageJSON = require('./package.json'); const packageJSON = require('./package.json');
const p = program.version('Version ' + packageJSON.version).name('Playwright MCP'); const p = program.version('Version ' + packageJSON.version).name('Playwright MCP');
decorateCommand(p, packageJSON.version) decorateMCPCommand(p, packageJSON.version)
void program.parseAsync(process.argv); void program.parseAsync(process.argv);

View File

@@ -16,7 +16,19 @@
import type * as playwright from 'playwright'; import type * as playwright from 'playwright';
export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'testing' | 'tracing'; export type ToolCapability =
'config' |
'core' |
'core-navigation' |
'core-tabs' |
'core-input' |
'core-install' |
'network' |
'pdf' |
'storage' |
'testing' |
'vision' |
'devtools';
export type Config = { export type Config = {
/** /**
@@ -64,11 +76,21 @@ export type Config = {
*/ */
cdpHeaders?: Record<string, string>; cdpHeaders?: Record<string, string>;
/**
* Timeout in milliseconds for connecting to CDP endpoint. Defaults to 30000 (30 seconds). Pass 0 to disable timeout.
*/
cdpTimeout?: number;
/** /**
* Remote endpoint to connect to an existing Playwright server. * Remote endpoint to connect to an existing Playwright server.
*/ */
remoteEndpoint?: string; remoteEndpoint?: string;
/**
* Paths to TypeScript files to add as initialization scripts for Playwright page.
*/
initPage?: string[];
/** /**
* Paths to JavaScript files to add as initialization scripts. * Paths to JavaScript files to add as initialization scripts.
* The scripts will be evaluated in every page before any of the page's scripts. * The scripts will be evaluated in every page before any of the page's scripts.
@@ -76,6 +98,13 @@ export type Config = {
initScript?: string[]; initScript?: string[];
}, },
/**
* Connect to a running browser instance (Edge/Chrome only). If specified, `browser`
* config is ignored.
* Requires the "Playwright MCP Bridge" browser extension to be installed.
*/
extension?: boolean;
server?: { server?: {
/** /**
* The port to listen on for SSE or MCP transport. * The port to listen on for SSE or MCP transport.
@@ -99,6 +128,7 @@ export type Config = {
* - 'core': Core browser automation features. * - 'core': Core browser automation features.
* - 'pdf': PDF generation and manipulation. * - 'pdf': PDF generation and manipulation.
* - 'vision': Coordinate-based interactions. * - 'vision': Coordinate-based interactions.
* - 'devtools': Developer tools features.
*/ */
capabilities?: ToolCapability[]; capabilities?: ToolCapability[];
@@ -107,19 +137,6 @@ export type Config = {
*/ */
saveSession?: boolean; saveSession?: boolean;
/**
* Whether to save the Playwright trace of the session into the output directory.
*/
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. * Reuse the same browser context between all connected HTTP clients.
*/ */
@@ -137,14 +154,34 @@ export type Config = {
*/ */
outputDir?: string; outputDir?: string;
/**
* Whether to save snapshots, console messages, network logs and other session logs to a file or to the standard output. Defaults to "stdout".
*/
outputMode?: 'file' | 'stdout';
console?: {
/**
* The level of console messages to return. Each level includes the messages of more severe levels. Defaults to "info".
*/
level?: 'error' | 'warning' | 'info' | 'debug';
},
network?: { network?: {
/** /**
* List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. * List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
*
* Supported formats:
* - Full origin: `https://example.com:8080` - matches only that origin
* - Wildcard port: `http://localhost:*` - matches any port on localhost with http protocol
*/ */
allowedOrigins?: string[]; allowedOrigins?: string[];
/** /**
* List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. * List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
*
* Supported formats:
* - Full origin: `https://example.com:8080` - matches only that origin
* - Wildcard port: `http://localhost:*` - matches any port on localhost with http protocol
*/ */
blockedOrigins?: string[]; blockedOrigins?: string[];
}; };
@@ -164,11 +201,33 @@ export type Config = {
* Configures default navigation timeout: https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout. Defaults to 60000ms. * Configures default navigation timeout: https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout. Defaults to 60000ms.
*/ */
navigation?: number; navigation?: number;
/**
* Configures default expect timeout: https://playwright.dev/docs/test-timeouts#expect-timeout. Defaults to 5000ms.
*/
expect?: number;
}; };
/** /**
* Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them. * Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.
*/ */
imageResponses?: 'allow' | 'omit'; imageResponses?: 'allow' | 'omit';
};
snapshot?: {
/**
* When taking snapshots for responses, specifies the mode to use.
*/
mode?: 'incremental' | 'full' | 'none';
};
/**
* Whether to allow file uploads from anywhere on the file system.
* By default (false), file uploads are restricted to paths within the MCP roots only.
*/
allowUnrestrictedFileAccess?: boolean;
/**
* Specify the language to use for code generation.
*/
codegen?: 'typescript' | 'none';
};

View File

@@ -15,5 +15,5 @@
* limitations under the License. * limitations under the License.
*/ */
const { createConnection } = require('playwright/lib/mcp/index'); const { createConnection } = require('playwright-core/lib/tools/exports');
module.exports = { createConnection }; module.exports = { createConnection };

View File

@@ -0,0 +1,42 @@
{
"name": "@playwright/mcp",
"version": "0.0.68",
"description": "Playwright Tools for MCP",
"repository": {
"type": "git",
"url": "git+https://github.com/microsoft/playwright-mcp.git"
},
"homepage": "https://playwright.dev",
"engines": {
"node": ">=18"
},
"author": {
"name": "Microsoft Corporation"
},
"license": "Apache-2.0",
"mcpName": "io.github.microsoft/playwright-mcp",
"scripts": {
"lint": "node update-readme.js",
"test": "playwright test",
"ctest": "playwright test --project=chrome",
"ftest": "playwright test --project=firefox",
"wtest": "playwright test --project=webkit",
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
"build": "echo OK",
"npm-publish": "npm run lint && npm run test && npm publish"
},
"exports": {
"./package.json": "./package.json",
".": {
"types": "./index.d.ts",
"default": "./index.js"
}
},
"dependencies": {
"playwright": "1.59.0-alpha-1773608981000",
"playwright-core": "1.59.0-alpha-1773608981000"
},
"bin": {
"playwright-mcp": "cli.js"
}
}

View File

@@ -0,0 +1,3 @@
# Where is the source?
Playwright MCP source code is located in the [Playwright monorepo](https://github.com/microsoft/playwright/blob/main/packages/playwright/src/mcp). Please refer to the contributor's guide in [CONTRIBUTING.md](../CONTRIBUTING.md) for more details.

View File

@@ -30,43 +30,12 @@ test('test snapshot tool list', async ({ client }) => {
'browser_select_option', 'browser_select_option',
'browser_type', 'browser_type',
'browser_close', 'browser_close',
'browser_install',
'browser_navigate_back',
'browser_navigate',
'browser_network_requests',
'browser_press_key',
'browser_resize',
'browser_snapshot',
'browser_tabs',
'browser_take_screenshot',
'browser_wait_for',
]));
});
test('test tool list proxy mode', async ({ startClient }) => {
const { client } = await startClient({
args: ['--connect-tool'],
});
const { tools } = await client.listTools();
expect(new Set(tools.map(t => t.name))).toEqual(new Set([
'browser_click',
'browser_connect', // the extra tool
'browser_console_messages',
'browser_drag',
'browser_evaluate',
'browser_file_upload',
'browser_fill_form',
'browser_handle_dialog',
'browser_hover',
'browser_select_option',
'browser_type',
'browser_close',
'browser_install',
'browser_navigate_back', 'browser_navigate_back',
'browser_navigate', 'browser_navigate',
'browser_network_requests', 'browser_network_requests',
'browser_press_key', 'browser_press_key',
'browser_resize', 'browser_resize',
'browser_run_code',
'browser_snapshot', 'browser_snapshot',
'browser_tabs', 'browser_tabs',
'browser_take_screenshot', 'browser_take_screenshot',

View File

@@ -0,0 +1,25 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import child_process from 'child_process';
import path from 'path';
import { test, expect } from './fixtures';
const cliPath = path.resolve(__dirname, '..', 'cli.js');
test('install-browser --help', async () => {
const output = child_process.execSync(`node ${cliPath} install-browser --help`, { encoding: 'utf-8' });
expect(output).toContain('install');
});

View File

@@ -33,7 +33,7 @@ test('browser_click', async ({ client, server }) => {
arguments: { url: server.PREFIX }, arguments: { url: server.PREFIX },
})).toHaveResponse({ })).toHaveResponse({
code: `await page.goto('${server.PREFIX}');`, code: `await page.goto('${server.PREFIX}');`,
pageState: expect.stringContaining(`- button \"Submit\" [ref=e2]`), snapshot: expect.stringContaining(`- button \"Submit\" [ref=e2]`),
}); });
expect(await client.callTool({ expect(await client.callTool({
@@ -44,6 +44,6 @@ test('browser_click', async ({ client, server }) => {
}, },
})).toHaveResponse({ })).toHaveResponse({
code: `await page.getByRole('button', { name: 'Submit' }).click();`, code: `await page.getByRole('button', { name: 'Submit' }).click();`,
pageState: expect.stringContaining(`button "Submit" [active] [ref=e2]`), snapshot: expect.stringContaining(`button "Submit" [active] [ref=e2]`),
}); });
}); });

View File

@@ -22,11 +22,6 @@ test('browser_navigate', async ({ client, server }) => {
arguments: { url: server.HELLO_WORLD }, arguments: { url: server.HELLO_WORLD },
})).toHaveResponse({ })).toHaveResponse({
code: `await page.goto('${server.HELLO_WORLD}');`, code: `await page.goto('${server.HELLO_WORLD}');`,
pageState: `- Page URL: ${server.HELLO_WORLD} snapshot: expect.stringContaining(`generic [active] [ref=e1]: Hello, world!`),
- Page Title: Title
- Page Snapshot:
\`\`\`yaml
- generic [active] [ref=e1]: Hello, world!
\`\`\``,
}); });
}); });

View File

@@ -229,7 +229,7 @@ export const expect = baseExpect.extend({
expect(parsed).not.toEqual(expect.objectContaining(object)); expect(parsed).not.toEqual(expect.objectContaining(object));
else else
expect(parsed).toEqual(expect.objectContaining(object)); expect(parsed).toEqual(expect.objectContaining(object));
} catch (e) { } catch (e: any) {
return { return {
pass: isNot, pass: isNot,
message: () => e.message, message: () => e.message,
@@ -250,10 +250,12 @@ function parseResponse(response: any) {
const text = response.content[0].text; const text = response.content[0].text;
const sections = parseSections(text); const sections = parseSections(text);
const error = sections.get('Error');
const result = sections.get('Result'); const result = sections.get('Result');
const code = sections.get('Ran Playwright code'); const code = sections.get('Ran Playwright code');
const tabs = sections.get('Open tabs'); const tabs = sections.get('Open tabs');
const pageState = sections.get('Page state'); const pageState = sections.get('Page state');
const snapshot = sections.get('Snapshot');
const consoleMessages = sections.get('New console messages'); const consoleMessages = sections.get('New console messages');
const modalState = sections.get('Modal state'); const modalState = sections.get('Modal state');
const downloads = sections.get('Downloads'); const downloads = sections.get('Downloads');
@@ -262,10 +264,12 @@ function parseResponse(response: any) {
const attachments = response.content.slice(1); const attachments = response.content.slice(1);
return { return {
error,
result, result,
code: codeNoFrame, code: codeNoFrame,
tabs, tabs,
pageState, pageState,
snapshot,
consoleMessages, consoleMessages,
modalState, modalState,
downloads, downloads,

View File

@@ -18,22 +18,49 @@
const fs = require('fs') const fs = require('fs')
const path = require('path') const path = require('path')
const { zodToJsonSchema } = require('zod-to-json-schema')
const { execSync } = require('child_process'); const { execSync } = require('child_process');
const { browserTools } = require('playwright/lib/mcp/browser/tools'); const { browserTools } = require('playwright-core/lib/tools/exports');
const capabilities = { const capabilities = /** @type {Record<string, string>} */ ({
'core-navigation': 'Core automation',
'core': 'Core automation', 'core': 'Core automation',
'core-tabs': 'Tab management', 'core-tabs': 'Tab management',
'core-input': 'Core automation',
'core-install': 'Browser installation', 'core-install': 'Browser installation',
'vision': 'Coordinate-based (opt-in via --caps=vision)', 'config': 'Configuration',
'pdf': 'PDF generation (opt-in via --caps=pdf)', 'network': 'Network',
'testing': 'Test assertions (opt-in via --caps=testing)', 'storage': 'Storage',
'tracing': 'Tracing (opt-in via --caps=tracing)', 'devtools': 'DevTools',
}; 'vision': 'Coordinate-based',
'pdf': 'PDF generation',
'testing': 'Test assertions',
});
const toolsByCapability = Object.fromEntries(Object.entries(capabilities).map(([capability, title]) => [title, browserTools.filter(tool => tool.capability === capability).sort((a, b) => a.schema.name.localeCompare(b.schema.name))])); const knownCapabilities = new Set(Object.keys(capabilities));
const unknownCapabilities = [...new Set(browserTools.map(tool => tool.capability))].filter(cap => !knownCapabilities.has(cap));
if (unknownCapabilities.length)
throw new Error(`Unknown tool capabilities: ${unknownCapabilities.join(', ')}. Please update the capabilities map in ${path.basename(__filename)}.`);
/** @type {Record<string, any[]>} */
const toolsByCapability = {};
for (const capability of Object.keys(capabilities)) {
const title = capabilityTitle(capability);
let tools = browserTools.filter(tool => tool.capability === capability && !tool.skillOnly);
tools = (toolsByCapability[title] || []).concat(tools);
toolsByCapability[title] = tools;
}
for (const [, tools] of Object.entries(toolsByCapability))
tools.sort((a, b) => a.schema.name.localeCompare(b.schema.name));
/**
* @param {string} capability
* @returns {string}
*/
function capabilityTitle(capability) {
const title = capabilities[capability];
return capability.startsWith('core') ? title : `${title} (opt-in via --caps=${capability})`;
}
/** /**
* @param {any} tool * @param {any} tool
@@ -47,7 +74,7 @@ function formatToolForReadme(tool) {
lines.push(` - Title: ${tool.title}`); lines.push(` - Title: ${tool.title}`);
lines.push(` - Description: ${tool.description}`); lines.push(` - Description: ${tool.description}`);
const inputSchema = /** @type {any} */ (zodToJsonSchema(tool.inputSchema || {})); const inputSchema = /** @type {any} */ (tool.inputSchema ? tool.inputSchema.toJSONSchema() : {});
const requiredParams = inputSchema.required || []; const requiredParams = inputSchema.required || [];
if (inputSchema.properties && Object.keys(inputSchema.properties).length) { if (inputSchema.properties && Object.keys(inputSchema.properties).length) {
lines.push(` - Parameters:`); lines.push(` - Parameters:`);
@@ -119,29 +146,102 @@ async function updateTools(content) {
*/ */
async function updateOptions(content) { async function updateOptions(content) {
console.log('Listing options...'); console.log('Listing options...');
const output = execSync('node cli.js --help'); execSync('node cli.js --help > help.txt');
const output = fs.readFileSync('help.txt');
fs.unlinkSync('help.txt');
const lines = output.toString().split('\n'); const lines = output.toString().split('\n');
const firstLine = lines.findIndex(line => line.includes('--version')); const firstLine = lines.findIndex(line => line.includes('--version'));
lines.splice(0, firstLine + 1); lines.splice(0, firstLine + 1);
const lastLine = lines.findIndex(line => line.includes('--help')); const lastLine = lines.findIndex(line => line.includes('--help'));
lines.splice(lastLine); lines.splice(lastLine);
/**
* @type {{ name: string, value: string }[]}
*/
const options = [];
for (let line of lines) {
if (line.startsWith(' --')) {
const l = line.substring(' --'.length);
const gapIndex = l.indexOf(' ');
const name = l.substring(0, gapIndex).trim();
const value = l.substring(gapIndex).trim();
options.push({ name, value });
} else {
const value = line.trim();
options[options.length - 1].value += ' ' + value;
}
}
const table = [];
table.push(`| Option | Description |`);
table.push(`|--------|-------------|`);
for (const option of options) {
const prefix = option.name.split(' ')[0];
const envName = `PLAYWRIGHT_MCP_` + prefix.toUpperCase().replace(/-/g, '_');
table.push(`| --${option.name} | ${option.value}<br>*env* \`${envName}\` |`);
}
if (process.env.PRINT_ENV) {
const envTable = [];
envTable.push(`| Environment |`);
envTable.push(`|-------------|`);
for (const option of options) {
const prefix = option.name.split(' ')[0];
const envName = `PLAYWRIGHT_MCP_` + prefix.toUpperCase().replace(/-/g, '_');
envTable.push(`| \`${envName}\` ${option.value} |`);
}
console.log(envTable.join('\n'));
}
const startMarker = `<!--- Options generated by ${path.basename(__filename)} -->`; const startMarker = `<!--- Options generated by ${path.basename(__filename)} -->`;
const endMarker = `<!--- End of options generated section -->`; const endMarker = `<!--- End of options generated section -->`;
return updateSection(content, startMarker, endMarker, table);
}
/**
* @param {string} content
* @returns {Promise<string>}
*/
async function updateConfig(content) {
console.log('Updating config schema from config.d.ts...');
const configPath = path.join(__dirname, 'config.d.ts');
const configContent = await fs.promises.readFile(configPath, 'utf-8');
// Extract the Config type definition
const configTypeMatch = configContent.match(/export type Config = (\{[\s\S]*?\n\});/);
if (!configTypeMatch)
throw new Error('Config type not found in config.d.ts');
const configType = configTypeMatch[1]; // Use capture group to get just the object definition
const startMarker = `<!--- Config generated by ${path.basename(__filename)} -->`;
const endMarker = `<!--- End of config generated section -->`;
return updateSection(content, startMarker, endMarker, [ return updateSection(content, startMarker, endMarker, [
'```', '```typescript',
'> npx @playwright/mcp@latest --help', configType,
...lines,
'```', '```',
]); ]);
} }
/**
* @param {string} filePath
*/
async function copyToPackage(filePath) {
await fs.promises.copyFile(path.join(__dirname, '../../', filePath), path.join(__dirname, filePath));
console.log(`${filePath} copied successfully`);
}
async function updateReadme() { async function updateReadme() {
const readmePath = path.join(__dirname, 'README.md'); const readmePath = path.join(__dirname, '../../README.md');
const readmeContent = await fs.promises.readFile(readmePath, 'utf-8'); const readmeContent = await fs.promises.readFile(readmePath, 'utf-8');
const withTools = await updateTools(readmeContent); const withTools = await updateTools(readmeContent);
const withOptions = await updateOptions(withTools); const withOptions = await updateOptions(withTools);
await fs.promises.writeFile(readmePath, withOptions, 'utf-8'); const withConfig = await updateConfig(withOptions);
await fs.promises.writeFile(readmePath, withConfig, 'utf-8');
console.log('README updated successfully'); console.log('README updated successfully');
await copyToPackage('README.md');
await copyToPackage('LICENSE');
} }
updateReadme().catch(err => { updateReadme().catch(err => {

58
roll.js Normal file
View File

@@ -0,0 +1,58 @@
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
function copyConfig() {
const src = path.join(__dirname, '..', 'playwright', 'packages', 'playwright-core', 'src', 'tools', 'mcp', 'config.d.ts');
const dst = path.join(__dirname, 'packages', 'playwright-mcp', 'config.d.ts');
let content = fs.readFileSync(src, 'utf-8');
content = content.replace(
"import type * as playwright from 'playwright-core';",
"import type * as playwright from 'playwright';"
);
fs.writeFileSync(dst, content);
console.log(`Copied config.d.ts from ${src} to ${dst}`);
}
function updatePlaywrightVersion(version) {
const packagesDir = path.join(__dirname, 'packages');
const files = [path.join(__dirname, 'package.json')];
for (const entry of fs.readdirSync(packagesDir, { withFileTypes: true })) {
const pkgJson = path.join(packagesDir, entry.name, 'package.json');
if (fs.existsSync(pkgJson))
files.push(pkgJson);
}
for (const file of files) {
const json = JSON.parse(fs.readFileSync(file, 'utf-8'));
let updated = false;
for (const section of ['dependencies', 'devDependencies']) {
for (const pkg of ['@playwright/test', 'playwright', 'playwright-core']) {
if (json[section]?.[pkg]) {
json[section][pkg] = version;
updated = true;
}
}
}
if (updated) {
fs.writeFileSync(file, JSON.stringify(json, null, 2) + '\n');
console.log(`Updated ${file}`);
}
}
execSync('npm install', { cwd: __dirname, stdio: 'inherit' });
}
function doRoll(version) {
updatePlaywrightVersion(version);
copyConfig();
// update readme
execSync('npm run lint', { cwd: __dirname, stdio: 'inherit' });
}
let version = process.argv[2];
if (!version) {
version = execSync('npm info playwright@next version', { encoding: 'utf-8' }).trim();
console.log(`Using next playwright version: ${version}`);
}
doRoll(version);

View File

@@ -1,3 +0,0 @@
# Where is the source?
Playwright MCP source code is located in the Playwright monorepo. Please refer to the contributor's guide in [CONTRIBUTING.md](../CONTRIBUTING.md) for more details.