@playwright/mcp 0.0.13 → 0.0.14

package/lib/tools/snapshot.js

@@ -51,8 +51,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const os_1 = __importDefault(require("os"));
 const zod_1 = require("zod");
 const zod_to_json_schema_1 = __importDefault(require("zod-to-json-schema"));
+const utils_1 = require("./utils");
 const context_1 = require("../context");
 const javascript = __importStar(require("../javascript"));
 const snapshot = {
@@ -63,11 +66,12 @@ const snapshot = {
         inputSchema: (0, zod_to_json_schema_1.default)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        const tab = await context.ensureTab();
-        return await tab.run(async () => {
-            const code = [`// <internal code to capture accessibility snapshot>`];
-            return { code };
-        }, { captureSnapshot: true });
+        await context.ensureTab();
+        return {
+            code: [`// <internal code to capture accessibility snapshot>`],
+            captureSnapshot: true,
+            waitForNetwork: false,
+        };
     },
 };
 const elementSchema = zod_1.z.object({
@@ -83,15 +87,18 @@ const click = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (snapshot) => {
-            const locator = snapshot.refLocator(validatedParams.ref);
-            const code = [
-                `// Click ${validatedParams.element}`,
-                `await page.${await (0, context_1.generateLocator)(locator)}.click();`
-            ];
-            await locator.click();
-            return { code };
-        });
+        const tab = context.currentTabOrDie();
+        const locator = tab.snapshotOrDie().refLocator(validatedParams.ref);
+        const code = [
+            `// Click ${validatedParams.element}`,
+            `await page.${await (0, context_1.generateLocator)(locator)}.click();`
+        ];
+        return {
+            code,
+            action: () => locator.click(),
+            captureSnapshot: true,
+            waitForNetwork: true,
+        };
     },
 };
 const dragSchema = zod_1.z.object({
@@ -109,16 +116,19 @@ const drag = {
     },
     handle: async (context, params) => {
         const validatedParams = dragSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (snapshot) => {
-            const startLocator = snapshot.refLocator(validatedParams.startRef);
-            const endLocator = snapshot.refLocator(validatedParams.endRef);
-            const code = [
-                `// Drag ${validatedParams.startElement} to ${validatedParams.endElement}`,
-                `await page.${await (0, context_1.generateLocator)(startLocator)}.dragTo(page.${await (0, context_1.generateLocator)(endLocator)});`
-            ];
-            await startLocator.dragTo(endLocator);
-            return { code };
-        });
+        const snapshot = context.currentTabOrDie().snapshotOrDie();
+        const startLocator = snapshot.refLocator(validatedParams.startRef);
+        const endLocator = snapshot.refLocator(validatedParams.endRef);
+        const code = [
+            `// Drag ${validatedParams.startElement} to ${validatedParams.endElement}`,
+            `await page.${await (0, context_1.generateLocator)(startLocator)}.dragTo(page.${await (0, context_1.generateLocator)(endLocator)});`
+        ];
+        return {
+            code,
+            action: () => startLocator.dragTo(endLocator),
+            captureSnapshot: true,
+            waitForNetwork: true,
+        };
     },
 };
 const hover = {
@@ -130,15 +140,18 @@ const hover = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (snapshot) => {
-            const locator = snapshot.refLocator(validatedParams.ref);
-            const code = [
-                `// Hover over ${validatedParams.element}`,
-                `await page.${await (0, context_1.generateLocator)(locator)}.hover();`
-            ];
-            await locator.hover();
-            return { code };
-        });
+        const snapshot = context.currentTabOrDie().snapshotOrDie();
+        const locator = snapshot.refLocator(validatedParams.ref);
+        const code = [
+            `// Hover over ${validatedParams.element}`,
+            `await page.${await (0, context_1.generateLocator)(locator)}.hover();`
+        ];
+        return {
+            code,
+            action: () => locator.hover(),
+            captureSnapshot: true,
+            waitForNetwork: true,
+        };
     },
 };
 const typeSchema = elementSchema.extend({
@@ -155,26 +168,31 @@ const type = {
     },
     handle: async (context, params) => {
         const validatedParams = typeSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (snapshot) => {
-            const locator = snapshot.refLocator(validatedParams.ref);
-            const code = [];
-            if (validatedParams.slowly) {
-                code.push(`// Press "${validatedParams.text}" sequentially into "${validatedParams.element}"`);
-                code.push(`await page.${await (0, context_1.generateLocator)(locator)}.pressSequentially(${javascript.quote(validatedParams.text)});`);
-                await locator.pressSequentially(validatedParams.text);
-            }
-            else {
-                code.push(`// Fill "${validatedParams.text}" into "${validatedParams.element}"`);
-                code.push(`await page.${await (0, context_1.generateLocator)(locator)}.fill(${javascript.quote(validatedParams.text)});`);
-                await locator.fill(validatedParams.text);
-            }
-            if (validatedParams.submit) {
-                code.push(`// Submit text`);
-                code.push(`await page.${await (0, context_1.generateLocator)(locator)}.press('Enter');`);
-                await locator.press('Enter');
-            }
-            return { code };
-        });
+        const snapshot = context.currentTabOrDie().snapshotOrDie();
+        const locator = snapshot.refLocator(validatedParams.ref);
+        const code = [];
+        const steps = [];
+        if (validatedParams.slowly) {
+            code.push(`// Press "${validatedParams.text}" sequentially into "${validatedParams.element}"`);
+            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.pressSequentially(${javascript.quote(validatedParams.text)});`);
+            steps.push(() => locator.pressSequentially(validatedParams.text));
+        }
+        else {
+            code.push(`// Fill "${validatedParams.text}" into "${validatedParams.element}"`);
+            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.fill(${javascript.quote(validatedParams.text)});`);
+            steps.push(() => locator.fill(validatedParams.text));
+        }
+        if (validatedParams.submit) {
+            code.push(`// Submit text`);
+            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.press('Enter');`);
+            steps.push(() => locator.press('Enter'));
+        }
+        return {
+            code,
+            action: () => steps.reduce((acc, step) => acc.then(step), Promise.resolve()),
+            captureSnapshot: true,
+            waitForNetwork: true,
+        };
     },
 };
 const selectOptionSchema = elementSchema.extend({
@@ -189,19 +207,29 @@ const selectOption = {
     },
     handle: async (context, params) => {
         const validatedParams = selectOptionSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (snapshot) => {
-            const locator = snapshot.refLocator(validatedParams.ref);
-            const code = [
-                `// Select options [${validatedParams.values.join(', ')}] in ${validatedParams.element}`,
-                `await page.${await (0, context_1.generateLocator)(locator)}.selectOption(${javascript.formatObject(validatedParams.values)});`
-            ];
-            await locator.selectOption(validatedParams.values);
-            return { code };
-        });
+        const snapshot = context.currentTabOrDie().snapshotOrDie();
+        const locator = snapshot.refLocator(validatedParams.ref);
+        const code = [
+            `// Select options [${validatedParams.values.join(', ')}] in ${validatedParams.element}`,
+            `await page.${await (0, context_1.generateLocator)(locator)}.selectOption(${javascript.formatObject(validatedParams.values)});`
+        ];
+        return {
+            code,
+            action: () => locator.selectOption(validatedParams.values).then(() => { }),
+            captureSnapshot: true,
+            waitForNetwork: true,
+        };
     },
 };
 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.'),
