mirror of
https://github.com/microsoft/playwright-mcp.git
synced 2026-02-02 08:33:39 +00:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
29e532687c | ||
|
|
d149b89889 | ||
|
|
1caecd00c7 | ||
|
|
9657b58e17 | ||
|
|
8dfea1c67f | ||
|
|
a86b580797 | ||
|
|
927e570c18 | ||
|
|
24e68fa41d | ||
|
|
e50322731b | ||
|
|
711089d261 | ||
|
|
4a7be8de75 | ||
|
|
1523338246 |
47
.github/workflows/publish-canary.yml
vendored
47
.github/workflows/publish-canary.yml
vendored
@@ -1,47 +0,0 @@
|
|||||||
name: Publish Canary
|
|
||||||
on:
|
|
||||||
schedule:
|
|
||||||
- cron: '0 8 * * *'
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
publish-canary:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
id-token: write # Needed for npm provenance
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
- uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 18
|
|
||||||
registry-url: https://registry.npmjs.org/
|
|
||||||
|
|
||||||
- name: Get current date
|
|
||||||
id: date
|
|
||||||
run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Get current version
|
|
||||||
id: version
|
|
||||||
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Set canary version
|
|
||||||
id: canary-version
|
|
||||||
run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: Update package.json version
|
|
||||||
run: |
|
|
||||||
npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
|
|
||||||
|
|
||||||
- run: npm ci
|
|
||||||
- run: npx playwright install --with-deps
|
|
||||||
- run: npm run lint
|
|
||||||
- run: npm run ctest
|
|
||||||
|
|
||||||
- name: Publish to npm with next tag
|
|
||||||
run: npm publish --tag next --provenance
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
||||||
|
|
||||||
- name: Reset package.json version
|
|
||||||
run: git checkout -- package.json
|
|
||||||
74
.github/workflows/publish.yml
vendored
74
.github/workflows/publish.yml
vendored
@@ -1,35 +1,82 @@
|
|||||||
name: Publish
|
name: Publish
|
||||||
on:
|
on:
|
||||||
|
workflow_dispatch:
|
||||||
|
schedule:
|
||||||
|
- cron: '0 8 * * *'
|
||||||
release:
|
release:
|
||||||
types: [published]
|
types: [published]
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
publish-npm:
|
publish-canary-npm:
|
||||||
|
if: github.event.schedule || github.event_name == 'workflow_dispatch'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
id-token: write # Needed for npm provenance
|
id-token: write # Required for OIDC npm publishing
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v5
|
||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 20
|
||||||
registry-url: https://registry.npmjs.org/
|
registry-url: https://registry.npmjs.org/
|
||||||
|
# Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
|
||||||
|
- name: Update npm
|
||||||
|
run: npm install -g npm@latest
|
||||||
|
|
||||||
|
- name: Get current date
|
||||||
|
id: date
|
||||||
|
run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Get current version
|
||||||
|
id: version
|
||||||
|
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Set canary version
|
||||||
|
id: canary-version
|
||||||
|
run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
- name: Update package.json version
|
||||||
|
run: |
|
||||||
|
npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
|
||||||
|
|
||||||
- run: npm ci
|
- run: npm ci
|
||||||
- run: npx playwright install --with-deps
|
- run: npx playwright install --with-deps
|
||||||
- run: npm run lint
|
- run: npm run lint
|
||||||
- run: npm run ctest
|
- run: npm run ctest
|
||||||
- run: npm publish --provenance
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
||||||
|
|
||||||
publish-docker:
|
- name: Publish to npm with next tag
|
||||||
|
run: npm publish --tag next
|
||||||
|
|
||||||
|
publish-release-npm:
|
||||||
|
if: github.event_name == 'release'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
id-token: write # Required for OIDC npm publishing
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v5
|
||||||
|
- uses: actions/setup-node@v5
|
||||||
|
with:
|
||||||
|
node-version: 20
|
||||||
|
registry-url: https://registry.npmjs.org/
|
||||||
|
# Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
|
||||||
|
- name: Update npm
|
||||||
|
run: npm install -g npm@latest
|
||||||
|
- run: npm ci
|
||||||
|
- run: npx playwright install --with-deps
|
||||||
|
- run: npm run lint
|
||||||
|
- run: npm run ctest
|
||||||
|
- run: npm publish
|
||||||
|
|
||||||
|
publish-release-docker:
|
||||||
|
if: github.event_name == 'release'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
id-token: write # Needed for OIDC login to Azure
|
id-token: write # Needed for OIDC login to Azure
|
||||||
environment: allow-publishing-docker-to-acr
|
environment: allow-publishing-docker-to-acr
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- name: Set up QEMU # Needed for multi-platform builds (e.g., arm64 on amd64 runner)
|
- name: Set up QEMU # Needed for multi-platform builds (e.g., arm64 on amd64 runner)
|
||||||
uses: docker/setup-qemu-action@v3
|
uses: docker/setup-qemu-action@v3
|
||||||
- name: Set up Docker Buildx # Needed for multi-platform builds
|
- name: Set up Docker Buildx # Needed for multi-platform builds
|
||||||
@@ -68,13 +115,14 @@ jobs:
|
|||||||
attach_eol_manifest $tag
|
attach_eol_manifest $tag
|
||||||
done
|
done
|
||||||
|
|
||||||
package-extension:
|
package-release-extension:
|
||||||
|
if: github.event_name == 'release'
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: write # Needed to upload release assets
|
contents: write # Needed to upload release assets
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v5
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v5
|
||||||
with:
|
with:
|
||||||
node-version: 20
|
node-version: 20
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|||||||
30
README.md
30
README.md
@@ -180,6 +180,10 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
|
|
||||||
```
|
```
|
||||||
> npx @playwright/mcp@latest --help
|
> npx @playwright/mcp@latest --help
|
||||||
|
--allowed-hosts <hosts...> comma-separated list of hosts this
|
||||||
|
server is allowed to serve from.
|
||||||
|
Defaults to the host the server is bound
|
||||||
|
to. Pass '*' to disable the host check.
|
||||||
--allowed-origins <origins> semicolon-separated list of origins to
|
--allowed-origins <origins> semicolon-separated list of origins to
|
||||||
allow the browser to request. Default is
|
allow the browser to request. Default is
|
||||||
to allow all.
|
to allow all.
|
||||||
@@ -217,6 +221,11 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
localhost. Use 0.0.0.0 to bind to all
|
localhost. Use 0.0.0.0 to bind to all
|
||||||
interfaces.
|
interfaces.
|
||||||
--ignore-https-errors ignore https errors
|
--ignore-https-errors ignore https errors
|
||||||
|
--init-script <path...> path to JavaScript file to add as an
|
||||||
|
initialization script. The script will
|
||||||
|
be evaluated in every page before any of
|
||||||
|
the page's scripts. Can be specified
|
||||||
|
multiple times.
|
||||||
--isolated keep the browser profile in memory, do
|
--isolated keep the browser profile in memory, do
|
||||||
not save it to disk.
|
not save it to disk.
|
||||||
--image-responses <mode> whether to send image responses to the
|
--image-responses <mode> whether to send image responses to the
|
||||||
@@ -236,6 +245,9 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
session into the output directory.
|
session into the output directory.
|
||||||
--save-trace Whether to save the Playwright Trace of
|
--save-trace Whether to save the Playwright Trace of
|
||||||
the session into the output directory.
|
the session into the output directory.
|
||||||
|
--save-video <size> Whether to save the video of the session
|
||||||
|
into the output directory. For example
|
||||||
|
"--save-video=800x600"
|
||||||
--secrets <path> path to a file containing secrets in the
|
--secrets <path> path to a file containing secrets in the
|
||||||
dotenv format
|
dotenv format
|
||||||
--shared-browser-context reuse the same browser context between
|
--shared-browser-context reuse the same browser context between
|
||||||
@@ -251,7 +263,7 @@ Playwright MCP server supports following arguments. They can be provided in the
|
|||||||
specified, a temporary directory will be
|
specified, a temporary directory will be
|
||||||
created.
|
created.
|
||||||
--viewport-size <size> specify browser viewport size in pixels,
|
--viewport-size <size> specify browser viewport size in pixels,
|
||||||
for example "1280, 720"
|
for example "1280x720"
|
||||||
```
|
```
|
||||||
|
|
||||||
<!--- End of options generated section -->
|
<!--- End of options generated section -->
|
||||||
@@ -422,6 +434,19 @@ And then in MCP client config, set the `url` to the HTTP endpoint:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Or If you prefer to run the container as a long-lived service instead of letting the MCP client spawn it, use:
|
||||||
|
|
||||||
|
```
|
||||||
|
docker run -d -i --rm --init --pull=always \
|
||||||
|
--entrypoint node \
|
||||||
|
--name playwright \
|
||||||
|
-p 8931:8931 \
|
||||||
|
mcr.microsoft.com/playwright/mcp \
|
||||||
|
cli.js --headless --browser chromium --no-sandbox --port 8931
|
||||||
|
```
|
||||||
|
|
||||||
|
The server will listen on host port **8931** and can be reached by any MCP client.
|
||||||
|
|
||||||
You can build the Docker image yourself.
|
You can build the Docker image yourself.
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -484,7 +509,8 @@ http.createServer(async (req, res) => {
|
|||||||
- **browser_console_messages**
|
- **browser_console_messages**
|
||||||
- Title: Get console messages
|
- Title: Get console messages
|
||||||
- Description: Returns all console messages
|
- Description: Returns all console messages
|
||||||
- Parameters: None
|
- Parameters:
|
||||||
|
- `onlyErrors` (boolean, optional): Only return error messages
|
||||||
- Read-only: **true**
|
- Read-only: **true**
|
||||||
|
|
||||||
<!-- NOTE: This has been generated via update-readme.js -->
|
<!-- NOTE: This has been generated via update-readme.js -->
|
||||||
|
|||||||
28
config.d.ts
vendored
28
config.d.ts
vendored
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
import type * as playwright from 'playwright';
|
import type * as playwright from 'playwright';
|
||||||
|
|
||||||
export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'verify';
|
export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'testing' | 'tracing';
|
||||||
|
|
||||||
export type Config = {
|
export type Config = {
|
||||||
/**
|
/**
|
||||||
@@ -68,6 +68,12 @@ export type Config = {
|
|||||||
* Remote endpoint to connect to an existing Playwright server.
|
* Remote endpoint to connect to an existing Playwright server.
|
||||||
*/
|
*/
|
||||||
remoteEndpoint?: string;
|
remoteEndpoint?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Paths to JavaScript files to add as initialization scripts.
|
||||||
|
* The scripts will be evaluated in every page before any of the page's scripts.
|
||||||
|
*/
|
||||||
|
initScript?: string[];
|
||||||
},
|
},
|
||||||
|
|
||||||
server?: {
|
server?: {
|
||||||
@@ -80,6 +86,12 @@ export type Config = {
|
|||||||
* The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
|
* The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
|
||||||
*/
|
*/
|
||||||
host?: string;
|
host?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The hosts this server is allowed to serve from. Defaults to the host server is bound to.
|
||||||
|
* This is not for CORS, but rather for the DNS rebinding protection.
|
||||||
|
*/
|
||||||
|
allowedHosts?: string[];
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -100,6 +112,19 @@ export type Config = {
|
|||||||
*/
|
*/
|
||||||
saveTrace?: boolean;
|
saveTrace?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If specified, saves the Playwright video of the session into the output directory.
|
||||||
|
*/
|
||||||
|
saveVideo?: {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reuse the same browser context between all connected HTTP clients.
|
||||||
|
*/
|
||||||
|
sharedBrowserContext?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Secrets are used to prevent LLM from getting sensitive data while
|
* Secrets are used to prevent LLM from getting sensitive data while
|
||||||
* automating scenarios such as authentication.
|
* automating scenarios such as authentication.
|
||||||
@@ -141,3 +166,4 @@ export type Config = {
|
|||||||
*/
|
*/
|
||||||
imageResponses?: 'allow' | 'omit';
|
imageResponses?: 'allow' | 'omit';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "Playwright MCP Bridge",
|
"name": "Playwright MCP Bridge",
|
||||||
"version": "0.0.39",
|
"version": "0.0.41",
|
||||||
"description": "Share browser tabs with Playwright MCP server",
|
"description": "Share browser tabs with Playwright MCP server",
|
||||||
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9nMS2b0WCohjVHPGb8D9qAdkbIngDqoAjTeSccHJijgcONejge+OJxOQOMLu7b0ovt1c9BiEJa5JcpM+EHFVGL1vluBxK71zmBy1m2f9vZF3HG0LSCp7YRkum9rAIEthDwbkxx6XTvpmAY5rjFa/NON6b9Hlbo+8peUSkoOK7HTwYnnI36asZ9eUTiveIf+DMPLojW2UX33vDWG2UKvMVDewzclb4+uLxAYshY7Mx8we/b44xu+Anb/EBLKjOPk9Yh541xJ5Ozc8EiP/5yxOp9c/lRiYUHaRW+4r0HKZyFt0eZ52ti2iM4Nfk7jRXR7an3JPsUIf5deC/1cVM/+1ZQIDAQAB",
|
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9nMS2b0WCohjVHPGb8D9qAdkbIngDqoAjTeSccHJijgcONejge+OJxOQOMLu7b0ovt1c9BiEJa5JcpM+EHFVGL1vluBxK71zmBy1m2f9vZF3HG0LSCp7YRkum9rAIEthDwbkxx6XTvpmAY5rjFa/NON6b9Hlbo+8peUSkoOK7HTwYnnI36asZ9eUTiveIf+DMPLojW2UX33vDWG2UKvMVDewzclb4+uLxAYshY7Mx8we/b44xu+Anb/EBLKjOPk9Yh541xJ5Ozc8EiP/5yxOp9c/lRiYUHaRW+4r0HKZyFt0eZ52ti2iM4Nfk7jRXR7an3JPsUIf5deC/1cVM/+1ZQIDAQAB",
|
||||||
"permissions": [
|
"permissions": [
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp-extension",
|
"name": "@playwright/mcp-extension",
|
||||||
"version": "0.0.39",
|
"version": "0.0.41",
|
||||||
"description": "Playwright MCP Browser Extension",
|
"description": "Playwright MCP Browser Extension",
|
||||||
"private": true,
|
"private": true,
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|||||||
@@ -68,3 +68,75 @@
|
|||||||
.auth-token-refresh:not(:disabled):hover {
|
.auth-token-refresh:not(:disabled):hover {
|
||||||
background-color: var(--color-btn-selected-bg);
|
background-color: var(--color-btn-selected-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.auth-token-example-section {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #656d76;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-toggle:hover {
|
||||||
|
color: #1f2328;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron.expanded {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-chevron .octicon {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-content {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-description {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #656d76;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-config {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-token-example-code {
|
||||||
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #1f2328;
|
||||||
|
white-space: pre;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ import './authToken.css';
|
|||||||
|
|
||||||
export const AuthTokenSection: React.FC<{}> = ({}) => {
|
export const AuthTokenSection: React.FC<{}> = ({}) => {
|
||||||
const [authToken, setAuthToken] = useState<string>(getOrCreateAuthToken);
|
const [authToken, setAuthToken] = useState<string>(getOrCreateAuthToken);
|
||||||
|
const [isExampleExpanded, setIsExampleExpanded] = useState<boolean>(false);
|
||||||
|
|
||||||
const onRegenerateToken = useCallback(() => {
|
const onRegenerateToken = useCallback(() => {
|
||||||
const newToken = generateAuthToken();
|
const newToken = generateAuthToken();
|
||||||
@@ -28,20 +29,69 @@ export const AuthTokenSection: React.FC<{}> = ({}) => {
|
|||||||
setAuthToken(newToken);
|
setAuthToken(newToken);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const toggleExample = useCallback(() => {
|
||||||
|
setIsExampleExpanded(!isExampleExpanded);
|
||||||
|
}, [isExampleExpanded]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='auth-token-section'>
|
<div className='auth-token-section'>
|
||||||
<div className='auth-token-description'>
|
<div className='auth-token-description'>
|
||||||
Set this environment variable to bypass the connection dialog:
|
Set this environment variable to bypass the connection dialog:
|
||||||
</div>
|
</div>
|
||||||
<div className='auth-token-container'>
|
<div className='auth-token-container'>
|
||||||
<code className='auth-token-code'>PLAYWRIGHT_MCP_EXTENSION_TOKEN={authToken}</code>
|
<code className='auth-token-code'>{authTokenCode(authToken)}</code>
|
||||||
<button className='auth-token-refresh' title='Generate new token' aria-label='Generate new token'onClick={onRegenerateToken}>{icons.refresh()}</button>
|
<button className='auth-token-refresh' title='Generate new token' aria-label='Generate new token'onClick={onRegenerateToken}>{icons.refresh()}</button>
|
||||||
<CopyToClipboard value={authToken} />
|
<CopyToClipboard value={authTokenCode(authToken)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='auth-token-example-section'>
|
||||||
|
<button
|
||||||
|
className='auth-token-example-toggle'
|
||||||
|
onClick={toggleExample}
|
||||||
|
aria-expanded={isExampleExpanded}
|
||||||
|
title={isExampleExpanded ? 'Hide example config' : 'Show example config'}
|
||||||
|
>
|
||||||
|
<span className={`auth-token-chevron ${isExampleExpanded ? 'expanded' : ''}`}>
|
||||||
|
{icons.chevronDown()}
|
||||||
|
</span>
|
||||||
|
Example MCP server configuration
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isExampleExpanded && (
|
||||||
|
<div className='auth-token-example-content'>
|
||||||
|
<div className='auth-token-example-description'>
|
||||||
|
Add this configuration to your MCP client (e.g., VS Code) to connect to the Playwright MCP Bridge:
|
||||||
|
</div>
|
||||||
|
<div className='auth-token-example-config'>
|
||||||
|
<code className='auth-token-example-code'>{exampleConfig(authToken)}</code>
|
||||||
|
<CopyToClipboard value={exampleConfig(authToken)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function authTokenCode(authToken: string) {
|
||||||
|
return `PLAYWRIGHT_MCP_EXTENSION_TOKEN=${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exampleConfig(authToken: string) {
|
||||||
|
return `{
|
||||||
|
"mcpServers": {
|
||||||
|
"playwright": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["@playwright/mcp@latest", "--extension"],
|
||||||
|
"env": {
|
||||||
|
"PLAYWRIGHT_MCP_EXTENSION_TOKEN":
|
||||||
|
"${authToken}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
function generateAuthToken(): string {
|
function generateAuthToken(): string {
|
||||||
// Generate a cryptographically secure random token
|
// Generate a cryptographically secure random token
|
||||||
const array = new Uint8Array(32);
|
const array = new Uint8Array(32);
|
||||||
|
|||||||
@@ -41,3 +41,9 @@ export const refresh = () => {
|
|||||||
<path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
|
<path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
|
||||||
</svg>;
|
</svg>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const chevronDown = () => {
|
||||||
|
return <svg className='octicon' viewBox="0 0 16 16" width="16" height="16" aria-hidden='true'>
|
||||||
|
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>
|
||||||
|
</svg>;
|
||||||
|
};
|
||||||
|
|||||||
34
package-lock.json
generated
34
package-lock.json
generated
@@ -1,23 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.39",
|
"version": "0.0.41",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.39",
|
"version": "0.0.41",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-1758292576000",
|
"playwright": "1.56.0-alpha-2025-10-01",
|
||||||
"playwright-core": "1.56.0-alpha-1758292576000"
|
"playwright-core": "1.56.0-alpha-2025-10-01"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"mcp-server-playwright": "cli.js"
|
"mcp-server-playwright": "cli.js"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modelcontextprotocol/sdk": "^1.17.5",
|
"@modelcontextprotocol/sdk": "^1.17.5",
|
||||||
"@playwright/test": "1.56.0-alpha-1758292576000",
|
"@playwright/test": "1.56.0-alpha-2025-10-01",
|
||||||
"@types/node": "^24.3.0",
|
"@types/node": "^24.3.0",
|
||||||
"zod-to-json-schema": "^3.24.6"
|
"zod-to-json-schema": "^3.24.6"
|
||||||
},
|
},
|
||||||
@@ -50,13 +50,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@playwright/test": {
|
"node_modules/@playwright/test": {
|
||||||
"version": "1.56.0-alpha-1758292576000",
|
"version": "1.56.0-alpha-2025-10-01",
|
||||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0-alpha-1758292576000.tgz",
|
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0-alpha-2025-10-01.tgz",
|
||||||
"integrity": "sha512-U5SLVseO2I8yDg2lSMPrlTR08KBTyIrFFi1EP23LSxdQ+jKsnOdQdHzUCY+qXQWIMC24eNtgPWYPmh9hgf1kAA==",
|
"integrity": "sha512-1Sq2gaxXdrbx1fp5lHhOK6HHT29Iov5AjH7h2Mn223QPDpZ+7o9Jr1lz5An3R4tqAuKZkf543fFfaR6wjD0Osw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-1758292576000"
|
"playwright": "1.56.0-alpha-2025-10-01"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright": "cli.js"
|
"playwright": "cli.js"
|
||||||
@@ -379,6 +379,7 @@
|
|||||||
"integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
|
"integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"accepts": "^2.0.0",
|
"accepts": "^2.0.0",
|
||||||
"body-parser": "^2.2.0",
|
"body-parser": "^2.2.0",
|
||||||
@@ -825,12 +826,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/playwright": {
|
"node_modules/playwright": {
|
||||||
"version": "1.56.0-alpha-1758292576000",
|
"version": "1.56.0-alpha-2025-10-01",
|
||||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0-alpha-1758292576000.tgz",
|
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0-alpha-2025-10-01.tgz",
|
||||||
"integrity": "sha512-XRTRlArx9KgiGsboXUpJR7ZDazUPfO51t1nrQ+w883e02/IDNxcqPpQXJcFAy4nFqG925r//VR9AyseVfw1AWg==",
|
"integrity": "sha512-fB26N0+NZyITpUIKBlJjA3CoFqBfNlhns/6urmK50nY6DgaHptCfKSJJLDhd37nsjQJ1ysV4n6WXSL8ifaEK6g==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright-core": "1.56.0-alpha-1758292576000"
|
"playwright-core": "1.56.0-alpha-2025-10-01"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright": "cli.js"
|
"playwright": "cli.js"
|
||||||
@@ -843,9 +844,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/playwright-core": {
|
"node_modules/playwright-core": {
|
||||||
"version": "1.56.0-alpha-1758292576000",
|
"version": "1.56.0-alpha-2025-10-01",
|
||||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0-alpha-1758292576000.tgz",
|
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0-alpha-2025-10-01.tgz",
|
||||||
"integrity": "sha512-qXLOCI9RhulhdvNjFglvgoyUw3N49putP8iU0uhoZ+mE3lEXAJNy/v1znCRvhjwvfsGsabO9+Xe4sfvu2GFGCw==",
|
"integrity": "sha512-/n6Wa2cksUAj+thJhZpR1PvnK0E3WHhNBMTxr1G6XgdhhvUdX7y4Y6aU9FaJPa5S0P8tcX3jyBXLCYIv/pYlJA==",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
"playwright-core": "cli.js"
|
"playwright-core": "cli.js"
|
||||||
@@ -1228,6 +1229,7 @@
|
|||||||
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
|
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"url": "https://github.com/sponsors/colinhacks"
|
||||||
}
|
}
|
||||||
|
|||||||
12
package.json
12
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@playwright/mcp",
|
"name": "@playwright/mcp",
|
||||||
"version": "0.0.39",
|
"version": "0.0.41",
|
||||||
"description": "Playwright Tools for MCP",
|
"description": "Playwright Tools for MCP",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -23,7 +23,9 @@
|
|||||||
"ftest": "playwright test --project=firefox",
|
"ftest": "playwright test --project=firefox",
|
||||||
"wtest": "playwright test --project=webkit",
|
"wtest": "playwright test --project=webkit",
|
||||||
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
|
"dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
|
||||||
"npm-publish": "npm run clean && npm run test && npm publish"
|
"npm-publish": "npm run clean && npm run test && npm publish",
|
||||||
|
"copy-config": "cp ../playwright/packages/playwright/src/mcp/config.d.ts . && perl -pi -e \"s|import type \\* as playwright from 'playwright-core';|import type * as playwright from 'playwright';|\" ./config.d.ts",
|
||||||
|
"roll": "npm run copy-config && npm run lint"
|
||||||
},
|
},
|
||||||
"exports": {
|
"exports": {
|
||||||
"./package.json": "./package.json",
|
"./package.json": "./package.json",
|
||||||
@@ -33,15 +35,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright": "1.56.0-alpha-1758292576000",
|
"playwright": "1.56.0-alpha-2025-10-01",
|
||||||
"playwright-core": "1.56.0-alpha-1758292576000"
|
"playwright-core": "1.56.0-alpha-2025-10-01"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"mcp-server-playwright": "cli.js"
|
"mcp-server-playwright": "cli.js"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@modelcontextprotocol/sdk": "^1.17.5",
|
"@modelcontextprotocol/sdk": "^1.17.5",
|
||||||
"@playwright/test": "1.56.0-alpha-1758292576000",
|
"@playwright/test": "1.56.0-alpha-2025-10-01",
|
||||||
"@types/node": "^24.3.0",
|
"@types/node": "^24.3.0",
|
||||||
"zod-to-json-schema": "^3.24.6"
|
"zod-to-json-schema": "^3.24.6"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user