@playwright/mcp 0.0.30 → 0.0.32

package/lib/tools/tabs.js

@@ -16,7 +16,7 @@
 import { z } from 'zod';
 import { defineTool } from './tool.js';
 const listTabs = defineTool({
-    capability: 'tabs',
+    capability: 'core-tabs',
     schema: {
         name: 'browser_tab_list',
         title: 'List tabs',
@@ -24,23 +24,13 @@ const listTabs = defineTool({
         inputSchema: z.object({}),
         type: 'readOnly',
     },
-    handle: async (context) => {
+    handle: async (context, params, response) => {
         await context.ensureTab();
-        return {
-            code: [`// <internal code to list tabs>`],
-            captureSnapshot: false,
-            waitForNetwork: false,
-            resultOverride: {
-                content: [{
-                        type: 'text',
-                        text: await context.listTabsMarkdown(),
-                    }],
-            },
-        };
+        response.setIncludeTabs();
     },
 });
-const selectTab = captureSnapshot => defineTool({
-    capability: 'tabs',
+const selectTab = defineTool({
+    capability: 'core-tabs',
     schema: {
         name: 'browser_tab_select',
         title: 'Select a tab',
@@ -50,20 +40,13 @@ const selectTab = captureSnapshot => defineTool({
         }),
         type: 'readOnly',
     },
-    handle: async (context, params) => {
+    handle: async (context, params, response) => {
         await context.selectTab(params.index);
-        const code = [
-            `// <internal code to select tab ${params.index}>`,
-        ];
-        return {
-            code,
-            captureSnapshot,
-            waitForNetwork: false
-        };
+        response.setIncludeSnapshot();
     },
 });
-const newTab = captureSnapshot => defineTool({
-    capability: 'tabs',
+const newTab = defineTool({
+    capability: 'core-tabs',
     schema: {
         name: 'browser_tab_new',
         title: 'Open a new tab',
@@ -73,22 +56,15 @@ const newTab = captureSnapshot => defineTool({
         }),
         type: 'readOnly',
     },
-    handle: async (context, params) => {
-        await context.newTab();
+    handle: async (context, params, response) => {
+        const tab = await context.newTab();
         if (params.url)
-            await context.currentTabOrDie().navigate(params.url);
-        const code = [
-            `// <internal code to open a new tab>`,
-        ];
-        return {
-            code,
-            captureSnapshot,
-            waitForNetwork: false
-        };
+            await tab.navigate(params.url);
+        response.setIncludeSnapshot();
     },
 });
-const closeTab = captureSnapshot => defineTool({
-    capability: 'tabs',
+const closeTab = defineTool({
+    capability: 'core-tabs',
     schema: {
         name: 'browser_tab_close',
         title: 'Close a tab',
@@ -98,21 +74,14 @@ const closeTab = captureSnapshot => defineTool({
         }),
         type: 'destructive',
     },
-    handle: async (context, params) => {
+    handle: async (context, params, response) => {
         await context.closeTab(params.index);
-        const code = [
-            `// <internal code to close tab ${params.index}>`,
-        ];
-        return {
-            code,
-            captureSnapshot,
-            waitForNetwork: false
-        };
+        response.setIncludeSnapshot();
     },
 });
-export default (captureSnapshot) => [
+export default [
     listTabs,
-    newTab(captureSnapshot),
-    selectTab(captureSnapshot),
-    closeTab(captureSnapshot),
+    newTab,
+    selectTab,
+    closeTab,
 ];

package/lib/tools/tool.js

@@ -16,3 +16,17 @@
 export function defineTool(tool) {
     return tool;
 }
+export function defineTabTool(tool) {
+    return {
+        ...tool,
+        handle: async (context, params, response) => {
+            const tab = context.currentTabOrDie();
+            const modalStates = tab.modalStates().map(state => state.type);
+            if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
+                throw new Error(`The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` + tab.modalStatesMarkdown().join('\n'));
+            if (!tool.clearsModalState && modalStates.length)
+                throw new Error(`Tool "${tool.schema.name}" does not handle the modal state.\n` + tab.modalStatesMarkdown().join('\n'));
+            return tool.handle(tab, params, response);
+        },
+    };
+}

package/lib/tools/utils.js

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export async function waitForCompletion(context, tab, callback) {
+// @ts-ignore
+import { asLocator } from 'playwright-core/lib/utils';
+export async function waitForCompletion(tab, callback) {
     const requests = new Set();
     let frameNavigated = false;
     let waitCallback = () => { };
@@ -51,7 +53,7 @@ export async function waitForCompletion(context, tab, callback) {
         if (!requests.size && !frameNavigated)
             waitCallback();
         await waitBarrier;
-        await context.waitForTimeout(1000);
+        await tab.waitForTimeout(1000);
         return result;
     }
     finally {
@@ -67,12 +69,11 @@ export function sanitizeForFilePath(s) {
 }
 export async function generateLocator(locator) {
     try {
-        return await locator._generateLocatorString();
+        const { resolvedSelector } = await locator._resolveSelector();
+        return asLocator('javascript', resolvedSelector);
     }
     catch (e) {
-        if (e instanceof Error && /locator._generateLocatorString: No element matching locator/.test(e.message))
-            throw new Error('Ref not found, likely because element was removed. Use browser_snapshot to see what elements are currently on the page.');
-        throw e;
+        throw new Error('Ref not found, likely because element was removed. Use browser_snapshot to see what elements are currently on the page.');
     }
 }
 export async function callOnPageNoTrace(page, callback) {

package/lib/tools/wait.js

@@ -15,8 +15,8 @@
  */
 import { z } from 'zod';
 import { defineTool } from './tool.js';
-const wait = captureSnapshot => defineTool({
-    capability: 'wait',
+const wait = defineTool({
+    capability: 'core',
     schema: {
         name: 'browser_wait_for',
         title: 'Wait for',
@@ -28,13 +28,13 @@ const wait = captureSnapshot => defineTool({
         }),
         type: 'readOnly',
     },
-    handle: async (context, params) => {
+    handle: async (context, params, response) => {
         if (!params.text && !params.textGone && !params.time)
             throw new Error('Either time, text or textGone must be provided');
         const code = [];
         if (params.time) {
             code.push(`await new Promise(f => setTimeout(f, ${params.time} * 1000));`);
-            await new Promise(f => setTimeout(f, Math.min(10000, params.time * 1000)));
+            await new Promise(f => setTimeout(f, Math.min(30000, params.time * 1000)));
         }
         const tab = context.currentTabOrDie();
         const locator = params.text ? tab.page.getByText(params.text).first() : undefined;
@@ -47,13 +47,10 @@ const wait = captureSnapshot => defineTool({
             code.push(`await page.getByText(${JSON.stringify(params.text)}).first().waitFor({ state: 'visible' });`);
             await locator.waitFor({ state: 'visible' });
         }
-        return {
-            code,
-            captureSnapshot,
-            waitForNetwork: false,
-        };
+        response.addResult(`Waited for ${params.text || params.textGone || params.time}`);
+        response.setIncludeSnapshot();
     },
 });
-export default (captureSnapshot) => [
-    wait(captureSnapshot),
+export default [
+    wait,
 ];

package/lib/tools.js

@@ -16,6 +16,7 @@
 import common from './tools/common.js';
 import console from './tools/console.js';
 import dialogs from './tools/dialogs.js';
+import evaluate from './tools/evaluate.js';
 import files from './tools/files.js';
 import install from './tools/install.js';
 import keyboard from './tools/keyboard.js';
@@ -25,37 +26,25 @@ import pdf from './tools/pdf.js';
 import snapshot from './tools/snapshot.js';
 import tabs from './tools/tabs.js';
 import screenshot from './tools/screenshot.js';
-import testing from './tools/testing.js';
-import vision from './tools/vision.js';
 import wait from './tools/wait.js';
-export const snapshotTools = [
-    ...common(true),
+import mouse from './tools/mouse.js';
+export const allTools = [
+    ...common,
     ...console,
-    ...dialogs(true),
-    ...files(true),
+    ...dialogs,
+    ...evaluate,
+    ...files,
     ...install,
-    ...keyboard(true),
-    ...navigate(true),
+    ...keyboard,
+    ...navigate,
     ...network,
+    ...mouse,
     ...pdf,
     ...screenshot,
     ...snapshot,
-    ...tabs(true),
-    ...testing,
-    ...wait(true),
-];
-export const visionTools = [
-    ...common(false),
-    ...console,
-    ...dialogs(false),
-    ...files(false),
-    ...install,
-    ...keyboard(false),
-    ...navigate(false),
-    ...network,
-    ...pdf,
-    ...tabs(false),
-    ...testing,
-    ...vision,
-    ...wait(false),
+    ...tabs,
+    ...wait,
 ];
+export function filteredTools(config) {
+    return allTools.filter(tool => tool.capability.startsWith('core') || config.capabilities?.includes(tool.capability));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "Playwright Tools for MCP",
   "type": "module",
   "repository": {
@@ -17,15 +17,18 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc",
+    "build:extension": "tsc --project extension",
     "lint": "npm run update-readme && eslint . && tsc --noEmit",
+    "lint-fix": "eslint . --fix",
     "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
+    "watch:extension": "tsc --watch --project extension",
     "test": "playwright test",
     "ctest": "playwright test --project=chrome",
     "ftest": "playwright test --project=firefox",
     "wtest": "playwright test --project=webkit",
     "run-server": "node lib/browserServer.js",
-    "clean": "rm -rf lib",
+    "clean": "rm -rf lib extension/lib",
     "npm-publish": "npm run clean && npm run build && npm run test && npm publish"
   },
   "exports": {
@@ -36,18 +39,21 @@
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.11.0",
+    "@modelcontextprotocol/sdk": "^1.16.0",
     "commander": "^13.1.0",
     "debug": "^4.4.1",
+    "dotenv": "^17.2.0",
     "mime": "^4.0.7",
-    "playwright": "1.54.1",
+    "playwright": "1.55.0-alpha-1752701791000",
+    "playwright-core": "1.55.0-alpha-1752701791000",
     "ws": "^8.18.1",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
+    "@anthropic-ai/sdk": "^0.57.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.55.0-alpha-1752701791000",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@types/chrome": "^0.0.315",
     "@types/debug": "^4.1.12",
@@ -59,6 +65,7 @@
     "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-notice": "^1.0.0",
+    "openai": "^5.10.2",
     "typescript": "^5.8.2"
   },
   "bin": {

package/lib/browserServer.js

@@ -1,151 +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.
- */
-/* eslint-disable no-console */
-import net from 'net';
-import { program } from 'commander';
-import playwright from 'playwright';
-import { HttpServer } from './httpServer.js';
-import { packageJSON } from './package.js';
-class BrowserServer {
-    _server = new HttpServer();
-    _entries = [];
-    constructor() {
-        this._setupExitHandler();
-    }
-    async start(port) {
-        await this._server.start({ port });
-        this._server.routePath('/json/list', (req, res) => {
-            this._handleJsonList(res);
-        });
-        this._server.routePath('/json/launch', async (req, res) => {
-            void this._handleLaunchBrowser(req, res).catch(e => console.error(e));
-        });
-        this._setEntries([]);
-    }
-    _handleJsonList(res) {
-        const list = this._entries.map(browser => browser.info);
-        res.end(JSON.stringify(list));
-    }
-    async _handleLaunchBrowser(req, res) {
-        const request = await readBody(req);
-        let info = this._entries.map(entry => entry.info).find(info => info.userDataDir === request.userDataDir);
-        if (!info || info.error)
-            info = await this._newBrowser(request);
-        res.end(JSON.stringify(info));
-    }
-    async _newBrowser(request) {
-        const cdpPort = await findFreePort();
-        request.launchOptions.cdpPort = cdpPort;
-        const info = {
-            browserType: request.browserType,
-            userDataDir: request.userDataDir,
-            cdpPort,
-            launchOptions: request.launchOptions,
-            contextOptions: request.contextOptions,
-        };
-        const browserType = playwright[request.browserType];
-        const { browser, error } = await browserType.launchPersistentContext(request.userDataDir, {
-            ...request.launchOptions,
-            ...request.contextOptions,
-            handleSIGINT: false,
-            handleSIGTERM: false,
-        }).then(context => {
-            return { browser: context.browser(), error: undefined };
-        }).catch(error => {
-            return { browser: undefined, error: error.message };
-        });
-        this._setEntries([...this._entries, {
-                browser,
-                info: {
-                    browserType: request.browserType,
-                    userDataDir: request.userDataDir,
-                    cdpPort,
-                    launchOptions: request.launchOptions,
-                    contextOptions: request.contextOptions,
-                    error,
-                },
-            }]);
-        browser?.on('disconnected', () => {
-            this._setEntries(this._entries.filter(entry => entry.browser !== browser));
-        });
-        return info;
-    }
-    _updateReport() {
-        // Clear the current line and move cursor to top of screen
-        process.stdout.write('\x1b[2J\x1b[H');
-        process.stdout.write(`Playwright Browser Server v${packageJSON.version}\n`);
-        process.stdout.write(`Listening on ${this._server.urlPrefix('human-readable')}\n\n`);
-        if (this._entries.length === 0) {
-            process.stdout.write('No browsers currently running\n');
-            return;
-        }
-        process.stdout.write('Running browsers:\n');
-        for (const entry of this._entries) {
-            const status = entry.browser ? 'running' : 'error';
-            const statusColor = entry.browser ? '\x1b[32m' : '\x1b[31m'; // green for running, red for error
-            process.stdout.write(`${statusColor}${entry.info.browserType}\x1b[0m (${entry.info.userDataDir}) - ${statusColor}${status}\x1b[0m\n`);
-            if (entry.info.error)
-                process.stdout.write(`  Error: ${entry.info.error}\n`);
-        }
-    }
-    _setEntries(entries) {
-        this._entries = entries;
-        this._updateReport();
-    }
-    _setupExitHandler() {
-        let isExiting = false;
-        const handleExit = async () => {
-            if (isExiting)
-                return;
-            isExiting = true;
-            setTimeout(() => process.exit(0), 15000);
-            for (const entry of this._entries)
-                await entry.browser?.close().catch(() => { });
-            process.exit(0);
-        };
-        process.stdin.on('close', handleExit);
-        process.on('SIGINT', handleExit);
-        process.on('SIGTERM', handleExit);
-    }
-}
-program
-    .name('browser-agent')
-    .option('-p, --port <port>', 'Port to listen on', '9224')
-    .action(async (options) => {
-    await main(options);
-});
-void program.parseAsync(process.argv);
-async function main(options) {
-    const server = new BrowserServer();
-    await server.start(+options.port);
-}
-function readBody(req) {
-    return new Promise((resolve, reject) => {
-        const chunks = [];
-        req.on('data', (chunk) => chunks.push(chunk));
-        req.on('end', () => resolve(JSON.parse(Buffer.concat(chunks).toString())));
-    });
-}
-async function findFreePort() {
-    return new Promise((resolve, reject) => {
-        const server = net.createServer();
-        server.listen(0, () => {
-            const { port } = server.address();
-            server.close(() => resolve(port));
-        });
-        server.on('error', reject);
-    });
-}

package/lib/connection.js

@@ -1,82 +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 { Server as McpServer } from '@modelcontextprotocol/sdk/server/index.js';
-import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
-import { zodToJsonSchema } from 'zod-to-json-schema';
-import { Context } from './context.js';
-import { snapshotTools, visionTools } from './tools.js';
-import { packageJSON } from './package.js';
-export function createConnection(config, browserContextFactory) {
-    const allTools = config.vision ? visionTools : snapshotTools;
-    const tools = allTools.filter(tool => !config.capabilities || tool.capability === 'core' || config.capabilities.includes(tool.capability));
-    const context = new Context(tools, config, browserContextFactory);
-    const server = new McpServer({ name: 'Playwright', version: packageJSON.version }, {
-        capabilities: {
-            tools: {},
-        }
-    });
-    server.setRequestHandler(ListToolsRequestSchema, async () => {
-        return {
-            tools: tools.map(tool => ({
-                name: tool.schema.name,
-                description: tool.schema.description,
-                inputSchema: zodToJsonSchema(tool.schema.inputSchema),
-                annotations: {
-                    title: tool.schema.title,
-                    readOnlyHint: tool.schema.type === 'readOnly',
-                    destructiveHint: tool.schema.type === 'destructive',
-                    openWorldHint: true,
-                },
-            })),
-        };
-    });
-    server.setRequestHandler(CallToolRequestSchema, async (request) => {
-        const errorResult = (...messages) => ({
-            content: [{ type: 'text', text: messages.join('\n') }],
-            isError: true,
-        });
-        const tool = tools.find(tool => tool.schema.name === request.params.name);
-        if (!tool)
-            return errorResult(`Tool "${request.params.name}" not found`);
-        const modalStates = context.modalStates().map(state => state.type);
-        if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
-            return errorResult(`The tool "${request.params.name}" can only be used when there is related modal state present.`, ...context.modalStatesMarkdown());
-        if (!tool.clearsModalState && modalStates.length)
-            return errorResult(`Tool "${request.params.name}" does not handle the modal state.`, ...context.modalStatesMarkdown());
-        try {
-            return await context.run(tool, request.params.arguments);
-        }
-        catch (error) {
-            return errorResult(String(error));
-        }
-    });
-    return new Connection(server, context);
-}
-export class Connection {
-    server;
-    context;
-    constructor(server, context) {
-        this.server = server;
-        this.context = context;
-        this.server.oninitialized = () => {
-            this.context.clientVersion = this.server.getClientVersion();
-        };
-    }
-    async close() {
-        await this.server.close();
-        await this.context.close();
-    }
-}

package/lib/pageSnapshot.js

@@ -1,43 +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 { callOnPageNoTrace } from './tools/utils.js';
-export class PageSnapshot {
-    _page;
-    _text;
-    constructor(page) {
-        this._page = page;
-    }
-    static async create(page) {
-        const snapshot = new PageSnapshot(page);
-        await snapshot._build();
-        return snapshot;
-    }
-    text() {
-        return this._text;
-    }
-    async _build() {
-        const snapshot = await callOnPageNoTrace(this._page, page => page._snapshotForAI());
-        this._text = [
-            `- Page Snapshot`,
-            '```yaml',
-            snapshot,
-            '```',
-        ].join('\n');
-    }
-    refLocator(params) {
-        return this._page.locator(`aria-ref=${params.ref}`).describe(params.element);
-    }
-}

package/lib/server.js

@@ -1,48 +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 { createConnection } from './connection.js';
-import { contextFactory } from './browserContextFactory.js';
-export class Server {
-    config;
-    _connectionList = [];
-    _browserConfig;
-    _contextFactory;
-    constructor(config) {
-        this.config = config;
-        this._browserConfig = config.browser;
-        this._contextFactory = contextFactory(this._browserConfig);
-    }
-    async createConnection(transport) {
-        const connection = createConnection(this.config, this._contextFactory);
-        this._connectionList.push(connection);
-        await connection.server.connect(transport);
-        return connection;
-    }
-    setupExitWatchdog() {
-        let isExiting = false;
-        const handleExit = async () => {
-            if (isExiting)
-                return;
-            isExiting = true;
-            setTimeout(() => process.exit(0), 15000);
-            await Promise.all(this._connectionList.map(connection => connection.close()));
-            process.exit(0);
-        };
-        process.stdin.on('close', handleExit);
-        process.on('SIGINT', handleExit);
-        process.on('SIGTERM', handleExit);
-    }
-}