+    element: zod_1.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: zod_1.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 => {
+    return !!data.element === !!data.ref;
+}, {
+    message: 'Both element and ref must be provided or neither.',
+    path: ['ref', 'element']
 });
 const screenshot = {
     capability: 'core',
@@ -212,13 +240,37 @@ const screenshot = {
     },
     handle: async (context, params) => {
         const validatedParams = screenshotSchema.parse(params);
-        const tab = context.currentTab();
-        const options = validatedParams.raw ? { type: 'png', scale: 'css' } : { type: 'jpeg', quality: 50, scale: 'css' };
-        const screenshot = await tab.page.screenshot(options);
+        const tab = context.currentTabOrDie();
+        const snapshot = tab.snapshotOrDie();
+        const fileType = validatedParams.raw ? 'png' : 'jpeg';
+        const fileName = path_1.default.join(os_1.default.tmpdir(), (0, utils_1.sanitizeForFilePath)(`page-${new Date().toISOString()}`)) + `.${fileType}`;
+        const options = { type: fileType, quality: fileType === 'png' ? undefined : 50, scale: 'css', path: fileName };
+        const isElementScreenshot = validatedParams.element && validatedParams.ref;
+        const code = [
+            `// Screenshot ${isElementScreenshot ? validatedParams.element : 'viewport'} and save it as ${fileName}`,
+        ];
+        const locator = validatedParams.ref ? snapshot.refLocator(validatedParams.ref) : null;
+        if (locator)
+            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.screenshot(${javascript.formatObject(options)});`);
+        else
+            code.push(`await page.screenshot(${javascript.formatObject(options)});`);
+        const action = async () => {
+            const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
+            return {
+                content: [{
+                        type: 'image',
+                        data: screenshot.toString('base64'),
+                        mimeType: fileType === 'png' ? 'image/png' : 'image/jpeg',
+                    }]
+            };
+        };
         return {
-            content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: validatedParams.raw ? 'image/png' : 'image/jpeg' }],
+            code,
+            action,
+            captureSnapshot: true,
+            waitForNetwork: false,
         };
-    },
+    }
 };
 exports.default = [
     snapshot,

package/lib/tools/tabs.js

@@ -25,11 +25,17 @@ const listTabs = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(zod_1.z.object({})),
     },
     handle: async (context) => {
+        await context.ensureTab();
         return {
-            content: [{
-                    type: 'text',
-                    text: await context.listTabs(),
-                }],
+            code: [`// <internal code to list tabs>`],
+            captureSnapshot: false,
+            waitForNetwork: false,
+            resultOverride: {
+                content: [{
+                        type: 'text',
+                        text: await context.listTabsMarkdown(),
+                    }],
+            },
         };
     },
 };
