@playwright/mcp 0.0.26 → 0.0.27

package/README.md

@@ -137,7 +137,10 @@ Playwright MCP server supports following arguments. They can be provided in the
   --ignore-https-errors        ignore https errors
   --isolated                   keep the browser profile in memory, do not save
                                it to disk.
-  --no-image-responses         do not send image responses to the client.
+  --image-responses <mode>     whether to send image responses to the client.
+                               Can be "allow", "omit", or "auto". Defaults to
+                               "auto", which sends images if the client can
+                               display them.
   --no-sandbox                 disable the sandbox for all process types that
                                are normally sandboxed.
   --output-dir <path>          path to the directory for output files.

package/config.d.ts

@@ -117,7 +117,7 @@ export type Config = {
   };
 
   /**
-   * Do not send image responses to the client.
+   * Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.
    */
-  noImageResponses?: boolean;
+  imageResponses?: 'allow' | 'omit' | 'auto';
 };

package/index.js

@@ -15,5 +15,5 @@
  * limitations under the License.
  */
 
-import { createConnection } from './lib/index';
+import { createConnection } from './lib/index.js';
 export { createConnection };

package/lib/config.js

@@ -47,6 +47,8 @@ export async function resolveCLIConfig(cliOptions) {
     // Derive artifact output directory from config.outputDir
     if (result.saveTrace)
         result.browser.launchOptions.tracesDir = path.join(result.outputDir, 'traces');
+    if (result.browser.browserName === 'chromium')
+        result.browser.launchOptions.cdpPort = await findFreePort();
     return result;
 }
 export async function configFromCLIOptions(cliOptions) {
@@ -71,9 +73,6 @@ export async function configFromCLIOptions(cliOptions) {
         case 'webkit':
             browserName = 'webkit';
             break;
-        default:
-            browserName = 'chromium';
-            channel = 'chrome';
     }
     // Launch options
     const launchOptions = {
@@ -81,13 +80,9 @@ export async function configFromCLIOptions(cliOptions) {
         executablePath: cliOptions.executablePath,
         headless: cliOptions.headless,
     };
-    if (browserName === 'chromium') {
-        launchOptions.cdpPort = await findFreePort();
-        if (!cliOptions.sandbox) {
-            // --no-sandbox was passed, disable the sandbox
-            launchOptions.chromiumSandbox = false;
-        }
-    }
+    // --no-sandbox was passed, disable the sandbox
+    if (!cliOptions.sandbox)
+        launchOptions.chromiumSandbox = false;
     if (cliOptions.proxyServer) {
         launchOptions.proxy = {
             server: cliOptions.proxyServer
@@ -137,11 +132,8 @@ export async function configFromCLIOptions(cliOptions) {
         },
         saveTrace: cliOptions.saveTrace,
         outputDir: cliOptions.outputDir,
+        imageResponses: cliOptions.imageResponses,
     };
-    if (!cliOptions.imageResponses) {
-        // --no-image-responses was passed, disable image responses
-        result.noImageResponses = true;
-    }
     return result;
 }
 async function findFreePort() {

package/lib/connection.js

@@ -77,8 +77,7 @@ export class Connection {
         await new Promise(resolve => {
             this.server.oninitialized = () => resolve();
         });
-        if (this.server.getClientVersion()?.name.includes('cursor'))
-            this.context.config.noImageResponses = true;
+        this.context.clientVersion = this.server.getClientVersion();
     }
     async close() {
         await this.server.close();

package/lib/context.js

@@ -31,10 +31,18 @@ export class Context {
     _modalStates = [];
     _pendingAction;
     _downloads = [];
+    clientVersion;
     constructor(tools, config) {
         this.tools = tools;
         this.config = config;
     }
+    clientSupportsImages() {
+        if (this.config.imageResponses === 'allow')
+            return true;
+        if (this.config.imageResponses === 'omit')
+            return false;
+        return !this.clientVersion?.name.includes('cursor');
+    }
     modalStates() {
         return this._modalStates;
     }

package/lib/pageSnapshot.js

@@ -29,9 +29,6 @@ export class PageSnapshot {
         return this._text;
     }
     async _build() {
-        // FIXME: Rountrip evaluate to ensure _snapshotForAI works.
-        // This probably broke once we moved off locator snapshots
-        await this._page.evaluate(() => 1);
         const snapshot = await callOnPageNoTrace(this._page, page => page._snapshotForAI());
         this._text = [
             `- Page Snapshot`,
@@ -40,7 +37,7 @@ export class PageSnapshot {
             '```',
         ].join('\n');
     }
-    refLocator(ref) {
-        return this._page.locator(`aria-ref=${ref}`);
+    refLocator(params) {
+        return this._page.locator(`aria-ref=${params.ref}`).describe(params.element);
     }
 }

package/lib/program.js

@@ -35,7 +35,7 @@ program
     .option('--host <host>', 'host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.')
     .option('--ignore-https-errors', 'ignore https errors')
     .option('--isolated', 'keep the browser profile in memory, do not save it to disk.')
-    .option('--no-image-responses', 'do not send image responses to the client.')
+    .option('--image-responses <mode>', 'whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.')
     .option('--no-sandbox', 'disable the sandbox for all process types that are normally sandboxed.')
     .option('--output-dir <path>', 'path to the directory for output files.')
     .option('--port <port>', 'port to listen on for SSE transport.')

package/lib/tools/screenshot.js

@@ -48,12 +48,12 @@ const screenshot = defineTool({
         const code = [
             `// Screenshot ${isElementScreenshot ? params.element : 'viewport'} and save it as ${fileName}`,
         ];
-        const locator = params.ref ? snapshot.refLocator(params.ref) : null;
+        const locator = params.ref ? snapshot.refLocator({ element: params.element || '', ref: 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 includeBase64 = context.clientSupportsImages();
         const action = async () => {
             const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
             return {

package/lib/tools/snapshot.js

@@ -50,7 +50,7 @@ const click = defineTool({
     },
     handle: async (context, params) => {
         const tab = context.currentTabOrDie();
-        const locator = tab.snapshotOrDie().refLocator(params.ref);
+        const locator = tab.snapshotOrDie().refLocator(params);
         const code = [
             `// Click ${params.element}`,
             `await page.${await generateLocator(locator)}.click();`
@@ -79,8 +79,8 @@ const drag = defineTool({
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
-        const startLocator = snapshot.refLocator(params.startRef);
-        const endLocator = snapshot.refLocator(params.endRef);
+        const startLocator = snapshot.refLocator({ ref: params.startRef, element: params.startElement });
+        const endLocator = snapshot.refLocator({ ref: params.endRef, element: params.endElement });
         const code = [
             `// Drag ${params.startElement} to ${params.endElement}`,
             `await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`
@@ -104,7 +104,7 @@ const hover = defineTool({
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
-        const locator = snapshot.refLocator(params.ref);
+        const locator = snapshot.refLocator(params);
         const code = [
             `// Hover over ${params.element}`,
             `await page.${await generateLocator(locator)}.hover();`
@@ -133,7 +133,7 @@ const type = defineTool({
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
-        const locator = snapshot.refLocator(params.ref);
+        const locator = snapshot.refLocator(params);
         const code = [];
         const steps = [];
         if (params.slowly) {
@@ -173,7 +173,7 @@ const selectOption = defineTool({
     },
     handle: async (context, params) => {
         const snapshot = context.currentTabOrDie().snapshotOrDie();
-        const locator = snapshot.refLocator(params.ref);
+        const locator = snapshot.refLocator(params);
         const code = [
             `// Select options [${params.values.join(', ')}] in ${params.element}`,
             `await page.${await generateLocator(locator)}.selectOption(${javascript.formatObject(params.values)});`

package/lib/tools/utils.js

@@ -66,8 +66,8 @@ export function sanitizeForFilePath(s) {
     return sanitize(s.substring(0, separator)) + '.' + sanitize(s.substring(separator + 1));
 }
 export async function generateLocator(locator) {
-    return locator._frame._wrapApiCall(() => locator._generateLocatorString(), true);
+    return locator._generateLocatorString();
 }
 export async function callOnPageNoTrace(page, callback) {
-    return await page._wrapApiCall(() => callback(page), true);
+    return await page._wrapApiCall(() => callback(page), { internal: true });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Playwright Tools for MCP",
   "type": "module",
   "repository": {
@@ -37,13 +37,13 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.11.0",
     "commander": "^13.1.0",
-    "playwright": "1.53.0-alpha-1746832516000",
+    "playwright": "1.53.0-alpha-2025-05-27",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.53.0-alpha-1746832516000",
+    "@playwright/test": "1.53.0-alpha-2025-05-27",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@types/node": "^22.13.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",