@playwright/mcp 0.0.32 → 0.0.33

package/lib/tab.js

@@ -17,13 +17,13 @@ import { EventEmitter } from 'events';
 import { callOnPageNoTrace, waitForCompletion } from './tools/utils.js';
 import { logUnhandledError } from './log.js';
 import { ManualPromise } from './manualPromise.js';
-import { outputFile } from './config.js';
 export const TabEvents = {
     modalState: 'modalState'
 };
 export class Tab extends EventEmitter {
     context;
     page;
+    _lastTitle = 'about:blank';
     _consoleMessages = [];
     _recentConsoleMessages = [];
     _requests = new Map();
@@ -53,6 +53,10 @@ export class Tab extends EventEmitter {
         });
         page.setDefaultNavigationTimeout(60000);
         page.setDefaultTimeout(5000);
+        page[tabSymbol] = this;
+    }
+    static forPage(page) {
+        return page[tabSymbol];
     }
     modalStates() {
         return this._modalStates;
@@ -65,14 +69,7 @@ export class Tab extends EventEmitter {
         this._modalStates = this._modalStates.filter(state => state !== modalState);
     }
     modalStatesMarkdown() {
-        const result = ['### Modal state'];
-        if (this._modalStates.length === 0)
-            result.push('- There is no modal state present');
-        for (const state of this._modalStates) {
-            const tool = this.context.tools.filter(tool => 'clearsModalState' in tool).find(tool => tool.clearsModalState === state.type);
-            result.push(`- [${state.description}]: can be handled by the "${tool?.schema.name}" tool`);
-        }
-        return result;
+        return renderModalStates(this.context, this.modalStates());
     }
     _dialogShown(dialog) {
         this.setModalState({
@@ -85,7 +82,7 @@ export class Tab extends EventEmitter {
         const entry = {
             download,
             finished: false,
-            outputFile: await outputFile(this.context.config, download.suggestedFilename())
+            outputFile: await this.context.outputFile(download.suggestedFilename())
         };
         this._downloads.push(entry);
         await download.saveAs(entry.outputFile);
@@ -104,8 +101,16 @@ export class Tab extends EventEmitter {
         this._clearCollectedArtifacts();
         this._onPageClose(this);
     }
-    async title() {
-        return await callOnPageNoTrace(this.page, page => page.title());
+    async updateTitle() {
+        await this._raceAgainstModalStates(async () => {
+            this._lastTitle = await callOnPageNoTrace(this.page, page => page.title());
+        });
+    }
+    lastTitle() {
+        return this._lastTitle;
+    }
+    isCurrentTab() {
+        return this === this.context.currentTab();
     }
     async waitForLoadState(state, options) {
         await callOnPageNoTrace(this.page, page => page.waitForLoadState(state, options).catch(logUnhandledError));
@@ -142,54 +147,46 @@ export class Tab extends EventEmitter {
     requests() {
         return this._requests;
     }
-    _takeRecentConsoleMarkdown() {
-        if (!this._recentConsoleMessages.length)
-            return [];
-        const result = this._recentConsoleMessages.map(message => {
-            return `- ${trim(message.toString(), 100)}`;
-        });
-        return [`### New console messages`, ...result, ''];
-    }
-    _listDownloadsMarkdown() {
-        if (!this._downloads.length)
-            return [];
-        const result = ['### Downloads'];
-        for (const entry of this._downloads) {
-            if (entry.finished)
-                result.push(`- Downloaded file ${entry.download.suggestedFilename()} to ${entry.outputFile}`);
-            else
-                result.push(`- Downloading file ${entry.download.suggestedFilename()} ...`);
-        }
-        result.push('');
-        return result;
-    }
     async captureSnapshot() {
-        const result = [];
-        if (this.modalStates().length) {
-            result.push(...this.modalStatesMarkdown());
-            return result.join('\n');
-        }
-        result.push(...this._takeRecentConsoleMarkdown());
-        result.push(...this._listDownloadsMarkdown());
-        await this._raceAgainstModalStates(async () => {
+        let tabSnapshot;
+        const modalStates = await this._raceAgainstModalStates(async () => {
             const snapshot = await this.page._snapshotForAI();
-            result.push(`### Page state`, `- Page URL: ${this.page.url()}`, `- Page Title: ${await this.page.title()}`, `- Page Snapshot:`, '```yaml', snapshot, '```');
+            tabSnapshot = {
+                url: this.page.url(),
+                title: await this.page.title(),
+                ariaSnapshot: snapshot,
+                modalStates: [],
+                consoleMessages: [],
+                downloads: this._downloads,
+            };
         });
-        return result.join('\n');
+        if (tabSnapshot) {
+            // Assign console message late so that we did not lose any to modal state.
+            tabSnapshot.consoleMessages = this._recentConsoleMessages;
+            this._recentConsoleMessages = [];
+        }
+        return tabSnapshot ?? {
+            url: this.page.url(),
+            title: '',
+            ariaSnapshot: '',
+            modalStates,
+            consoleMessages: [],
+            downloads: [],
+        };
     }
     _javaScriptBlocked() {
         return this._modalStates.some(state => state.type === 'dialog');
     }
     async _raceAgainstModalStates(action) {
         if (this.modalStates().length)
-            return this.modalStates()[0];
+            return this.modalStates();
         const promise = new ManualPromise();
-        const listener = (modalState) => promise.resolve(modalState);
+        const listener = (modalState) => promise.resolve([modalState]);
         this.once(TabEvents.modalState, listener);
         return await Promise.race([
             action().then(() => {
                 this.off(TabEvents.modalState, listener);
-                return undefined;
+                return [];
             }),
             promise,
         ]);
@@ -239,8 +236,14 @@ function pageErrorToConsoleMessage(errorOrValue) {
         toString: () => String(errorOrValue),
     };
 }
-function trim(text, maxLength) {
-    if (text.length <= maxLength)
-        return text;
-    return text.slice(0, maxLength) + '...';
+export function renderModalStates(context, modalStates) {
+    const result = ['### Modal state'];
+    if (modalStates.length === 0)
+        result.push('- There is no modal state present');
+    for (const state of modalStates) {
+        const tool = context.tools.filter(tool => 'clearsModalState' in tool).find(tool => tool.clearsModalState === state.type);
+        result.push(`- [${state.description}]: can be handled by the "${tool?.schema.name}" tool`);
+    }
+    return result;
 }
+const tabSymbol = Symbol('tabSymbol');

package/lib/tools/common.js

@@ -43,7 +43,6 @@ const resize = defineTabTool({
         type: 'readOnly',
     },
     handle: async (tab, params, response) => {
-        response.addCode(`// Resize browser window to ${params.width}x${params.height}`);
         response.addCode(`await page.setViewportSize({ width: ${params.width}, height: ${params.height} });`);
         await tab.waitForCompletion(async () => {
             await tab.page.setViewportSize({ width: params.width, height: params.height });

package/lib/tools/files.js

@@ -31,7 +31,6 @@ const uploadFile = defineTabTool({
         const modalState = tab.modalStates().find(state => state.type === 'fileChooser');
         if (!modalState)
             throw new Error('No file chooser visible');
-        response.addCode(`// Select files for upload`);
         response.addCode(`await fileChooser.setFiles(${JSON.stringify(params.paths)})`);
         tab.clearModalState(modalState);
         await tab.waitForCompletion(async () => {

package/lib/tools/keyboard.js

@@ -57,12 +57,10 @@ const type = defineTabTool({
         await tab.waitForCompletion(async () => {
             if (params.slowly) {
                 response.setIncludeSnapshot();
-                response.addCode(`// Press "${params.text}" sequentially into "${params.element}"`);
                 response.addCode(`await page.${await generateLocator(locator)}.pressSequentially(${javascript.quote(params.text)});`);
                 await locator.pressSequentially(params.text);
             }
             else {
-                response.addCode(`// Fill "${params.text}" into "${params.element}"`);
                 response.addCode(`await page.${await generateLocator(locator)}.fill(${javascript.quote(params.text)});`);
                 await locator.fill(params.text);
             }

package/lib/tools/navigate.js

@@ -30,7 +30,6 @@ const navigate = defineTool({
         const tab = await context.ensureTab();
         await tab.navigate(params.url);
         response.setIncludeSnapshot();
-        response.addCode(`// Navigate to ${params.url}`);
         response.addCode(`await page.goto('${params.url}');`);
     },
 });
@@ -46,7 +45,6 @@ const goBack = defineTabTool({
     handle: async (tab, params, response) => {
         await tab.page.goBack();
         response.setIncludeSnapshot();
-        response.addCode(`// Navigate back`);
         response.addCode(`await page.goBack();`);
     },
 });
@@ -62,7 +60,6 @@ const goForward = defineTabTool({
     handle: async (tab, params, response) => {
         await tab.page.goForward();
         response.setIncludeSnapshot();
-        response.addCode(`// Navigate forward`);
         response.addCode(`await page.goForward();`);
     },
 });

package/lib/tools/pdf.js

@@ -16,7 +16,6 @@
 import { z } from 'zod';
 import { defineTabTool } from './tool.js';
 import * as javascript from '../javascript.js';
-import { outputFile } from '../config.js';
 const pdfSchema = z.object({
     filename: z.string().optional().describe('File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.'),
 });
@@ -30,8 +29,7 @@ const pdf = defineTabTool({
         type: 'readOnly',
     },
     handle: async (tab, params, response) => {
-        const fileName = await outputFile(tab.context.config, params.filename ?? `page-${new Date().toISOString()}.pdf`);
-        response.addCode(`// Save page as ${fileName}`);
+        const fileName = await tab.context.outputFile(params.filename ?? `page-${new Date().toISOString()}.pdf`);
         response.addCode(`await page.pdf(${javascript.formatObject({ path: fileName })});`);
         response.addResult(`Saved page as ${fileName}`);
         await tab.page.pdf({ path: fileName });

package/lib/tools/screenshot.js

@@ -16,10 +16,9 @@
 import { z } from 'zod';
 import { defineTabTool } 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.'),
+    type: z.enum(['png', 'jpeg']).default('png').describe('Image format for the screenshot. Default is png.'),
     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.'),
@@ -45,11 +44,11 @@ const screenshot = defineTabTool({
         type: 'readOnly',
     },
     handle: async (tab, params, response) => {
-        const fileType = params.raw ? 'png' : 'jpeg';
-        const fileName = await outputFile(tab.context.config, params.filename ?? `page-${new Date().toISOString()}.${fileType}`);
+        const fileType = params.type || 'png';
+        const fileName = await tab.context.outputFile(params.filename ?? `page-${new Date().toISOString()}.${fileType}`);
         const options = {
             type: fileType,
-            quality: fileType === 'png' ? undefined : 50,
+            quality: fileType === 'png' ? undefined : 90,
             scale: 'css',
             path: fileName,
             ...(params.fullPage !== undefined && { fullPage: params.fullPage })
@@ -65,10 +64,14 @@ const screenshot = defineTabTool({
             response.addCode(`await page.screenshot(${javascript.formatObject(options)});`);
         const buffer = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
         response.addResult(`Took the ${screenshotTarget} screenshot and saved it as ${fileName}`);
-        response.addImage({
-            contentType: fileType === 'png' ? 'image/png' : 'image/jpeg',
-            data: buffer
-        });
+        // https://github.com/microsoft/playwright-mcp/issues/817
+        // Never return large images to LLM, saving them to the file system is enough.
+        if (!params.fullPage) {
+            response.addImage({
+                contentType: fileType === 'png' ? 'image/png' : 'image/jpeg',
+                data: buffer
+            });
+        }
     }
 });
 export default [

package/lib/tools/snapshot.js

@@ -53,14 +53,10 @@ const click = defineTabTool({
         const locator = await tab.refLocator(params);
         const button = params.button;
         const buttonAttr = button ? `{ button: '${button}' }` : '';
-        if (params.doubleClick) {
-            response.addCode(`// Double click ${params.element}`);
+        if (params.doubleClick)
             response.addCode(`await page.${await generateLocator(locator)}.dblclick(${buttonAttr});`);
-        }
-        else {
-            response.addCode(`// Click ${params.element}`);
+        else
             response.addCode(`await page.${await generateLocator(locator)}.click(${buttonAttr});`);
-        }
         await tab.waitForCompletion(async () => {
             if (params.doubleClick)
                 await locator.dblclick({ button });
@@ -128,7 +124,6 @@ const selectOption = defineTabTool({
     handle: async (tab, params, response) => {
         response.setIncludeSnapshot();
         const locator = await tab.refLocator(params);
-        response.addCode(`// Select options [${params.values.join(', ')}] in ${params.element}`);
         response.addCode(`await page.${await generateLocator(locator)}.selectOption(${javascript.formatObject(params.values)});`);
         await tab.waitForCompletion(async () => {
             await locator.selectOption(params.values);

package/lib/tools/tool.js

@@ -23,10 +23,11 @@ export function defineTabTool(tool) {
             const tab = context.currentTabOrDie();
             const modalStates = tab.modalStates().map(state => state.type);
             if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
-                throw new Error(`The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` + tab.modalStatesMarkdown().join('\n'));
-            if (!tool.clearsModalState && modalStates.length)
-                throw new Error(`Tool "${tool.schema.name}" does not handle the modal state.\n` + tab.modalStatesMarkdown().join('\n'));
-            return tool.handle(tab, params, response);
+                response.addError(`Error: The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` + tab.modalStatesMarkdown().join('\n'));
+            else if (!tool.clearsModalState && modalStates.length)
+                response.addError(`Error: Tool "${tool.schema.name}" does not handle the modal state.\n` + tab.modalStatesMarkdown().join('\n'));
+            else
+                return tool.handle(tab, params, response);
         },
     };
 }

package/lib/tools/utils.js

@@ -60,13 +60,6 @@ export async function waitForCompletion(tab, callback) {
         dispose();
     }
 }
-export function sanitizeForFilePath(s) {
-    const sanitize = (s) => s.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-');
-    const separator = s.lastIndexOf('.');
-    if (separator === -1)
-        return sanitize(s);
-    return sanitize(s.substring(0, separator)) + '.' + sanitize(s.substring(separator + 1));
-}
 export async function generateLocator(locator) {
     try {
         const { resolvedSelector } = await locator._resolveSelector();

package/lib/utils.js

@@ -0,0 +1,26 @@
+/**
+ * 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 crypto from 'crypto';
+export function createHash(data) {
+    return crypto.createHash('sha256').update(data).digest('hex').slice(0, 7);
+}
+export function sanitizeForFilePath(s) {
+    const sanitize = (s) => s.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-');
+    const separator = s.lastIndexOf('.');
+    if (separator === -1)
+        return sanitize(s);
+    return sanitize(s.substring(0, separator)) + '.' + sanitize(s.substring(separator + 1));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "Playwright Tools for MCP",
   "type": "module",
   "repository": {
@@ -17,18 +17,16 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc",
-    "build:extension": "tsc --project extension",
     "lint": "npm run update-readme && eslint . && tsc --noEmit",
     "lint-fix": "eslint . --fix",
     "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
-    "watch:extension": "tsc --watch --project extension",
     "test": "playwright test",
     "ctest": "playwright test --project=chrome",
     "ftest": "playwright test --project=firefox",
     "wtest": "playwright test --project=webkit",
     "run-server": "node lib/browserServer.js",
-    "clean": "rm -rf lib extension/lib",
+    "clean": "rm -rf lib",
     "npm-publish": "npm run clean && npm run build && npm run test && npm publish"
   },
   "exports": {
@@ -44,24 +42,25 @@
     "debug": "^4.4.1",
     "dotenv": "^17.2.0",
     "mime": "^4.0.7",
-    "playwright": "1.55.0-alpha-1752701791000",
-    "playwright-core": "1.55.0-alpha-1752701791000",
+    "playwright": "1.55.0-alpha-2025-08-07",
+    "playwright-core": "1.55.0-alpha-2025-08-07",
     "ws": "^8.18.1",
+    "zod": "^3.24.1",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.57.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.55.0-alpha-1752701791000",
+    "@playwright/test": "1.55.0-alpha-2025-08-07",
     "@stylistic/eslint-plugin": "^3.0.1",
-    "@types/chrome": "^0.0.315",
     "@types/debug": "^4.1.12",
     "@types/node": "^22.13.10",
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "@typescript-eslint/utils": "^8.26.1",
+    "esbuild": "^0.20.1",
     "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-notice": "^1.0.0",