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>
160 lines
4.8 KiB
TypeScript
160 lines
4.8 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 fs from 'fs';
|
|
|
|
import { test, expect, formatOutput } from './fixtures.js';
|
|
|
|
test.skip(({ mcpMode }) => mcpMode === 'extension', 'launch scenarios are not supported with --extension - the browser is already launched');
|
|
|
|
test('test reopen browser', async ({ startClient, server, mcpMode }) => {
|
|
const { client, stderr } = await startClient();
|
|
await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.HELLO_WORLD },
|
|
});
|
|
|
|
expect(await client.callTool({
|
|
name: 'browser_close',
|
|
})).toContainTextContent('No open pages available');
|
|
|
|
expect(await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.HELLO_WORLD },
|
|
})).toContainTextContent(`- generic [ref=e1]: Hello, world!`);
|
|
|
|
await client.close();
|
|
|
|
if (process.platform === 'win32')
|
|
return;
|
|
|
|
await expect.poll(() => formatOutput(stderr()), { timeout: 0 }).toEqual([
|
|
'create context',
|
|
'create browser context (persistent)',
|
|
'lock user data dir',
|
|
'close context',
|
|
'close browser context (persistent)',
|
|
'release user data dir',
|
|
'close browser context complete (persistent)',
|
|
'create browser context (persistent)',
|
|
'lock user data dir',
|
|
'close context',
|
|
'close browser context (persistent)',
|
|
'release user data dir',
|
|
'close browser context complete (persistent)',
|
|
]);
|
|
});
|
|
|
|
test('executable path', async ({ startClient, server }) => {
|
|
const { client } = await startClient({ args: [`--executable-path=bogus`] });
|
|
const response = await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.HELLO_WORLD },
|
|
});
|
|
expect(response).toContainTextContent(`executable doesn't exist`);
|
|
});
|
|
|
|
test('persistent context', async ({ startClient, server }) => {
|
|
server.setContent('/', `
|
|
<body>
|
|
</body>
|
|
<script>
|
|
document.body.textContent = localStorage.getItem('test') ? 'Storage: YES' : 'Storage: NO';
|
|
localStorage.setItem('test', 'test');
|
|
</script>
|
|
`, 'text/html');
|
|
|
|
const { client } = await startClient();
|
|
const response = await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.PREFIX },
|
|
});
|
|
expect(response).toContainTextContent(`Storage: NO`);
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
|
|
await client.callTool({
|
|
name: 'browser_close',
|
|
});
|
|
|
|
const { client: client2 } = await startClient();
|
|
const response2 = await client2.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.PREFIX },
|
|
});
|
|
|
|
expect(response2).toContainTextContent(`Storage: YES`);
|
|
});
|
|
|
|
test('isolated context', async ({ startClient, server }) => {
|
|
server.setContent('/', `
|
|
<body>
|
|
</body>
|
|
<script>
|
|
document.body.textContent = localStorage.getItem('test') ? 'Storage: YES' : 'Storage: NO';
|
|
localStorage.setItem('test', 'test');
|
|
</script>
|
|
`, 'text/html');
|
|
|
|
const { client: client1 } = await startClient({ args: [`--isolated`] });
|
|
const response = await client1.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.PREFIX },
|
|
});
|
|
expect(response).toContainTextContent(`Storage: NO`);
|
|
|
|
await client1.callTool({
|
|
name: 'browser_close',
|
|
});
|
|
|
|
const { client: client2 } = await startClient({ args: [`--isolated`] });
|
|
const response2 = await client2.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.PREFIX },
|
|
});
|
|
expect(response2).toContainTextContent(`Storage: NO`);
|
|
});
|
|
|
|
test('isolated context with storage state', async ({ startClient, server }, testInfo) => {
|
|
const storageStatePath = testInfo.outputPath('storage-state.json');
|
|
await fs.promises.writeFile(storageStatePath, JSON.stringify({
|
|
origins: [
|
|
{
|
|
origin: server.PREFIX,
|
|
localStorage: [{ name: 'test', value: 'session-value' }],
|
|
},
|
|
],
|
|
}));
|
|
|
|
server.setContent('/', `
|
|
<body>
|
|
</body>
|
|
<script>
|
|
document.body.textContent = 'Storage: ' + localStorage.getItem('test');
|
|
</script>
|
|
`, 'text/html');
|
|
|
|
const { client } = await startClient({ args: [
|
|
`--isolated`,
|
|
`--storage-state=${storageStatePath}`,
|
|
] });
|
|
const response = await client.callTool({
|
|
name: 'browser_navigate',
|
|
arguments: { url: server.PREFIX },
|
|
});
|
|
expect(response).toContainTextContent(`Storage: session-value`);
|
|
});
|