@playwright/mcp 0.0.15 → 0.0.17

package/lib/tab.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const pageSnapshot_1 = require("./pageSnapshot");
+class Tab {
+    context;
+    page;
+    _console = [];
+    _requests = new Map();
+    _snapshot;
+    _onPageClose;
+    constructor(context, page, onPageClose) {
+        this.context = context;
+        this.page = page;
+        this._onPageClose = onPageClose;
+        page.on('console', event => this._console.push(event));
+        page.on('request', request => this._requests.set(request, null));
+        page.on('response', response => this._requests.set(response.request(), response));
+        page.on('framenavigated', frame => {
+            if (!frame.parentFrame())
+                this._clearCollectedArtifacts();
+        });
+        page.on('close', () => this._onClose());
+        page.on('filechooser', chooser => {
+            this.context.setModalState({
+                type: 'fileChooser',
+                description: 'File chooser',
+                fileChooser: chooser,
+            }, this);
+        });
+        page.on('dialog', dialog => this.context.dialogShown(this, dialog));
+        page.setDefaultNavigationTimeout(60000);
+        page.setDefaultTimeout(5000);
+    }
+    _clearCollectedArtifacts() {
+        this._console.length = 0;
+        this._requests.clear();
+    }
+    _onClose() {
+        this._clearCollectedArtifacts();
+        this._onPageClose(this);
+    }
+    async navigate(url) {
+        await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+        // Cap load event to 5 seconds, the page is operational at this point.
+        await this.page.waitForLoadState('load', { timeout: 5000 }).catch(() => { });
+    }
+    hasSnapshot() {
+        return !!this._snapshot;
+    }
+    snapshotOrDie() {
+        if (!this._snapshot)
+            throw new Error('No snapshot available');
+        return this._snapshot;
+    }
+    console() {
+        return this._console;
+    }
+    requests() {
+        return this._requests;
+    }
+    async captureSnapshot() {
+        this._snapshot = await pageSnapshot_1.PageSnapshot.create(this.page);
+    }
+}
+exports.Tab = Tab;

package/lib/tools/install.js

