@playwright/mcp 0.0.4 → 0.0.5

package/README.md

@@ -224,6 +224,11 @@ The Playwright MCP provides a set of tools for browser automation. Here are all
   - Description: Save page as PDF
   - Parameters: None
 
+- **browser_take_screenshot**
+  - Description: Capture screenshot of the page
+  - Parameters:
+    - `raw` (string): Optionally returns lossless PNG screenshot. JPEG by default.
+
 - **browser_wait**
   - Description: Wait for a specified time in seconds
   - Parameters:

package/lib/context.js

@@ -87,7 +87,7 @@ class Context {
         this._page = undefined;
         this._console.length = 0;
     }
-    async existingPage() {
+    existingPage() {
         if (!this._page)
             throw new Error('Navigate to a location to create a page');
         return this._page;

package/lib/index.js

@@ -69,6 +69,7 @@ const snapshotTools = [
     snapshot.hover,
     snapshot.type,
     snapshot.selectOption,
+    snapshot.screenshot,
     ...commonTools,
 ];
 const screenshotTools = [

package/lib/program.js

@@ -39,6 +39,7 @@ commander_1.program
     const server = (0, index_1.createServer)({
         userDataDir: options.userDataDir ?? await userDataDir(),
         launchOptions,
+        vision: !!options.vision,
     });
     setupExitWatchdog(server);
     const transport = new stdio_js_1.StdioServerTransport();

package/lib/tools/common.js

@@ -118,7 +118,7 @@ exports.pdf = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(pdfSchema),
     },
     handle: async (context) => {
-        const page = await context.existingPage();
+        const page = context.existingPage();
         const fileName = path_1.default.join(os_1.default.tmpdir(), `/page-${new Date().toISOString()}.pdf`);
         await page.pdf({ path: fileName });
         return {

package/lib/tools/screenshot.js

@@ -26,7 +26,7 @@ exports.screenshot = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        const page = await context.existingPage();
+        const page = context.existingPage();
         const screenshot = await page.screenshot({ type: 'jpeg', quality: 50, scale: 'css' });
         return {
             content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: 'image/jpeg' }],
@@ -48,7 +48,7 @@ exports.moveMouse = {
     },
     handle: async (context, params) => {
         const validatedParams = moveMouseSchema.parse(params);
-        const page = await context.existingPage();
+        const page = context.existingPage();
         await page.mouse.move(validatedParams.x, validatedParams.y);
         return {
             content: [{ type: 'text', text: `Moved mouse to (${validatedParams.x}, ${validatedParams.y})` }],

package/lib/tools/snapshot.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectOption = exports.type = exports.hover = exports.drag = exports.click = exports.snapshot = void 0;
+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");
@@ -29,7 +29,7 @@ exports.snapshot = {
         inputSchema: (0, zod_to_json_schema_1.default)(zod_1.z.object({})),
     },
     handle: async (context) => {
-        return await (0, utils_1.captureAriaSnapshot)(await context.existingPage());
+        return await (0, utils_1.captureAriaSnapshot)(context.existingPage());
     },
 };
 const elementSchema = zod_1.z.object({
@@ -116,6 +116,32 @@ exports.selectOption = {
         }, 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.'),
+});
+exports.screenshot = {
+    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.`,
+        inputSchema: (0, zod_to_json_schema_1.default)(screenshotSchema),
+    },
+    handle: async (context, params) => {
+        const validatedParams = screenshotSchema.parse(params);
+        const page = context.existingPage();
+        const options = validatedParams.raw ? { type: 'png', scale: 'css' } : { type: 'jpeg', quality: 50, scale: 'css' };
+        const screenshot = await page.screenshot(options);
+        return {
+            content: [{ type: 'image', data: screenshot.toString('base64'), mimeType: validatedParams.raw ? 'image/png' : 'image/jpeg' }],
+        };
+    },
+};
 function refLocator(page, ref) {
-    return page.locator(`aria-ref=${ref}`);
+    let frame = page.frames()[0];
+    const match = ref.match(/^f(\d+)(.*)/);
+    if (match) {
+        const frameIndex = parseInt(match[1], 10);
+        frame = page.frames()[frameIndex];
+        ref = match[2];
+    }
+    return frame.locator(`aria-ref=${ref}`);
 }

package/lib/tools/utils.js

@@ -16,6 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runAndWait = runAndWait;
+exports.captureAllFrameSnapshot = captureAllFrameSnapshot;
 exports.captureAriaSnapshot = captureAriaSnapshot;
 async function waitForCompletion(page, callback) {
     const requests = new Set();
@@ -65,21 +66,29 @@ async function waitForCompletion(page, callback) {
     }
 }
 async function runAndWait(context, status, callback, snapshot = false) {
-    const page = await context.existingPage();
+    const page = context.existingPage();
     await waitForCompletion(page, () => callback(page));
     return snapshot ? captureAriaSnapshot(page, status) : {
         content: [{ type: 'text', text: status }],
     };
 }
+async function captureAllFrameSnapshot(page) {
+    const snapshots = await Promise.all(page.frames().map(frame => frame.locator('html').ariaSnapshot({ ref: true })));
+    const scopedSnapshots = snapshots.map((snapshot, frameIndex) => {
+        if (frameIndex === 0)
+            return snapshot;
+        return snapshot.replaceAll('[ref=', `[ref=f${frameIndex}`);
+    });
+    return scopedSnapshots.join('\n');
+}
 async function captureAriaSnapshot(page, status = '') {
-    const snapshot = await page.locator('html').ariaSnapshot({ ref: true });
     return {
         content: [{ type: 'text', text: `${status ? `${status}\n` : ''}
 - Page URL: ${page.url()}
 - Page Title: ${await page.title()}
 - Page Snapshot
 \`\`\`yaml
-${snapshot}
+${await captureAllFrameSnapshot(page)}
 \`\`\`
 `
             }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -18,7 +18,9 @@
     "build": "tsc",
     "lint": "eslint .",
     "watch": "tsc --watch",
-    "test": "playwright test"
+    "test": "playwright test",
+    "clean": "rm -rf lib",
+    "publish": "npm run clean && npm run build && npm run test && npm publish"
   },
   "exports": {
     "./package.json": "./package.json",