@playwright/mcp 0.0.10 → 0.0.14

package/lib/tools/screen.js

@@ -14,9 +14,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const zod_1 = require("zod");
 const zod_to_json_schema_1 = require("zod-to-json-schema");
+const javascript = __importStar(require("../javascript"));
 const screenshot = {
     capability: 'core',
     schema: {
@@ -25,10 +59,22 @@ const screenshot = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        const tab = context.currentTab();
-        const screenshot = await tab.page.screenshot({ type: 'jpeg', quality: 50, scale: 'css' });
+        const tab = await context.ensureTab();
+        const options = { type: 'jpeg', quality: 50, scale: 'css' };
+        const code = [
+            `// Take a screenshot of the current page`,
+            `await page.screenshot(${javascript.formatObject(options)});`,
+        ];
+        const action = () => tab.page.screenshot(options).then(buffer => {
+            return {
+                content: [{ type: 'image', data: buffer.toString('base64'), mimeType: 'image/jpeg' }],
+            };
+        });
         return {
-            content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: 'image/jpeg' }],
+            code,
+            action,
+            captureSnapshot: false,
+            waitForNetwork: false
         };
     },
 };
@@ -48,10 +94,17 @@ const moveMouse = {
     },
     handle: async (context, params) => {
         const validatedParams = moveMouseSchema.parse(params);
-        const tab = context.currentTab();
-        await tab.page.mouse.move(validatedParams.x, validatedParams.y);
+        const tab = context.currentTabOrDie();
+        const code = [
+            `// Move mouse to (${validatedParams.x}, ${validatedParams.y})`,
+            `await page.mouse.move(${validatedParams.x}, ${validatedParams.y});`,
+        ];
+        const action = () => tab.page.mouse.move(validatedParams.x, validatedParams.y);
         return {
-            content: [{ type: 'text', text: `Moved mouse to (${validatedParams.x}, ${validatedParams.y})` }],
+            code,
+            action,
+            captureSnapshot: false,
+            waitForNetwork: false
         };
     },
 };
@@ -67,14 +120,25 @@ const click = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(clickSchema),
     },
     handle: async (context, params) => {
-        return await context.currentTab().runAndWait(async (tab) => {
-            const validatedParams = clickSchema.parse(params);
+        const validatedParams = clickSchema.parse(params);
+        const tab = context.currentTabOrDie();
+        const code = [
+            `// Click mouse at coordinates (${validatedParams.x}, ${validatedParams.y})`,
+            `await page.mouse.move(${validatedParams.x}, ${validatedParams.y});`,
+            `await page.mouse.down();`,
+            `await page.mouse.up();`,
+        ];
+        const action = async () => {
             await tab.page.mouse.move(validatedParams.x, validatedParams.y);
             await tab.page.mouse.down();
             await tab.page.mouse.up();
-        }, {
-            status: 'Clicked mouse',
-        });
+        };
+        return {
+            code,
+            action,
+            captureSnapshot: false,
+            waitForNetwork: true,
+        };
     },
 };
 const dragSchema = elementSchema.extend({
@@ -92,14 +156,26 @@ const drag = {
     },
     handle: async (context, params) => {
         const validatedParams = dragSchema.parse(params);
-        return await context.currentTab().runAndWait(async (tab) => {
+        const tab = context.currentTabOrDie();
+        const code = [
+            `// Drag mouse from (${validatedParams.startX}, ${validatedParams.startY}) to (${validatedParams.endX}, ${validatedParams.endY})`,
+            `await page.mouse.move(${validatedParams.startX}, ${validatedParams.startY});`,
+            `await page.mouse.down();`,
+            `await page.mouse.move(${validatedParams.endX}, ${validatedParams.endY});`,
+            `await page.mouse.up();`,
+        ];
+        const action = async () => {
             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})`,
-        });
+        };
+        return {
+            code,
+            action,
+            captureSnapshot: false,
+            waitForNetwork: true,
+        };
     },
 };
 const typeSchema = zod_1.z.object({
@@ -115,13 +191,26 @@ const type = {
     },
     handle: async (context, params) => {
         const validatedParams = typeSchema.parse(params);
-        return await context.currentTab().runAndWait(async (tab) => {
+        const tab = context.currentTabOrDie();
+        const code = [
+            `// Type ${validatedParams.text}`,
+            `await page.keyboard.type('${validatedParams.text}');`,
+        ];
+        const action = async () => {
             await tab.page.keyboard.type(validatedParams.text);
             if (validatedParams.submit)
                 await tab.page.keyboard.press('Enter');
-        }, {
-            status: `Typed text "${validatedParams.text}"`,
-        });
+        };
+        if (validatedParams.submit) {
+            code.push(`// Submit text`);
+            code.push(`await page.keyboard.press('Enter');`);
+        }
+        return {
+            code,
+            action,
+            captureSnapshot: false,
+            waitForNetwork: true,
+        };
     },
 };
 exports.default = [

package/lib/tools/snapshot.js

@@ -14,12 +14,50 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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 = {
     capability: 'core',
     schema: {
@@ -28,7 +66,12 @@ const snapshot = {
         inputSchema: (0, zod_to_json_schema_1.default)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        return await context.currentTab().run(async () => { }, { captureSnapshot: true });
+        await context.ensureTab();
+        return {
+            code: [`// <internal code to capture accessibility snapshot>`],
+            captureSnapshot: true,
+            waitForNetwork: false,
+        };
     },
 };
 const elementSchema = zod_1.z.object({
@@ -44,12 +87,18 @@ const click = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
-            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
-            await locator.click();
-        }, {
-            status: `Clicked "${validatedParams.element}"`,
-        });
+        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({
@@ -67,13 +116,19 @@ const drag = {
     },
     handle: async (context, params) => {
         const validatedParams = dragSchema.parse(params);
-        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);
-        }, {
-            status: `Dragged "${validatedParams.startElement}" to "${validatedParams.endElement}"`,
-        });
+        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 = {
@@ -85,12 +140,18 @@ const hover = {
     },
     handle: async (context, params) => {
         const validatedParams = elementSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
-            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
-            await locator.hover();
-        }, {
-            status: `Hovered over "${validatedParams.element}"`,
-        });
+        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({
@@ -107,17 +168,31 @@ const type = {
     },
     handle: async (context, params) => {
         const validatedParams = typeSchema.parse(params);
-        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');
-        }, {
-            status: `Typed "${validatedParams.text}" into "${validatedParams.element}"`,
-        });
+        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({
@@ -132,16 +207,29 @@ const selectOption = {
     },
     handle: async (context, params) => {
         const validatedParams = selectOptionSchema.parse(params);
-        return await context.currentTab().runAndWaitWithSnapshot(async (tab) => {
-            const locator = tab.lastSnapshot().refLocator(validatedParams.ref);
-            await locator.selectOption(validatedParams.values);
-        }, {
-            status: `Selected option in "${validatedParams.element}"`,
-        });
+        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',
@@ -152,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,14 +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 () => { }, { 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',
@@ -64,10 +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 () => { }, { 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.'),
 });
@@ -81,20 +100,19 @@ const closeTab = captureSnapshot => ({
     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 });
+        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.10",
+  "version": "0.0.14",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -17,8 +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"
   },