mirror of
https://github.com/microsoft/playwright-mcp.git
synced 2025-07-26 08:32:26 +08:00
6c3f3b6576
Instructions: 1. `git clone https://github.com/mxschmitt/playwright-mcp && git checkout extension-drafft` 2. `npm ci && npm run build` 3. `chrome://extensions` in your normal Chrome, "load unpacked" and select the extension folder. 4. `node cli.js --port=4242 --extension` - The URL it prints at the end you can put into the extension popup. 5. Put either this into Claude Desktop (it does not support SSE yet hence wrapping it or just put the URL into Cursor/VSCode) ```json { "mcpServers": { "playwright": { "command": "bash", "args": [ "-c", "source $HOME/.nvm/nvm.sh && nvm use --silent 22 && npx supergateway --streamableHttp http://127.0.0.1:4242/mcp" ] } } } ``` Things like `Take a snapshot of my browser.` should now work in your Prompt Chat. ---- - SSE only for now, since we already have a http server with a port there - Upstream "page tests" can be executed over this CDP relay via https://github.com/microsoft/playwright/pull/36286 - Limitations for now are everything what happens outside of the tab its session is shared with -> `window.open` / `target=_blank`. --------- Co-authored-by: Yury Semikhatsky <yurys@chromium.org>
155 lines
4.4 KiB
TypeScript
155 lines
4.4 KiB
TypeScript
/**
|
|
* 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 { test, expect } from './fixtures.js';
|
|
|
|
import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
|
|
|
|
async function createTab(client: Client, title: string, body: string) {
|
|
return await client.callTool({
|
|
name: 'browser_tab_new',
|
|
arguments: {
|
|
url: `data:text/html,<title>${title}</title><body>${body}</body>`,
|
|
},
|
|
});
|
|
}
|
|
|
|
test.skip(({ mcpMode }) => mcpMode === 'extension', 'Multi-tab scenarios are not supported with --extension');
|
|
|
|
test('list initial tabs', async ({ client }) => {
|
|
expect(await client.callTool({
|
|
name: 'browser_tab_list',
|
|
})).toHaveTextContent(`### Open tabs
|
|
- 1: (current) [] (about:blank)`);
|
|
});
|
|
|
|
test('list first tab', async ({ client }) => {
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
expect(await client.callTool({
|
|
name: 'browser_tab_list',
|
|
})).toHaveTextContent(`### Open tabs
|
|
- 1: [] (about:blank)
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)`);
|
|
});
|
|
|
|
test('create new tab', async ({ client }) => {
|
|
expect(await createTab(client, 'Tab one', 'Body one')).toHaveTextContent(`
|
|
- Ran Playwright code:
|
|
\`\`\`js
|
|
// <internal code to open a new tab>
|
|
\`\`\`
|
|
|
|
### Open tabs
|
|
- 1: [] (about:blank)
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
### Current tab
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
- Page Title: Tab one
|
|
- Page Snapshot
|
|
\`\`\`yaml
|
|
- generic [ref=e1]: Body one
|
|
\`\`\``);
|
|
|
|
expect(await createTab(client, 'Tab two', 'Body two')).toHaveTextContent(`
|
|
- Ran Playwright code:
|
|
\`\`\`js
|
|
// <internal code to open a new tab>
|
|
\`\`\`
|
|
|
|
### Open tabs
|
|
- 1: [] (about:blank)
|
|
- 2: [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
- 3: (current) [Tab two] (data:text/html,<title>Tab two</title><body>Body two</body>)
|
|
|
|
### Current tab
|
|
- Page URL: data:text/html,<title>Tab two</title><body>Body two</body>
|
|
- Page Title: Tab two
|
|
- Page Snapshot
|
|
\`\`\`yaml
|
|
- generic [ref=e1]: Body two
|
|
\`\`\``);
|
|
});
|
|
|
|
test('select tab', async ({ client }) => {
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
await createTab(client, 'Tab two', 'Body two');
|
|
expect(await client.callTool({
|
|
name: 'browser_tab_select',
|
|
arguments: {
|
|
index: 2,
|
|
},
|
|
})).toHaveTextContent(`
|
|
- Ran Playwright code:
|
|
\`\`\`js
|
|
// <internal code to select tab 2>
|
|
\`\`\`
|
|
|
|
### Open tabs
|
|
- 1: [] (about:blank)
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
- 3: [Tab two] (data:text/html,<title>Tab two</title><body>Body two</body>)
|
|
|
|
### Current tab
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
- Page Title: Tab one
|
|
- Page Snapshot
|
|
\`\`\`yaml
|
|
- generic [ref=e1]: Body one
|
|
\`\`\``);
|
|
});
|
|
|
|
test('close tab', async ({ client }) => {
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
await createTab(client, 'Tab two', 'Body two');
|
|
expect(await client.callTool({
|
|
name: 'browser_tab_close',
|
|
arguments: {
|
|
index: 3,
|
|
},
|
|
})).toHaveTextContent(`
|
|
- Ran Playwright code:
|
|
\`\`\`js
|
|
// <internal code to close tab 3>
|
|
\`\`\`
|
|
|
|
### Open tabs
|
|
- 1: [] (about:blank)
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
### Current tab
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
- Page Title: Tab one
|
|
- Page Snapshot
|
|
\`\`\`yaml
|
|
- generic [ref=e1]: Body one
|
|
\`\`\``);
|
|
});
|
|
|
|
test('reuse first tab when navigating', async ({ startClient, cdpServer, server }) => {
|
|
const browserContext = await cdpServer.start();
|
|
const pages = browserContext.pages();
|
|
|
|
const { client } = await startClient({ args: [`--cdp-endpoint=${cdpServer.endpoint}`] });
|
|
await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.HELLO_WORLD },
|
|
});
|
|
|
|
expect(pages.length).toBe(1);
|
|
expect(await pages[0].title()).toBe('Title');
|
|
});
|