@playwright/mcp 0.0.24 → 0.0.26

package/lib/tools/screenshot.js

@@ -0,0 +1,77 @@
+/**
+ * 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 { z } from 'zod';
+import { defineTool } from './tool.js';
+import * as javascript from '../javascript.js';
+import { outputFile } from '../config.js';
+import { generateLocator } from './utils.js';
+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 => {
+    return !!data.element === !!data.ref;
+}, {
+    message: 'Both element and ref must be provided or neither.',
+    path: ['ref', 'element']
+});
+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, 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 = [
+            `// Screenshot ${isElementScreenshot ? params.element : 'viewport'} and save it as ${fileName}`,
+        ];
+        const locator = params.ref ? snapshot.refLocator(params.ref) : null;
+        if (locator)
+            code.push(`await page.${await generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
+        else
+            code.push(`await page.screenshot(${javascript.formatObject(options)});`);
+        const includeBase64 = !context.config.noImageResponses;
+        const action = async () => {
+            const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
+            return {
+                content: includeBase64 ? [{
+                        type: 'image',
+                        data: screenshot.toString('base64'),
+                        mimeType: fileType === 'png' ? 'image/png' : 'image/jpeg',
+                    }] : []
+            };
+        };
+        return {
+            code,
+            action,
+            captureSnapshot: true,
+            waitForNetwork: false,
+        };
+    }
+});
+export default [
+    screenshot,
+];

package/lib/tools/snapshot.js

@@ -16,7 +16,7 @@
 import { z } from 'zod';
 import { defineTool } from './tool.js';
 import * as javascript from '../javascript.js';
-import { outputFile } from '../config.js';
+import { generateLocator } from './utils.js';
 const snapshot = defineTool({
     capability: 'core',
     schema: {
@@ -186,63 +186,6 @@ 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 => {
-    return !!data.element === !!data.ref;
-}, {
-    message: 'Both element and ref must be provided or neither.',
-    path: ['ref', 'element']
-});
-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, 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 = [
-            `// Screenshot ${isElementScreenshot ? params.element : 'viewport'} and save it as ${fileName}`,
-        ];
-        const locator = params.ref ? snapshot.refLocator(params.ref) : null;
-        if (locator)
-            code.push(`await page.${await generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
-        else
-            code.push(`await page.screenshot(${javascript.formatObject(options)});`);
-        const includeBase64 = !context.config.noImageResponses;
-        const action = async () => {
-            const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
-            return {
-                content: includeBase64 ? [{
-                        type: 'image',
-                        data: screenshot.toString('base64'),
-                        mimeType: fileType === 'png' ? 'image/png' : 'image/jpeg',
-                    }] : []
-            };
-        };
-        return {
-            code,
-            action,
-            captureSnapshot: true,
-            waitForNetwork: false,
-        };
-    }
-});
-export async function generateLocator(locator) {
-    return locator._generateLocatorString();
-}
 export default [
     snapshot,
     click,
@@ -250,5 +193,4 @@ export default [
     hover,
     type,
     selectOption,
-    screenshot,
 ];

package/lib/tools/utils.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export async function waitForCompletion(context, page, callback) {
+export async function waitForCompletion(context, tab, callback) {
     const requests = new Set();
     let frameNavigated = false;
     let waitCallback = () => { };
@@ -30,22 +30,20 @@ export async function waitForCompletion(context, page, callback) {
         frameNavigated = true;
         dispose();
         clearTimeout(timeout);
-        void frame.waitForLoadState('load').then(() => {
-            waitCallback();
-        });
+        void tab.waitForLoadState('load').then(waitCallback);
     };
     const onTimeout = () => {
         dispose();
         waitCallback();
     };
-    page.on('request', requestListener);
-    page.on('requestfinished', requestFinishedListener);
-    page.on('framenavigated', frameNavigateListener);
+    tab.page.on('request', requestListener);
+    tab.page.on('requestfinished', requestFinishedListener);
+    tab.page.on('framenavigated', frameNavigateListener);
     const timeout = setTimeout(onTimeout, 10000);
     const dispose = () => {
-        page.off('request', requestListener);
-        page.off('requestfinished', requestFinishedListener);
-        page.off('framenavigated', frameNavigateListener);
+        tab.page.off('request', requestListener);
+        tab.page.off('requestfinished', requestFinishedListener);
+        tab.page.off('framenavigated', frameNavigateListener);
         clearTimeout(timeout);
     };
     try {
@@ -67,3 +65,9 @@ export function sanitizeForFilePath(s) {
         return sanitize(s);
     return sanitize(s.substring(0, separator)) + '.' + sanitize(s.substring(separator + 1));
 }
+export async function generateLocator(locator) {
+    return locator._frame._wrapApiCall(() => locator._generateLocatorString(), true);
+}
+export async function callOnPageNoTrace(page, callback) {
+    return await page._wrapApiCall(() => callback(page), true);
+}

package/lib/tools/wait.js

@@ -0,0 +1,59 @@
+/**
+ * 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 { z } from 'zod';
+import { defineTool } from './tool.js';
+const wait = captureSnapshot => defineTool({
+    capability: 'wait',
+    schema: {
+        name: 'browser_wait_for',
+        title: 'Wait for',
+        description: 'Wait for text to appear or disappear or a specified time to pass',
+        inputSchema: z.object({
+            time: z.number().optional().describe('The time to wait in seconds'),
+            text: z.string().optional().describe('The text to wait for'),
+            textGone: z.string().optional().describe('The text to wait for to disappear'),
+        }),
+        type: 'readOnly',
+    },
+    handle: async (context, params) => {
+        if (!params.text && !params.textGone && !params.time)
+            throw new Error('Either time, text or textGone must be provided');
+        const code = [];
+        if (params.time) {
+            code.push(`await new Promise(f => setTimeout(f, ${params.time} * 1000));`);
+            await new Promise(f => setTimeout(f, Math.min(10000, params.time * 1000)));
+        }
+        const tab = context.currentTabOrDie();
+        const locator = params.text ? tab.page.getByText(params.text).first() : undefined;
+        const goneLocator = params.textGone ? tab.page.getByText(params.textGone).first() : undefined;
+        if (goneLocator) {
+            code.push(`await page.getByText(${JSON.stringify(params.textGone)}).first().waitFor({ state: 'hidden' });`);
+            await goneLocator.waitFor({ state: 'hidden' });
+        }
+        if (locator) {
+            code.push(`await page.getByText(${JSON.stringify(params.text)}).first().waitFor({ state: 'visible' });`);
+            await locator.waitFor({ state: 'visible' });
+        }
+        return {
+            code,
+            captureSnapshot,
+            waitForNetwork: false,
+        };
+    },
+});
+export default (captureSnapshot) => [
+    wait(captureSnapshot),
+];

package/lib/tools.js

@@ -24,8 +24,10 @@ 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 screenshot from './tools/screenshot.js';
 import testing from './tools/testing.js';
+import vision from './tools/vision.js';
+import wait from './tools/wait.js';
 export const snapshotTools = [
     ...common(true),
     ...console,
@@ -36,11 +38,13 @@ export const snapshotTools = [
     ...navigate(true),
     ...network,
     ...pdf,
+    ...screenshot,
     ...snapshot,
     ...tabs(true),
     ...testing,
+    ...wait(true),
 ];
-export const screenshotTools = [
+export const visionTools = [
     ...common(false),
     ...console,
     ...dialogs(false),
@@ -50,7 +54,8 @@ export const screenshotTools = [
     ...navigate(false),
     ...network,
     ...pdf,
-    ...screen,
     ...tabs(false),
     ...testing,
+    ...vision,
+    ...wait(false),
 ];

package/lib/transport.js

@@ -127,6 +127,6 @@ export function startHttpTransport(config, port, hostname, connectionList) {
             'If your client supports streamable HTTP, you can use the /mcp endpoint instead.',
         ].join('\n');
         // eslint-disable-next-line no-console
-        console.log(message);
+        console.error(message);
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Playwright Tools for MCP",
   "type": "module",
   "repository": {