@playwright/mcp 0.0.3 → 0.0.5

package/README.md

@@ -33,7 +33,19 @@ A Model Context Protocol (MCP) server that provides browser automation capabilit
 
 #### Installation in VS Code
 
-Install the Playwright MCP server using the VS Code CLI:
+Install the Playwright MCP server in VS Code using one of these buttons:
+
+<!--
+// Generate using?:
+const config = JSON.stringify({ name: 'playwright', command: 'npx', args: ["-y", "@playwright/mcp@latest"] });
+const urlForWebsites = `vscode:mcp/install?${encodeURIComponent(config)}`;
+// Github markdown does not allow linking to `vscode:` directly, so you can use our redirect:
+const urlForGithub = `https://insiders.vscode.dev/redirect?url=${encodeURIComponent(urlForWebsites)}`;
+-->
+
+[<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
+
+Alternatively, you can install the Playwright MCP server using the VS Code CLI:
 
 ```bash
 # For VS Code
@@ -47,6 +59,18 @@ code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwrig
 
 After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
 
+### User data directory
+
+Playwright MCP will launch Chrome browser with the new profile, located at
+
+```
+- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile` on Windows
+- `~/Library/Caches/ms-playwright/mcp-chrome-profile` on macOS
+- `~/.cache/ms-playwright/mcp-chrome-profile` on Linux
+```
+
+All the logged in information will be stored in that profile, you can delete it between sessions if you'dlike to clear the offline state.
+
 
 ### Running headless browser (Browser without GUI).
 
@@ -121,6 +145,20 @@ To use Vision Mode, add the `--vision` flag when starting the server:
 Vision Mode works best with the computer use models that are able to interact with elements using
 X Y coordinate space, based on the provided screenshot.
 
+### Programmatic usage with custom transports
+
+```js
+import { createServer } from '@playwright/mcp';
+
+// ...
+
+const server = createServer({
+  launchOptions: { headless: true }
+});
+transport = new SSEServerTransport("/messages", res);
+server.connect(transport);
+```
+
 ### Snapshot Mode
 
 The Playwright MCP provides a set of tools for browser automation. Here are all available tools:
@@ -166,6 +204,13 @@ The Playwright MCP provides a set of tools for browser automation. Here are all
     - `text` (string): Text to type into the element
     - `submit` (boolean): Whether to submit entered text (press Enter after)
 
+- **browser_select_option**
+  - Description: Select option in a dropdown
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+    - `values` (array): Array of values to select in the dropdown.
+
 - **browser_press_key**
   - Description: Press a key on the keyboard
   - Parameters:
@@ -179,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/index.d.ts

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+/**
+ * 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 type { LaunchOptions } from 'playwright';
+import type { Server } from '@modelcontextprotocol/sdk/server/index.js';
+
+type Options = {
+  /**
+   * Path to the user data directory.
+   */
+  userDataDir?: string;
+
+  /**
+   * Launch options for the browser.
+   */
+  launchOptions?: LaunchOptions;
+
+  /**
+   * Use screenshots instead of snapshots. Less accurate, reliable and overall
+   * slower, but contains visual representation of the page.
+   * @default false
+   */
+  vision?: boolean;
+};
+
+export function createServer(options?: Options): Server;

package/index.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+/**
+ * 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.
+ */
+
+const { createServer } = require('./lib/index');
+module.exports = { createServer };

package/lib/context.js

