@playwright/mcp 0.0.7 → 0.0.10

package/lib/tools/{screenshot.js → screen.js}

@@ -15,19 +15,18 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.type = exports.drag = exports.click = exports.moveMouse = exports.screenshot = void 0;
 const zod_1 = require("zod");
 const zod_to_json_schema_1 = require("zod-to-json-schema");
-const utils_1 = require("./utils");
-exports.screenshot = {
+const screenshot = {
+    capability: 'core',
     schema: {
-        name: 'browser_screenshot',
+        name: 'browser_screen_capture',
         description: 'Take a screenshot of the current page',
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        const page = context.existingPage();
-        const screenshot = await page.screenshot({ type: 'jpeg', quality: 50, scale: 'css' });
+        const tab = context.currentTab();
+        const screenshot = await tab.page.screenshot({ type: 'jpeg', quality: 50, scale: 'css' });
         return {
             content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: 'image/jpeg' }],
         };
@@ -40,16 +39,17 @@ const moveMouseSchema = elementSchema.extend({
     x: zod_1.z.number().describe('X coordinate'),
     y: zod_1.z.number().describe('Y coordinate'),
 });
-exports.moveMouse = {
+const moveMouse = {
+    capability: 'core',
     schema: {
-        name: 'browser_move_mouse',
+        name: 'browser_screen_move_mouse',
         description: 'Move mouse to a given position',
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(moveMouseSchema),
     },
     handle: async (context, params) => {
         const validatedParams = moveMouseSchema.parse(params);
-        const page = context.existingPage();
-        await page.mouse.move(validatedParams.x, validatedParams.y);
+        const tab = context.currentTab();
+        await tab.page.mouse.move(validatedParams.x, validatedParams.y);
         return {
             content: [{ type: 'text', text: `Moved mouse to (${validatedParams.x}, ${validatedParams.y})` }],
         };
@@ -59,18 +59,21 @@ const clickSchema = elementSchema.extend({
     x: zod_1.z.number().describe('X coordinate'),
     y: zod_1.z.number().describe('Y coordinate'),
 });
-exports.click = {
+const click = {
+    capability: 'core',
     schema: {
-        name: 'browser_click',
+        name: 'browser_screen_click',
         description: 'Click left mouse button',
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(clickSchema),
     },
     handle: async (context, params) => {
-        return await (0, utils_1.runAndWait)(context, 'Clicked mouse', async (page) => {
+        return await context.currentTab().runAndWait(async (tab) => {
             const validatedParams = clickSchema.parse(params);
-            await page.mouse.move(validatedParams.x, validatedParams.y);
-            await page.mouse.down();
-            await page.mouse.up();
+            await tab.page.mouse.move(validatedParams.x, validatedParams.y);
+            await tab.page.mouse.down();
+            await tab.page.mouse.up();
+        }, {
+            status: 'Clicked mouse',
         });
     },
 };
@@ -80,38 +83,51 @@ const dragSchema = elementSchema.extend({
     endX: zod_1.z.number().describe('End X coordinate'),
     endY: zod_1.z.number().describe('End Y coordinate'),
 });
-exports.drag = {
+const drag = {
+    capability: 'core',
     schema: {
-        name: 'browser_drag',
+        name: 'browser_screen_drag',
         description: 'Drag left mouse button',
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(dragSchema),
     },
     handle: async (context, params) => {
         const validatedParams = dragSchema.parse(params);
-        return await (0, utils_1.runAndWait)(context, `Dragged mouse from (${validatedParams.startX}, ${validatedParams.startY}) to (${validatedParams.endX}, ${validatedParams.endY})`, async (page) => {
-            await page.mouse.move(validatedParams.startX, validatedParams.startY);
-            await page.mouse.down();
-            await page.mouse.move(validatedParams.endX, validatedParams.endY);
-            await page.mouse.up();
+        return await context.currentTab().runAndWait(async (tab) => {
+            await tab.page.mouse.move(validatedParams.startX, validatedParams.startY);
+            await tab.page.mouse.down();
+            await tab.page.mouse.move(validatedParams.endX, validatedParams.endY);
+            await tab.page.mouse.up();
+        }, {
+            status: `Dragged mouse from (${validatedParams.startX}, ${validatedParams.startY}) to (${validatedParams.endX}, ${validatedParams.endY})`,
         });
     },
 };
 const typeSchema = zod_1.z.object({
     text: zod_1.z.string().describe('Text to type into the element'),
-    submit: zod_1.z.boolean().describe('Whether to submit entered text (press Enter after)'),
+    submit: zod_1.z.boolean().optional().describe('Whether to submit entered text (press Enter after)'),
 });
-exports.type = {
+const type = {
+    capability: 'core',
     schema: {
-        name: 'browser_type',
+        name: 'browser_screen_type',
         description: 'Type text',
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(typeSchema),
     },
     handle: async (context, params) => {
         const validatedParams = typeSchema.parse(params);
-        return await (0, utils_1.runAndWait)(context, `Typed text "${validatedParams.text}"`, async (page) => {
-            await page.keyboard.type(validatedParams.text);
+        return await context.currentTab().runAndWait(async (tab) => {
+            await tab.page.keyboard.type(validatedParams.text);
             if (validatedParams.submit)
-                await page.keyboard.press('Enter');
+                await tab.page.keyboard.press('Enter');
+        }, {
+            status: `Typed text "${validatedParams.text}"`,
         });
     },
 };
+exports.default = [
+    screenshot,
+    moveMouse,
+    click,
+    drag,
+    type,
+];

package/lib/tools/snapshot.js

@@ -18,25 +18,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.screenshot = exports.selectOption = exports.type = exports.hover = exports.drag = exports.click = exports.snapshot = void 0;
 const zod_1 = require("zod");
 const zod_to_json_schema_1 = __importDefault(require("zod-to-json-schema"));
-const utils_1 = require("./utils");
-exports.snapshot = {
+const snapshot = {
+    capability: 'core',
     schema: {
         name: 'browser_snapshot',
         description: 'Capture accessibility snapshot of the current page, this is better than screenshot',
         inputSchema: (0, zod_to_json_schema_1.default)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        return await (0, utils_1.captureAriaSnapshot)(context);
+        return await context.currentTab().run(async () => { }, { captureSnapshot: true });
     },
 };
 const elementSchema = zod_1.z.object({
     element: zod_1.z.string().describe('Human-readable element description used to obtain permission to interact with the element'),
     ref: zod_1.z.string().describe('Exact target element reference from the page snapshot'),
 });
-exports.click = {
+const click = {
+    capability: 'core',
     schema: {
         name: 'browser_click',
         description: 'Perform click on a web page',
@@ -44,7 +44,12 @@ exports.click = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return (0, utils_1.runAndWait)(context, `"${validatedParams.element}" clicked`, () => context.refLocator(validatedParams.ref).click(), true);
+        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
+            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
+            await locator.click();
+        }, {
+            status: `Clicked "${validatedParams.element}"`,
+        });
     },
 };
 const dragSchema = zod_1.z.object({
@@ -53,7 +58,8 @@ const dragSchema = zod_1.z.object({
     endElement: zod_1.z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'),
     endRef: zod_1.z.string().describe('Exact target element reference from the page snapshot'),
 });
-exports.drag = {
+const drag = {
+    capability: 'core',
     schema: {
         name: 'browser_drag',
         description: 'Perform drag and drop between two elements',
@@ -61,14 +67,17 @@ exports.drag = {
     },
     handle: async (context, params) => {
         const validatedParams = dragSchema.parse(params);
-        return (0, utils_1.runAndWait)(context, `Dragged "${validatedParams.startElement}" to "${validatedParams.endElement}"`, async () => {
-            const startLocator = context.refLocator(validatedParams.startRef);
-            const endLocator = context.refLocator(validatedParams.endRef);
+        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
+            const startLocator = tab.lastSnapshot().refLocator(validatedParams.startRef);
+            const endLocator = tab.lastSnapshot().refLocator(validatedParams.endRef);
             await startLocator.dragTo(endLocator);
-        }, true);
+        }, {
+            status: `Dragged "${validatedParams.startElement}" to "${validatedParams.endElement}"`,
+        });
     },
 };
-exports.hover = {
+const hover = {
+    capability: 'core',
     schema: {
         name: 'browser_hover',
         description: 'Hover over element on page',
@@ -76,14 +85,21 @@ exports.hover = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return (0, utils_1.runAndWait)(context, `Hovered over "${validatedParams.element}"`, () => context.refLocator(validatedParams.ref).hover(), true);
+        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
+            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
+            await locator.hover();
+        }, {
+            status: `Hovered over "${validatedParams.element}"`,
+        });
     },
 };
 const typeSchema = elementSchema.extend({
     text: zod_1.z.string().describe('Text to type into the element'),
-    submit: zod_1.z.boolean().describe('Whether to submit entered text (press Enter after)'),
+    submit: zod_1.z.boolean().optional().describe('Whether to submit entered text (press Enter after)'),
+    slowly: zod_1.z.boolean().optional().describe('Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.'),
 });
-exports.type = {
+const type = {
+    capability: 'core',
     schema: {
         name: 'browser_type',
         description: 'Type text into editable element',
@@ -91,18 +107,24 @@ exports.type = {
     },
     handle: async (context, params) => {
         const validatedParams = typeSchema.parse(params);
-        return await (0, utils_1.runAndWait)(context, `Typed "${validatedParams.text}" into "${validatedParams.element}"`, async () => {
-            const locator = context.refLocator(validatedParams.ref);
-            await locator.fill(validatedParams.text);
+        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
+            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
+            if (validatedParams.slowly)
+                await locator.pressSequentially(validatedParams.text);
+            else
+                await locator.fill(validatedParams.text);
             if (validatedParams.submit)
                 await locator.press('Enter');
-        }, true);
+        }, {
+            status: `Typed "${validatedParams.text}" into "${validatedParams.element}"`,
+        });
     },
 };
 const selectOptionSchema = elementSchema.extend({
     values: zod_1.z.array(zod_1.z.string()).describe('Array of values to select in the dropdown. This can be a single value or multiple values.'),
 });
-exports.selectOption = {
+const selectOption = {
+    capability: 'core',
     schema: {
         name: 'browser_select_option',
         description: 'Select an option in a dropdown',
@@ -110,16 +132,19 @@ exports.selectOption = {
     },
     handle: async (context, params) => {
         const validatedParams = selectOptionSchema.parse(params);
-        return await (0, utils_1.runAndWait)(context, `Selected option in "${validatedParams.element}"`, async () => {
-            const locator = context.refLocator(validatedParams.ref);
+        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
+            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
             await locator.selectOption(validatedParams.values);
-        }, true);
+        }, {
+            status: `Selected option in "${validatedParams.element}"`,
+        });
     },
 };
 const screenshotSchema = zod_1.z.object({
     raw: zod_1.z.boolean().optional().describe('Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.'),
 });
-exports.screenshot = {
+const screenshot = {
+    capability: 'core',
     schema: {
         name: 'browser_take_screenshot',
         description: `Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.`,
@@ -127,11 +152,20 @@ exports.screenshot = {
     },
     handle: async (context, params) => {
         const validatedParams = screenshotSchema.parse(params);
-        const page = context.existingPage();
+        const tab = context.currentTab();
         const options = validatedParams.raw ? { type: 'png', scale: 'css' } : { type: 'jpeg', quality: 50, scale: 'css' };
-        const screenshot = await page.screenshot(options);
+        const screenshot = await tab.page.screenshot(options);
         return {
             content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: validatedParams.raw ? 'image/png' : 'image/jpeg' }],
         };
     },
 };
+exports.default = [
+    snapshot,
+    click,
+    drag,
+    hover,
+    type,
+    selectOption,
+    screenshot,
+];

package/lib/tools/tabs.js

@@ -0,0 +1,100 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const zod_1 = require("zod");
+const zod_to_json_schema_1 = require("zod-to-json-schema");
+const listTabs = {
+    capability: 'tabs',
+    schema: {
+        name: 'browser_tab_list',
+        description: 'List browser tabs',
+        inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(zod_1.z.object({})),
+    },
+    handle: async (context) => {
+        return {
+            content: [{
+                    type: 'text',
+                    text: await context.listTabs(),
+                }],
+        };
+    },
+};
+const selectTabSchema = zod_1.z.object({
+    index: zod_1.z.number().describe('The index of the tab to select'),
+});
+const selectTab = captureSnapshot => ({
+    capability: 'tabs',
+    schema: {
+        name: 'browser_tab_select',
+        description: 'Select a tab by index',
+        inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(selectTabSchema),
+    },
+    handle: async (context, params) => {
+        const validatedParams = selectTabSchema.parse(params);
+        await context.selectTab(validatedParams.index);
+        const currentTab = await context.ensureTab();
+        return await currentTab.run(async () => { }, { captureSnapshot });
+    },
+});
+const newTabSchema = zod_1.z.object({
+    url: zod_1.z.string().optional().describe('The URL to navigate to in the new tab. If not provided, the new tab will be blank.'),
+});
+const newTab = {
+    capability: 'tabs',
+    schema: {
+        name: 'browser_tab_new',
+        description: 'Open a new tab',
+        inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(newTabSchema),
+    },
+    handle: async (context, params) => {
+        const validatedParams = newTabSchema.parse(params);
+        await context.newTab();
+        if (validatedParams.url)
+            await context.currentTab().navigate(validatedParams.url);
+        return await context.currentTab().run(async () => { }, { captureSnapshot: true });
+    },
+};
+const closeTabSchema = zod_1.z.object({
+    index: zod_1.z.number().optional().describe('The index of the tab to close. Closes current tab if not provided.'),
+});
+const closeTab = captureSnapshot => ({
+    capability: 'tabs',
+    schema: {
+        name: 'browser_tab_close',
+        description: 'Close a tab',
+        inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(closeTabSchema),
+    },
+    handle: async (context, params) => {
+        const validatedParams = closeTabSchema.parse(params);
+        await context.closeTab(validatedParams.index);
+        const currentTab = await context.currentTab();
+        if (currentTab)
+            return await currentTab.run(async () => { }, { captureSnapshot });
+        return {
+            content: [{
+                    type: 'text',
+                    text: await context.listTabs(),
+                }],
+        };
+    },
+});
+exports.default = (captureSnapshot) => [
+    listTabs,
+    newTab,
+    selectTab(captureSnapshot),
+    closeTab(captureSnapshot),
+];

package/lib/tools/utils.js

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runAndWait = runAndWait;
-exports.captureAriaSnapshot = captureAriaSnapshot;
+exports.waitForCompletion = waitForCompletion;
+exports.sanitizeForFilePath = sanitizeForFilePath;
 async function waitForCompletion(page, callback) {
     const requests = new Set();
     let frameNavigated = false;
@@ -64,27 +64,6 @@ async function waitForCompletion(page, callback) {
         dispose();
     }
 }
-async function runAndWait(context, status, callback, snapshot = false) {
-    const page = context.existingPage();
-    const dismissFileChooser = context.hasFileChooser();
-    await waitForCompletion(page, () => callback(page));
-    if (dismissFileChooser)
-        context.clearFileChooser();
-    const result = snapshot ? await captureAriaSnapshot(context, status) : {
-        content: [{ type: 'text', text: status }],
-    };
-    return result;
-}
-async function captureAriaSnapshot(context, status = '') {
-    const page = context.existingPage();
-    const lines = [];
-    if (status)
-        lines.push(`${status}`);
-    lines.push('', `- Page URL: ${page.url()}`, `- Page Title: ${await page.title()}`);
-    if (context.hasFileChooser())
-        lines.push(`- There is a file chooser visible that requires browser_choose_file to be called`);
-    lines.push(`- Page Snapshot`, '```yaml', await context.allFramesSnapshot(), '```', '');
-    return {
-        content: [{ type: 'text', text: lines.join('\n') }],
-    };
+function sanitizeForFilePath(s) {
+    return s.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -32,18 +32,19 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
     "commander": "^13.1.0",
-    "playwright": "1.52.0-alpha-1743011787000",
+    "playwright": "^1.52.0-alpha-1743163434000",
+    "yaml": "^2.7.1",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.52.0-alpha-1743011787000",
+    "@playwright/test": "^1.52.0-alpha-1743163434000",
     "@stylistic/eslint-plugin": "^3.0.1",
+    "@types/node": "^22.13.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "@typescript-eslint/utils": "^8.26.1",
-    "@types/node": "^22.13.10",
     "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-notice": "^1.0.0",