@@ -46,19 +52,20 @@ const selectTab = captureSnapshot => ({
     handle: async (context, params) => {
         const validatedParams = selectTabSchema.parse(params);
         await context.selectTab(validatedParams.index);
-        const currentTab = await context.ensureTab();
-        return await currentTab.run(async () => {
-            const code = [
-                `// <internal code to select tab ${validatedParams.index}>`,
-            ];
-            return { code };
-        }, { captureSnapshot });
+        const code = [
+            `// <internal code to select tab ${validatedParams.index}>`,
+        ];
+        return {
+            code,
+            captureSnapshot,
+            waitForNetwork: false
+        };
     },
 });
 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 = {
+const newTab = captureSnapshot => ({
     capability: 'tabs',
     schema: {
         name: 'browser_tab_new',
@@ -69,15 +76,17 @@ const newTab = {
         const validatedParams = newTabSchema.parse(params);
         await context.newTab();
         if (validatedParams.url)
-            await context.currentTab().navigate(validatedParams.url);
-        return await context.currentTab().run(async () => {
-            const code = [
-                `// <internal code to open a new tab>`,
-            ];
-            return { code };
-        }, { captureSnapshot: true });
+            await context.currentTabOrDie().navigate(validatedParams.url);
+        const code = [
+            `// <internal code to open a new tab>`,
+        ];
+        return {
+            code,
+            captureSnapshot,
+            waitForNetwork: false
+        };
     },
-};
+});
 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.'),
 });
@@ -91,26 +100,19 @@ const closeTab = captureSnapshot => ({
     handle: async (context, params) => {
         const validatedParams = closeTabSchema.parse(params);
         await context.closeTab(validatedParams.index);
-        const currentTab = context.currentTab();
-        if (currentTab) {
-            return await currentTab.run(async () => {
-                const code = [
-                    `// <internal code to close tab ${validatedParams.index}>`,
-                ];
-                return { code };
-            }, { captureSnapshot });
-        }
+        const code = [
+            `// <internal code to close tab ${validatedParams.index}>`,
+        ];
         return {
-            content: [{
-                    type: 'text',
-                    text: await context.listTabs(),
-                }],
+            code,
+            captureSnapshot,
+            waitForNetwork: false
         };
     },
 });
 exports.default = (captureSnapshot) => [
     listTabs,
-    newTab,
+    newTab(captureSnapshot),
     selectTab(captureSnapshot),
     closeTab(captureSnapshot),
 ];

package/lib/tools/utils.js

@@ -17,7 +17,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForCompletion = waitForCompletion;
 exports.sanitizeForFilePath = sanitizeForFilePath;
-async function waitForCompletion(page, callback) {
+async function waitForCompletion(context, page, callback) {
     const requests = new Set();
     let frameNavigated = false;
     let waitCallback = () => { };
@@ -57,7 +57,7 @@ async function waitForCompletion(page, callback) {
         if (!requests.size && !frameNavigated)
             waitCallback();
         await waitBarrier;
-        await page.evaluate(() => new Promise(f => setTimeout(f, 1000)));
+        await context.waitForTimeout(1000);
         return result;
     }
     finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -17,9 +17,12 @@
   "scripts": {
     "build": "tsc",
     "lint": "eslint .",
+    "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
     "test": "playwright test",
     "ctest": "playwright test --project=chrome",
+    "ftest": "playwright test --project=firefox",
+    "wtest": "playwright test --project=webkit",
     "clean": "rm -rf lib",
     "npm-publish": "npm run clean && npm run build && npm run test && npm publish"
   },