@@ -51,56 +51,67 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Context = void 0;
 const playwright = __importStar(require("playwright"));
 class Context {
+    _userDataDir;
     _launchOptions;
     _browser;
     _page;
     _console = [];
-    _initializePromise;
-    constructor(launchOptions) {
+    _createPagePromise;
+    constructor(userDataDir, launchOptions) {
+        this._userDataDir = userDataDir;
         this._launchOptions = launchOptions;
     }
-    async ensurePage() {
-        await this._initialize();
-        return this._page;
-    }
-    async ensureConsole() {
-        await this._initialize();
-        return this._console;
-    }
-    async close() {
-        const page = await this.ensurePage();
-        await page.close();
-    }
-    async _initialize() {
-        if (this._initializePromise)
-            return this._initializePromise;
-        this._initializePromise = (async () => {
-            this._browser = await createBrowser(this._launchOptions);
-            this._page = await this._browser.newPage();
-            this._page.on('console', event => this._console.push(event));
-            this._page.on('framenavigated', frame => {
+    async createPage() {
+        if (this._createPagePromise)
+            return this._createPagePromise;
+        this._createPagePromise = (async () => {
+            const { browser, page } = await this._createPage();
+            page.on('console', event => this._console.push(event));
+            page.on('framenavigated', frame => {
                 if (!frame.parentFrame())
                     this._console.length = 0;
             });
-            this._page.on('close', () => this._reset());
+            page.on('close', () => this._onPageClose());
+            this._page = page;
+            this._browser = browser;
+            return page;
         })();
-        return this._initializePromise;
+        return this._createPagePromise;
     }
-    _reset() {
+    _onPageClose() {
         const browser = this._browser;
-        this._initializePromise = undefined;
+        const page = this._page;
+        void page?.context()?.close().then(() => browser?.close()).catch(() => { });
+        this._createPagePromise = undefined;
         this._browser = undefined;
         this._page = undefined;
         this._console.length = 0;
-        void browser?.close();
     }
-}
-exports.Context = Context;
-async function createBrowser(launchOptions) {
-    if (process.env.PLAYWRIGHT_WS_ENDPOINT) {
-        const url = new URL(process.env.PLAYWRIGHT_WS_ENDPOINT);
-        url.searchParams.set('launch-options', JSON.stringify(launchOptions));
-        return await playwright.chromium.connect(String(url));
+    existingPage() {
+        if (!this._page)
+            throw new Error('Navigate to a location to create a page');
+        return this._page;
+    }
+    async console() {
+        return this._console;
+    }
+    async close() {
+        if (!this._page)
+            return;
+        await this._page.close();
+    }
+    async _createPage() {
+        if (process.env.PLAYWRIGHT_WS_ENDPOINT) {
+            const url = new URL(process.env.PLAYWRIGHT_WS_ENDPOINT);
+            if (this._launchOptions)
+                url.searchParams.set('launch-options', JSON.stringify(this._launchOptions));
+            const browser = await playwright.chromium.connect(String(url));
+            const page = await browser.newPage();
+            return { browser, page };
+        }
+        const context = await playwright.chromium.launchPersistentContext(this._userDataDir, this._launchOptions);
+        const [page] = context.pages();
+        return { page };
     }
-    return await playwright.chromium.launch({ channel: 'chrome', ...launchOptions });
 }
+exports.Context = Context;

package/lib/index.js

@@ -0,0 +1,100 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createServer = createServer;
+const server_1 = require("./server");
+const snapshot = __importStar(require("./tools/snapshot"));
+const common = __importStar(require("./tools/common"));
+const screenshot = __importStar(require("./tools/screenshot"));
+const console_1 = require("./resources/console");
+const commonTools = [
+    common.pressKey,
+    common.wait,
+    common.pdf,
+    common.close,
+];
+const snapshotTools = [
+    common.navigate(true),
+    common.goBack(true),
+    common.goForward(true),
+    snapshot.snapshot,
+    snapshot.click,
+    snapshot.hover,
+    snapshot.type,
+    snapshot.selectOption,
+    snapshot.screenshot,
+    ...commonTools,
+];
+const screenshotTools = [
+    common.navigate(false),
+    common.goBack(false),
+    common.goForward(false),
+    screenshot.screenshot,
+    screenshot.moveMouse,
+    screenshot.click,
+    screenshot.drag,
+    screenshot.type,
+    ...commonTools,
+];
+const resources = [
+    console_1.console,
+];
+const packageJSON = require('../package.json');
+function createServer(options) {
+    const tools = options?.vision ? screenshotTools : snapshotTools;
+    return (0, server_1.createServerWithTools)({
+        name: 'Playwright',
+        version: packageJSON.version,
+        tools,
+        resources,
+        userDataDir: options?.userDataDir ?? '',
+        launchOptions: options?.launchOptions,
+    });
+}

package/lib/program.js

@@ -14,101 +14,56 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
 const commander_1 = require("commander");
-const server_1 = require("./server");
-const snapshot = __importStar(require("./tools/snapshot"));
-const common = __importStar(require("./tools/common"));
-const screenshot = __importStar(require("./tools/screenshot"));
-const console_1 = require("./resources/console");
+const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
+const index_1 = require("./index");
 const packageJSON = require('../package.json');
 commander_1.program
     .version('Version ' + packageJSON.version)
     .name(packageJSON.name)
     .option('--headless', 'Run browser in headless mode, headed by default')
+    .option('--user-data-dir <path>', 'Path to the user data directory')
     .option('--vision', 'Run server that uses screenshots (Aria snapshots are used by default)')
     .action(async (options) => {
     const launchOptions = {
         headless: !!options.headless,
+        channel: 'chrome',
     };
-    const tools = options.vision ? screenshotTools : snapshotTools;
-    const server = new server_1.Server({
-        name: 'Playwright',
-        version: packageJSON.version,
-        tools,
-        resources,
-    }, launchOptions);
+    const server = (0, index_1.createServer)({
+        userDataDir: options.userDataDir ?? await userDataDir(),
+        launchOptions,
+        vision: !!options.vision,
+    });
     setupExitWatchdog(server);
-    await server.start();
+    const transport = new stdio_js_1.StdioServerTransport();
+    await server.connect(transport);
 });
 function setupExitWatchdog(server) {
     process.stdin.on('close', async () => {
         setTimeout(() => process.exit(0), 15000);
-        await server?.stop();
+        await server.close();
         process.exit(0);
     });
 }
-const commonTools = [
-    common.pressKey,
-    common.wait,
-    common.pdf,
-    common.close,
-];
-const snapshotTools = [
-    common.navigate(true),
-    common.goBack(true),
-    common.goForward(true),
-    snapshot.snapshot,
-    snapshot.click,
-    snapshot.hover,
-    snapshot.type,
-    ...commonTools,
-];
-const screenshotTools = [
-    common.navigate(false),
-    common.goBack(false),
-    common.goForward(false),
-    screenshot.screenshot,
-    screenshot.moveMouse,
-    screenshot.click,
-    screenshot.drag,
-    screenshot.type,
-    ...commonTools,
-];
-const resources = [
-    console_1.console,
-];
 commander_1.program.parse(process.argv);
+async function userDataDir() {
+    let cacheDirectory;
+    if (process.platform === 'linux')
+        cacheDirectory = process.env.XDG_CACHE_HOME || path_1.default.join(os_1.default.homedir(), '.cache');
+    else if (process.platform === 'darwin')
+        cacheDirectory = path_1.default.join(os_1.default.homedir(), 'Library', 'Caches');
+    else if (process.platform === 'win32')
+        cacheDirectory = process.env.LOCALAPPDATA || path_1.default.join(os_1.default.homedir(), 'AppData', 'Local');
+    else
+        throw new Error('Unsupported platform: ' + process.platform);
+    const result = path_1.default.join(cacheDirectory, 'ms-playwright', 'mcp-chrome-profile');
+    await fs_1.default.promises.mkdir(result, { recursive: true });
+    return result;
+}

package/lib/resources/console.js

@@ -23,14 +23,12 @@ exports.console = {
         mimeType: 'text/plain',
     },
     read: async (context, uri) => {
-        const result = [];
-        for (const message of await context.ensureConsole()) {
-            result.push({
+        const messages = await context.console();
+        const log = messages.map(message => `[${message.type().toUpperCase()}] ${message.text()}`).join('\n');
+        return [{
                 uri,
                 mimeType: 'text/plain',
-                text: `[${message.type().toUpperCase()}] ${message.text()}`,
-            });
-        }
-        return result;
+                text: log
+            }];
     },
 };

package/lib/server.js

@@ -15,65 +15,54 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Server = void 0;
+exports.createServerWithTools = createServerWithTools;
 const index_js_1 = require("@modelcontextprotocol/sdk/server/index.js");
-const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
 const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
 const context_1 = require("./context");
-class Server {
-    _server;
-    _tools;
-    _context;
-    constructor(options, launchOptions) {
-        const { name, version, tools, resources } = options;
-        this._context = new context_1.Context(launchOptions);
-        this._server = new index_js_1.Server({ name, version }, {
-            capabilities: {
-                tools: {},
-                resources: {},
-            }
-        });
-        this._tools = tools;
-        this._server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => {
-            return { tools: tools.map(tool => tool.schema) };
-        });
-        this._server.setRequestHandler(types_js_1.ListResourcesRequestSchema, async () => {
-            return { resources: resources.map(resource => resource.schema) };
-        });
-        this._server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
-            const tool = this._tools.find(tool => tool.schema.name === request.params.name);
-            if (!tool) {
-                return {
-                    content: [{ type: 'text', text: `Tool "${request.params.name}" not found` }],
-                    isError: true,
-                };
-            }
-            try {
-                const result = await tool.handle(this._context, request.params.arguments);
-                return result;
-            }
-            catch (error) {
-                return {
-                    content: [{ type: 'text', text: String(error) }],
-                    isError: true,
-                };
-            }
-        });
-        this._server.setRequestHandler(types_js_1.ReadResourceRequestSchema, async (request) => {
-            const resource = resources.find(resource => resource.schema.uri === request.params.uri);
-            if (!resource)
-                return { contents: [] };
-            const contents = await resource.read(this._context, request.params.uri);
-            return { contents };
-        });
-    }
-    async start() {
-        const transport = new stdio_js_1.StdioServerTransport();
-        await this._server.connect(transport);
-    }
-    async stop() {
-        await this._server.close();
-        await this._context.close();
-    }
+function createServerWithTools(options) {
+    const { name, version, tools, resources, userDataDir, launchOptions } = options;
+    const context = new context_1.Context(userDataDir, launchOptions);
+    const server = new index_js_1.Server({ name, version }, {
+        capabilities: {
+            tools: {},
+            resources: {},
+        }
+    });
+    server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => {
+        return { tools: tools.map(tool => tool.schema) };
+    });
+    server.setRequestHandler(types_js_1.ListResourcesRequestSchema, async () => {
+        return { resources: resources.map(resource => resource.schema) };
+    });
+    server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
+        const tool = tools.find(tool => tool.schema.name === request.params.name);
+        if (!tool) {
+            return {
+                content: [{ type: 'text', text: `Tool "${request.params.name}" not found` }],
+                isError: true,
+            };
+        }
+        try {
+            const result = await tool.handle(context, request.params.arguments);
+            return result;
+        }
+        catch (error) {
+            return {
+                content: [{ type: 'text', text: String(error) }],
+                isError: true,
+            };
+        }
+    });
+    server.setRequestHandler(types_js_1.ReadResourceRequestSchema, async (request) => {
+        const resource = resources.find(resource => resource.schema.uri === request.params.uri);
+        if (!resource)
+            return { contents: [] };
+        const contents = await resource.read(context, request.params.uri);
+        return { contents };
+    });
+    server.close = async () => {
+        await server.close();
+        await context.close();
+    };
+    return server;
 }
-exports.Server = Server;

package/lib/tools/common.js

@@ -35,7 +35,7 @@ const navigate = snapshot => ({
     },
     handle: async (context, params) => {
         const validatedParams = navigateSchema.parse(params);
-        const page = await context.ensurePage();
+        const page = await context.createPage();
         await page.goto(validatedParams.url, { waitUntil: 'domcontentloaded' });
         // Cap load event to 5 seconds, the page is operational at this point.
         await page.waitForLoadState('load', { timeout: 5000 }).catch(() => { });
@@ -58,10 +58,7 @@ const goBack = snapshot => ({
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(goBackSchema),
     },
     handle: async (context) => {
-        return await (0, utils_1.runAndWait)(context, 'Navigated back', async () => {
-            const page = await context.ensurePage();
-            await page.goBack();
-        }, snapshot);
+        return await (0, utils_1.runAndWait)(context, 'Navigated back', async (page) => page.goBack(), snapshot);
     },
 });
 exports.goBack = goBack;
@@ -73,10 +70,7 @@ const goForward = snapshot => ({
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(goForwardSchema),
     },
     handle: async (context) => {
-        return await (0, utils_1.runAndWait)(context, 'Navigated forward', async () => {
-            const page = await context.ensurePage();
-            await page.goForward();
-        }, snapshot);
+        return await (0, utils_1.runAndWait)(context, 'Navigated forward', async (page) => page.goForward(), snapshot);
     },
 });
 exports.goForward = goForward;
@@ -91,8 +85,7 @@ exports.wait = {
     },
     handle: async (context, params) => {
         const validatedParams = waitSchema.parse(params);
-        const page = await context.ensurePage();
-        await page.waitForTimeout(Math.min(10000, validatedParams.time * 1000));
+        await new Promise(f => setTimeout(f, Math.min(10000, validatedParams.time * 1000)));
         return {
             content: [{
                     type: 'text',
@@ -125,7 +118,7 @@ exports.pdf = {
         inputSchema: (0, zod_to_json_schema_1.zodToJsonSchema)(pdfSchema),
     },
     handle: async (context) => {
-        const page = await context.ensurePage();
+        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.ensurePage();
+        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.ensurePage();
+        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.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.ensurePage());
+        return await (0, utils_1.captureAriaSnapshot)(context.existingPage());
     },
 };
 const elementSchema = zod_1.z.object({
@@ -99,6 +99,49 @@ exports.type = {
         }, true);
     },
 };
+const selectOptionSchema = elementSchema.extend({
+    values: zod_1.z.array(zod_1.z.string()).describe('Array of values to select in the dropdown. This can be a single value or multiple values.'),
+});
+exports.selectOption = {
+    schema: {
+        name: 'browser_select_option',
+        description: 'Select an option in a dropdown',
+        inputSchema: (0, zod_to_json_schema_1.default)(selectOptionSchema),
+    },
+    handle: async (context, params) => {
+        const validatedParams = selectOptionSchema.parse(params);
+        return await (0, utils_1.runAndWait)(context, `Selected option in "${validatedParams.element}"`, async (page) => {
+            const locator = refLocator(page, validatedParams.ref);
+            await locator.selectOption(validatedParams.values);
+        }, 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.ensurePage();
+    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.3",
+  "version": "0.0.5",
   "description": "Playwright Tools for MCP",
   "repository": {
     "type": "git",
@@ -18,27 +18,27 @@
     "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": {
-    "./servers/server": "./lib/servers/server.js",
-    "./servers/screenshot": "./lib/servers/screenshot.js",
-    "./servers/snapshot": "./lib/servers/snapshot.js",
-    "./tools/common": "./lib/tools/common.js",
-    "./tools/screenshot": "./lib/tools/screenshot.js",
-    "./tools/snapshot": "./lib/tools/snapshot.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
     "commander": "^13.1.0",
-    "playwright": "1.52.0-alpha-2025-03-21",
+    "playwright": "1.52.0-alpha-1743011787000",
     "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.52.0-alpha-2025-03-21",
+    "@playwright/test": "1.52.0-alpha-1743011787000",
     "@stylistic/eslint-plugin": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
@@ -50,6 +50,6 @@
     "typescript": "^5.8.2"
   },
   "bin": {
-    "mcp": "cli.js"
+    "mcp-server-playwright": "cli.js"
   }
 }