@playwright/mcp 0.0.20 → 0.0.24

package/lib/tools/snapshot.js

@@ -21,8 +21,10 @@ const snapshot = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_snapshot',
+        title: 'Page snapshot',
         description: 'Capture accessibility snapshot of the current page, this is better than screenshot',
         inputSchema: z.object({}),
+        type: 'readOnly',
     },
     handle: async (context) => {
         await context.ensureTab();
@@ -41,8 +43,10 @@ const click = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_click',
+        title: 'Click',
         description: 'Perform click on a web page',
         inputSchema: elementSchema,
+        type: 'destructive',
     },
     handle: async (context, params) => {
         const tab = context.currentTabOrDie();
@@ -63,6 +67,7 @@ const drag = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_drag',
+        title: 'Drag mouse',
         description: 'Perform drag and drop between two elements',
         inputSchema: z.object({
             startElement: z.string().describe('Human-readable source element description used to obtain the permission to interact with the element'),
@@ -70,6 +75,7 @@ const drag = defineTool({
             endElement: z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'),
             endRef: z.string().describe('Exact target element reference from the page snapshot'),
         }),
+        type: 'destructive',
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
@@ -91,8 +97,10 @@ const hover = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_hover',
+        title: 'Hover mouse',
         description: 'Hover over element on page',
         inputSchema: elementSchema,
+        type: 'readOnly',
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
@@ -118,8 +126,10 @@ const type = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_type',
+        title: 'Type text',
         description: 'Type text into editable element',
         inputSchema: typeSchema,
+        type: 'destructive',
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
@@ -156,8 +166,10 @@ const selectOption = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_select_option',
+        title: 'Select option',
         description: 'Select an option in a dropdown',
         inputSchema: selectOptionSchema,
+        type: 'destructive',
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
@@ -176,6 +188,7 @@ const selectOption = defineTool({
 });
 const screenshotSchema = z.object({
     raw: z.boolean().optional().describe('Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.'),
+    filename: z.string().optional().describe('File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified.'),
     element: z.string().optional().describe('Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.'),
     ref: z.string().optional().describe('Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.'),
 }).refine(data => {
@@ -188,14 +201,16 @@ const screenshot = defineTool({
     capability: 'core',
     schema: {
         name: 'browser_take_screenshot',
+        title: 'Take a screenshot',
         description: `Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.`,
         inputSchema: screenshotSchema,
+        type: 'readOnly',
     },
     handle: async (context, params) => {
         const tab = context.currentTabOrDie();
         const snapshot = tab.snapshotOrDie();
         const fileType = params.raw ? 'png' : 'jpeg';
-        const fileName = await outputFile(context.config, `page-${new Date().toISOString()}.${fileType}`);
+        const fileName = await outputFile(context.config, params.filename ?? `page-${new Date().toISOString()}.${fileType}`);
         const options = { type: fileType, quality: fileType === 'png' ? undefined : 50, scale: 'css', path: fileName };
         const isElementScreenshot = params.element && params.ref;
         const code = [
@@ -206,7 +221,7 @@ const screenshot = defineTool({
             code.push(`await page.${await generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
         else
             code.push(`await page.screenshot(${javascript.formatObject(options)});`);
-        const includeBase64 = !context.config.tools?.browser_take_screenshot?.omitBase64;
+        const includeBase64 = !context.config.noImageResponses;
         const action = async () => {
             const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
             return {

package/lib/tools/tabs.js

@@ -19,8 +19,10 @@ const listTabs = defineTool({
     capability: 'tabs',
     schema: {
         name: 'browser_tab_list',
+        title: 'List tabs',
         description: 'List browser tabs',
         inputSchema: z.object({}),
+        type: 'readOnly',
     },
     handle: async (context) => {
         await context.ensureTab();
@@ -41,10 +43,12 @@ const selectTab = captureSnapshot => defineTool({
     capability: 'tabs',
     schema: {
         name: 'browser_tab_select',
+        title: 'Select a tab',
         description: 'Select a tab by index',
         inputSchema: z.object({
             index: z.number().describe('The index of the tab to select'),
         }),
+        type: 'readOnly',
     },
     handle: async (context, params) => {
         await context.selectTab(params.index);
@@ -62,10 +66,12 @@ const newTab = captureSnapshot => defineTool({
     capability: 'tabs',
     schema: {
         name: 'browser_tab_new',
+        title: 'Open a new tab',
         description: 'Open a new tab',
         inputSchema: z.object({
             url: z.string().optional().describe('The URL to navigate to in the new tab. If not provided, the new tab will be blank.'),
         }),
+        type: 'readOnly',
     },
     handle: async (context, params) => {
         await context.newTab();
@@ -85,10 +91,12 @@ const closeTab = captureSnapshot => defineTool({
     capability: 'tabs',
     schema: {
         name: 'browser_tab_close',
+        title: 'Close a tab',
         description: 'Close a tab',
         inputSchema: z.object({
             index: z.number().optional().describe('The index of the tab to close. Closes current tab if not provided.'),
         }),
+        type: 'destructive',
     },
     handle: async (context, params) => {
         await context.closeTab(params.index);

package/lib/tools/testing.js

@@ -24,8 +24,10 @@ const generateTest = defineTool({
     capability: 'testing',
     schema: {
         name: 'browser_generate_playwright_test',
+        title: 'Generate a Playwright test',
         description: 'Generate a Playwright test for given scenario',
         inputSchema: generateTestSchema,
+        type: 'readOnly',
     },
     handle: async (context, params) => {
         return {

package/lib/tools.js

@@ -0,0 +1,56 @@
+/**
+ * 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 common from './tools/common.js';
+import console from './tools/console.js';
+import dialogs from './tools/dialogs.js';
+import files from './tools/files.js';
+import install from './tools/install.js';
+import keyboard from './tools/keyboard.js';
+import navigate from './tools/navigate.js';
+import network from './tools/network.js';
+import pdf from './tools/pdf.js';
+import snapshot from './tools/snapshot.js';
+import tabs from './tools/tabs.js';
+import screen from './tools/screen.js';
+import testing from './tools/testing.js';
+export const snapshotTools = [
+    ...common(true),
+    ...console,
+    ...dialogs(true),
+    ...files(true),
+    ...install,
+    ...keyboard(true),
+    ...navigate(true),
+    ...network,
+    ...pdf,
+    ...snapshot,
+    ...tabs(true),
+    ...testing,
+];
+export const screenshotTools = [
+    ...common(false),
+    ...console,
+    ...dialogs(false),
+    ...files(false),
+    ...install,
+    ...keyboard(false),
+    ...navigate(false),
+    ...network,
+    ...pdf,
+    ...screen,
+    ...tabs(false),
+    ...testing,
+];

package/lib/transport.js

@@ -16,14 +16,16 @@
 import http from 'node:http';
 import assert from 'node:assert';
 import crypto from 'node:crypto';
-import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
 import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
-export async function startStdioTransport(serverList) {
-    const server = await serverList.create();
-    await server.connect(new StdioServerTransport());
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { createConnection } from './connection.js';
+export async function startStdioTransport(config, connectionList) {
+    const connection = await createConnection(config);
+    await connection.connect(new StdioServerTransport());
+    connectionList.push(connection);
 }
-async function handleSSE(req, res, url, serverList, sessions) {
+async function handleSSE(config, req, res, url, sessions, connectionList) {
     if (req.method === 'POST') {
         const sessionId = url.searchParams.get('sessionId');
         if (!sessionId) {
@@ -40,20 +42,22 @@ async function handleSSE(req, res, url, serverList, sessions) {
     else if (req.method === 'GET') {
         const transport = new SSEServerTransport('/sse', res);
         sessions.set(transport.sessionId, transport);
-        const server = await serverList.create();
+        const connection = await createConnection(config);
+        await connection.connect(transport);
+        connectionList.push(connection);
         res.on('close', () => {
             sessions.delete(transport.sessionId);
-            serverList.close(server).catch(e => {
+            connection.close().catch(e => {
                 // eslint-disable-next-line no-console
                 console.error(e);
             });
         });
-        return await server.connect(transport);
+        return;
     }
     res.statusCode = 405;
     res.end('Method not allowed');
 }
-async function handleStreamable(req, res, serverList, sessions) {
+async function handleStreamable(config, req, res, sessions, connectionList) {
     const sessionId = req.headers['mcp-session-id'];
     if (sessionId) {
         const transport = sessions.get(sessionId);
@@ -75,22 +79,26 @@ async function handleStreamable(req, res, serverList, sessions) {
             if (transport.sessionId)
                 sessions.delete(transport.sessionId);
         };
-        const server = await serverList.create();
-        await server.connect(transport);
-        return await transport.handleRequest(req, res);
+        const connection = await createConnection(config);
+        connectionList.push(connection);
+        await Promise.all([
+            connection.connect(transport),
+            transport.handleRequest(req, res),
+        ]);
+        return;
     }
     res.statusCode = 400;
     res.end('Invalid request');
 }
-export function startHttpTransport(port, hostname, serverList) {
+export function startHttpTransport(config, port, hostname, connectionList) {
     const sseSessions = new Map();
     const streamableSessions = new Map();
     const httpServer = http.createServer(async (req, res) => {
         const url = new URL(`http://localhost${req.url}`);
         if (url.pathname.startsWith('/mcp'))
-            await handleStreamable(req, res, serverList, streamableSessions);
+            await handleStreamable(config, req, res, streamableSessions, connectionList);
         else
-            await handleSSE(req, res, url, serverList, sseSessions);
+            await handleSSE(config, req, res, url, sseSessions, connectionList);
     });
     httpServer.listen(port, hostname, () => {
         const address = httpServer.address();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.20",
+  "version": "0.0.24",
   "description": "Playwright Tools for MCP",
   "type": "module",
   "repository": {
@@ -17,7 +17,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc",
-    "lint": "npm run update-readme && eslint .",
+    "lint": "npm run update-readme && eslint . && tsc --noEmit",
     "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
     "test": "playwright test",
@@ -35,16 +35,15 @@
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.10.1",
+    "@modelcontextprotocol/sdk": "^1.11.0",
     "commander": "^13.1.0",
-    "playwright": "1.53.0-alpha-1746218818000",
-    "yaml": "^2.7.1",
+    "playwright": "1.53.0-alpha-1746832516000",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.53.0-alpha-1746218818000",
+    "@playwright/test": "1.53.0-alpha-1746832516000",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@types/node": "^22.13.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",