@@ -30,7 +30,7 @@ const install = (0, tool_1.defineTool)({
         inputSchema: zod_1.z.object({}),
     },
     handle: async (context) => {
-        const channel = context.options.launchOptions?.channel ?? context.options.browserName ?? 'chrome';
+        const channel = context.config.browser?.launchOptions?.channel ?? context.config.browser?.launchOptions.browserName ?? 'chrome';
         const cli = path_1.default.join(require.resolve('playwright/package.json'), '..', 'cli.js');
         const child = (0, child_process_1.fork)(cli, ['install', channel], {
             stdio: 'pipe',

package/lib/tools/pdf.js

@@ -47,16 +47,11 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const os_1 = __importDefault(require("os"));
-const path_1 = __importDefault(require("path"));
 const zod_1 = require("zod");
 const tool_1 = require("./tool");
-const utils_1 = require("./utils");
 const javascript = __importStar(require("../javascript"));
+const config_1 = require("../config");
 const pdf = (0, tool_1.defineTool)({
     capability: 'pdf',
     schema: {
@@ -66,7 +61,7 @@ const pdf = (0, tool_1.defineTool)({
     },
     handle: async (context) => {
         const tab = context.currentTabOrDie();
-        const fileName = path_1.default.join(os_1.default.tmpdir(), (0, utils_1.sanitizeForFilePath)(`page-${new Date().toISOString()}`)) + '.pdf';
+        const fileName = await (0, config_1.outputFile)(context.config, `page-${new Date().toISOString()}'.pdf'`);
         const code = [
             `// Save page as ${fileName}`,
             `await page.pdf(${javascript.formatObject({ path: fileName })});`,

package/lib/tools/snapshot.js

@@ -47,17 +47,12 @@ var __importStar = (this && this.__importStar) || (function () {
         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"));
+exports.generateLocator = generateLocator;
 const zod_1 = require("zod");
-const utils_1 = require("./utils");
-const context_1 = require("../context");
-const javascript = __importStar(require("../javascript"));
 const tool_1 = require("./tool");
+const javascript = __importStar(require("../javascript"));
+const config_1 = require("../config");
 const snapshot = (0, tool_1.defineTool)({
     capability: 'core',
     schema: {
@@ -90,7 +85,7 @@ const click = (0, tool_1.defineTool)({
         const locator = tab.snapshotOrDie().refLocator(params.ref);
         const code = [
             `// Click ${params.element}`,
-            `await page.${await (0, context_1.generateLocator)(locator)}.click();`
+            `await page.${await generateLocator(locator)}.click();`
         ];
         return {
             code,
@@ -118,7 +113,7 @@ const drag = (0, tool_1.defineTool)({
         const endLocator = snapshot.refLocator(params.endRef);
         const code = [
             `// Drag ${params.startElement} to ${params.endElement}`,
-            `await page.${await (0, context_1.generateLocator)(startLocator)}.dragTo(page.${await (0, context_1.generateLocator)(endLocator)});`
+            `await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`
         ];
         return {
             code,
@@ -140,7 +135,7 @@ const hover = (0, tool_1.defineTool)({
         const locator = snapshot.refLocator(params.ref);
         const code = [
             `// Hover over ${params.element}`,
-            `await page.${await (0, context_1.generateLocator)(locator)}.hover();`
+            `await page.${await generateLocator(locator)}.hover();`
         ];
         return {
             code,
@@ -169,17 +164,17 @@ const type = (0, tool_1.defineTool)({
         const steps = [];
         if (params.slowly) {
             code.push(`// Press "${params.text}" sequentially into "${params.element}"`);
-            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.pressSequentially(${javascript.quote(params.text)});`);
+            code.push(`await page.${await generateLocator(locator)}.pressSequentially(${javascript.quote(params.text)});`);
             steps.push(() => locator.pressSequentially(params.text));
         }
         else {
             code.push(`// Fill "${params.text}" into "${params.element}"`);
-            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.fill(${javascript.quote(params.text)});`);
+            code.push(`await page.${await generateLocator(locator)}.fill(${javascript.quote(params.text)});`);
             steps.push(() => locator.fill(params.text));
         }
         if (params.submit) {
             code.push(`// Submit text`);
-            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.press('Enter');`);
+            code.push(`await page.${await generateLocator(locator)}.press('Enter');`);
             steps.push(() => locator.press('Enter'));
         }
         return {
@@ -205,7 +200,7 @@ const selectOption = (0, tool_1.defineTool)({
         const locator = snapshot.refLocator(params.ref);
         const code = [
             `// Select options [${params.values.join(', ')}] in ${params.element}`,
-            `await page.${await (0, context_1.generateLocator)(locator)}.selectOption(${javascript.formatObject(params.values)});`
+            `await page.${await generateLocator(locator)}.selectOption(${javascript.formatObject(params.values)});`
         ];
         return {
             code,
@@ -236,7 +231,7 @@ const screenshot = (0, tool_1.defineTool)({
         const tab = context.currentTabOrDie();
         const snapshot = tab.snapshotOrDie();
         const fileType = params.raw ? 'png' : 'jpeg';
-        const fileName = path_1.default.join(os_1.default.tmpdir(), (0, utils_1.sanitizeForFilePath)(`page-${new Date().toISOString()}`)) + `.${fileType}`;
+        const fileName = await (0, config_1.outputFile)(context.config, `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 = [
@@ -244,17 +239,18 @@ const screenshot = (0, tool_1.defineTool)({
         ];
         const locator = params.ref ? snapshot.refLocator(params.ref) : null;
         if (locator)
-            code.push(`await page.${await (0, context_1.generateLocator)(locator)}.screenshot(${javascript.formatObject(options)});`);
+            code.push(`await page.${await generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
         else
             code.push(`await page.screenshot(${javascript.formatObject(options)});`);
+        const includeBase64 = !context.config.tools?.browser_take_screenshot?.omitBase64;
         const action = async () => {
             const screenshot = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
             return {
-                content: [{
+                content: includeBase64 ? [{
                         type: 'image',
                         data: screenshot.toString('base64'),
                         mimeType: fileType === 'png' ? 'image/png' : 'image/jpeg',
-                    }]
+                    }] : []
             };
         };
         return {
@@ -265,6 +261,9 @@ const screenshot = (0, tool_1.defineTool)({
         };
     }
 });
+async function generateLocator(locator) {
+    return locator._generateLocatorString();
+}
 exports.default = [
     snapshot,
     click,

package/lib/transport.js

@@ -0,0 +1,124 @@
+"use strict";
+/**
+ * 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.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startStdioTransport = startStdioTransport;
+exports.startHttpTransport = startHttpTransport;
+const node_http_1 = __importDefault(require("node:http"));
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_crypto_1 = __importDefault(require("node:crypto"));
+const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
+const sse_js_1 = require("@modelcontextprotocol/sdk/server/sse.js");
+const streamableHttp_js_1 = require("@modelcontextprotocol/sdk/server/streamableHttp.js");
+async function startStdioTransport(serverList) {
+    const server = await serverList.create();
+    await server.connect(new stdio_js_1.StdioServerTransport());
+}
+async function handleSSE(req, res, url, serverList, sessions) {
+    if (req.method === 'POST') {
+        const sessionId = url.searchParams.get('sessionId');
+        if (!sessionId) {
+            res.statusCode = 400;
+            return res.end('Missing sessionId');
+        }
+        const transport = sessions.get(sessionId);
+        if (!transport) {
+            res.statusCode = 404;
+            return res.end('Session not found');
+        }
+        return await transport.handlePostMessage(req, res);
+    }
+    else if (req.method === 'GET') {
+        const transport = new sse_js_1.SSEServerTransport('/sse', res);
+        sessions.set(transport.sessionId, transport);
+        const server = await serverList.create();
+        res.on('close', () => {
+            sessions.delete(transport.sessionId);
+            serverList.close(server).catch(e => console.error(e));
+        });
+        return await server.connect(transport);
+    }
+    res.statusCode = 405;
+    res.end('Method not allowed');
+}
+async function handleStreamable(req, res, serverList, sessions) {
+    const sessionId = req.headers['mcp-session-id'];
+    if (sessionId) {
+        const transport = sessions.get(sessionId);
+        if (!transport) {
+            res.statusCode = 404;
+            res.end('Session not found');
+            return;
+        }
+        return await transport.handleRequest(req, res);
+    }
+    if (req.method === 'POST') {
+        const transport = new streamableHttp_js_1.StreamableHTTPServerTransport({
+            sessionIdGenerator: () => node_crypto_1.default.randomUUID(),
+            onsessioninitialized: sessionId => {
+                sessions.set(sessionId, transport);
+            }
+        });
+        transport.onclose = () => {
+            if (transport.sessionId)
+                sessions.delete(transport.sessionId);
+        };
+        const server = await serverList.create();
+        await server.connect(transport);
+        return await transport.handleRequest(req, res);
+    }
+    res.statusCode = 400;
+    res.end('Invalid request');
+}
+function startHttpTransport(port, hostname, serverList) {
+    const sseSessions = new Map();
+    const streamableSessions = new Map();
+    const httpServer = node_http_1.default.createServer(async (req, res) => {
+        const url = new URL(`http://localhost${req.url}`);
+        if (url.pathname.startsWith('/mcp'))
+            await handleStreamable(req, res, serverList, streamableSessions);
+        else
+            await handleSSE(req, res, url, serverList, sseSessions);
+    });
+    httpServer.listen(port, hostname, () => {
+        const address = httpServer.address();
+        (0, node_assert_1.default)(address, 'Could not bind server socket');
+        let url;
+        if (typeof address === 'string') {
+            url = address;
+        }
+        else {
+            const resolvedPort = address.port;
+            let resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
+            if (resolvedHost === '0.0.0.0' || resolvedHost === '[::]')
+                resolvedHost = 'localhost';
+            url = `http://${resolvedHost}:${resolvedPort}`;
+        }
+        console.log(`Listening on ${url}`);
+        console.log('Put this in your client config:');
+        console.log(JSON.stringify({
+            'mcpServers': {
+                'playwright': {
+                    'url': `${url}/sse`
+                }
+            }
+        }, undefined, 2));
+        console.log('If your client supports streamable HTTP, you can use the /mcp endpoint instead.');
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/mcp",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc",
-    "lint": "eslint .",
+    "lint": "npm run update-readme && eslint .",
     "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
     "test": "playwright test",
@@ -34,16 +34,16 @@
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.6.1",
+    "@modelcontextprotocol/sdk": "^1.10.1",
     "commander": "^13.1.0",
-    "playwright": "1.53.0-alpha-1745357020000",
+    "playwright": "1.53.0-alpha-2025-04-25",
     "yaml": "^2.7.1",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.53.0-alpha-1745357020000",
+    "@playwright/test": "1.53.0-alpha-2025-04-25",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@types/node": "^22.13.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",