@playwright/mcp 0.0.15 → 0.0.16

package/lib/context.js

@@ -47,28 +47,26 @@ 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 });
-exports.Tab = exports.Context = void 0;
+exports.Context = void 0;
 exports.generateLocator = generateLocator;
 const playwright = __importStar(require("playwright"));
-const yaml_1 = __importDefault(require("yaml"));
 const utils_1 = require("./tools/utils");
 const manualPromise_1 = require("./manualPromise");
+const tab_1 = require("./tab");
 class Context {
     tools;
-    options;
+    config;
     _browser;
     _browserContext;
+    _createBrowserContextPromise;
     _tabs = [];
     _currentTab;
     _modalStates = [];
     _pendingAction;
-    constructor(tools, options) {
+    constructor(tools, config) {
         this.tools = tools;
-        this.options = options;
+        this.config = config;
     }
     modalStates() {
         return this._modalStates;
@@ -81,6 +79,8 @@ class Context {
     }
     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.tools.find(tool => tool.clearsModalState === state.type);
             result.push(`- [${state.description}]: can be handled by the "${tool?.schema.name}" tool`);
@@ -224,7 +224,7 @@ ${code.join('\n')}
         this._pendingAction?.dialogShown.resolve();
     }
     _onPageCreated(page) {
-        const tab = new Tab(this, page, tab => this._onPageClosed(tab));
+        const tab = new tab_1.Tab(this, page, tab => this._onPageClosed(tab));
         this._tabs.push(tab);
         if (!this._currentTab)
             this._currentTab = tab;
@@ -245,6 +245,7 @@ ${code.join('\n')}
             return;
         const browserContext = this._browserContext;
         const browser = this._browser;
+        this._createBrowserContextPromise = undefined;
         this._browserContext = undefined;
         this._browser = undefined;
         await browserContext?.close().then(async () => {
@@ -263,170 +264,40 @@ ${code.join('\n')}
         return this._browserContext;
     }
     async _createBrowserContext() {
-        if (this.options.remoteEndpoint) {
-            const url = new URL(this.options.remoteEndpoint);
-            if (this.options.browserName)
-                url.searchParams.set('browser', this.options.browserName);
-            if (this.options.launchOptions)
-                url.searchParams.set('launch-options', JSON.stringify(this.options.launchOptions));
-            const browser = await playwright[this.options.browserName ?? 'chromium'].connect(String(url));
+        if (!this._createBrowserContextPromise)
+            this._createBrowserContextPromise = this._innerCreateBrowserContext();
+        return this._createBrowserContextPromise;
+    }
+    async _innerCreateBrowserContext() {
+        if (this.config.browser?.remoteEndpoint) {
+            const url = new URL(this.config.browser?.remoteEndpoint);
+            if (this.config.browser.browserName)
+                url.searchParams.set('browser', this.config.browser.browserName);
+            if (this.config.browser.launchOptions)
+                url.searchParams.set('launch-options', JSON.stringify(this.config.browser.launchOptions));
+            const browser = await playwright[this.config.browser?.browserName ?? 'chromium'].connect(String(url));
             const browserContext = await browser.newContext();
             return { browser, browserContext };
         }
-        if (this.options.cdpEndpoint) {
-            const browser = await playwright.chromium.connectOverCDP(this.options.cdpEndpoint);
+        if (this.config.browser?.cdpEndpoint) {
+            const browser = await playwright.chromium.connectOverCDP(this.config.browser.cdpEndpoint);
             const browserContext = browser.contexts()[0];
             return { browser, browserContext };
         }
-        const browserContext = await this._launchPersistentContext();
+        const browserContext = await launchPersistentContext(this.config.browser);
         return { browserContext };
     }
-    async _launchPersistentContext() {
-        try {
-            const browserType = this.options.browserName ? playwright[this.options.browserName] : playwright.chromium;
-            return await browserType.launchPersistentContext(this.options.userDataDir, this.options.launchOptions);
-        }
-        catch (error) {
-            if (error.message.includes('Executable doesn\'t exist'))
-                throw new Error(`Browser specified in your config is not installed. Either install it (likely) or change the config.`);
-            throw error;
-        }
-    }
 }
 exports.Context = Context;
-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.create(this.page);
-    }
-}
-exports.Tab = Tab;
-class PageSnapshot {
-    _frameLocators = [];
-    _text;
-    constructor() {
-    }
-    static async create(page) {
-        const snapshot = new PageSnapshot();
-        await snapshot._build(page);
-        return snapshot;
-    }
-    text() {
-        return this._text;
-    }
-    async _build(page) {
-        const yamlDocument = await this._snapshotFrame(page);
-        this._text = [
-            `- Page Snapshot`,
-            '```yaml',
-            yamlDocument.toString({ indentSeq: false }).trim(),
-            '```',
-        ].join('\n');
-    }
-    async _snapshotFrame(frame) {
-        const frameIndex = this._frameLocators.push(frame) - 1;
-        const snapshotString = await frame.locator('body').ariaSnapshot({ ref: true, emitGeneric: true });
-        const snapshot = yaml_1.default.parseDocument(snapshotString);
-        const visit = async (node) => {
-            if (yaml_1.default.isPair(node)) {
-                await Promise.all([
-                    visit(node.key).then(k => node.key = k),
-                    visit(node.value).then(v => node.value = v)
-                ]);
-            }
-            else if (yaml_1.default.isSeq(node) || yaml_1.default.isMap(node)) {
-                node.items = await Promise.all(node.items.map(visit));
-            }
-            else if (yaml_1.default.isScalar(node)) {
-                if (typeof node.value === 'string') {
-                    const value = node.value;
-                    if (frameIndex > 0)
-                        node.value = value.replace('[ref=', `[ref=f${frameIndex}`);
-                    if (value.startsWith('iframe ')) {
-                        const ref = value.match(/\[ref=(.*)\]/)?.[1];
-                        if (ref) {
-                            try {
-                                const childSnapshot = await this._snapshotFrame(frame.frameLocator(`aria-ref=${ref}`));
-                                return snapshot.createPair(node.value, childSnapshot);
-                            }
-                            catch (error) {
-                                return snapshot.createPair(node.value, '<could not take iframe snapshot>');
-                            }
-                        }
-                    }
-                }
-            }
-            return node;
-        };
-        await visit(snapshot.contents);
-        return snapshot;
-    }
-    refLocator(ref) {
-        let frame = this._frameLocators[0];
-        const match = ref.match(/^f(\d+)(.*)/);
-        if (match) {
-            const frameIndex = parseInt(match[1], 10);
-            frame = this._frameLocators[frameIndex];
-            ref = match[2];
-        }
-        if (!frame)
-            throw new Error(`Frame does not exist. Provide ref from the most current snapshot.`);
-        return frame.locator(`aria-ref=${ref}`);
+async function launchPersistentContext(browserConfig) {
+    try {
+        const browserType = browserConfig?.browserName ? playwright[browserConfig.browserName] : playwright.chromium;
+        return await browserType.launchPersistentContext(browserConfig?.userDataDir || '', { ...browserConfig?.launchOptions, ...browserConfig?.contextOptions });
+    }
+    catch (error) {
+        if (error.message.includes('Executable doesn\'t exist'))
+            throw new Error(`Browser specified in your config is not installed. Either install it (likely) or change the config.`);
+        throw error;
     }
 }
 async function generateLocator(locator) {

package/lib/index.js

@@ -19,9 +19,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createServer = createServer;
-const path_1 = __importDefault(require("path"));
-const os_1 = __importDefault(require("os"));
-const fs_1 = __importDefault(require("fs"));
 const server_1 = require("./server");
 const common_1 = __importDefault(require("./tools/common"));
 const console_1 = __importDefault(require("./tools/console"));
@@ -62,64 +59,12 @@ const screenshotTools = [
     ...(0, tabs_1.default)(false),
 ];
 const packageJSON = require('../package.json');
-async function createServer(options) {
-    let browserName;
-    let channel;
-    switch (options?.browser) {
-        case 'chrome':
-        case 'chrome-beta':
-        case 'chrome-canary':
-        case 'chrome-dev':
-        case 'msedge':
-        case 'msedge-beta':
-        case 'msedge-canary':
-        case 'msedge-dev':
-            browserName = 'chromium';
-            channel = options.browser;
-            break;
-        case 'chromium':
-            browserName = 'chromium';
-            break;
-        case 'firefox':
-            browserName = 'firefox';
-            break;
-        case 'webkit':
-            browserName = 'webkit';
-            break;
-        default:
-            browserName = 'chromium';
-            channel = 'chrome';
-    }
-    const userDataDir = options?.userDataDir ?? await createUserDataDir(browserName);
-    const launchOptions = {
-        headless: !!(options?.headless ?? (os_1.default.platform() === 'linux' && !process.env.DISPLAY)),
-        channel,
-        executablePath: options?.executablePath,
-    };
-    const allTools = options?.vision ? screenshotTools : snapshotTools;
-    const tools = allTools.filter(tool => !options?.capabilities || tool.capability === 'core' || options.capabilities.includes(tool.capability));
+async function createServer(config = {}) {
+    const allTools = config.vision ? screenshotTools : snapshotTools;
+    const tools = allTools.filter(tool => !config.capabilities || tool.capability === 'core' || config.capabilities.includes(tool.capability));
     return (0, server_1.createServerWithTools)({
         name: 'Playwright',
         version: packageJSON.version,
         tools,
-        resources: [],
-        browserName,
-        userDataDir,
-        launchOptions,
-        cdpEndpoint: options?.cdpEndpoint,
-    });
-}
-async function createUserDataDir(browserName) {
-    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-${browserName}-profile`);
-    await fs_1.default.promises.mkdir(result, { recursive: true });
-    return result;
+    }, config);
 }

package/lib/pageSnapshot.js

@@ -0,0 +1,96 @@
+"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.PageSnapshot = void 0;
+const yaml_1 = __importDefault(require("yaml"));
+class PageSnapshot {
+    _frameLocators = [];
+    _text;
+    constructor() {
+    }
+    static async create(page) {
+        const snapshot = new PageSnapshot();
+        await snapshot._build(page);
+        return snapshot;
+    }
+    text() {
+        return this._text;
+    }
+    async _build(page) {
+        const yamlDocument = await this._snapshotFrame(page);
+        this._text = [
+            `- Page Snapshot`,
+            '```yaml',
+            yamlDocument.toString({ indentSeq: false }).trim(),
+            '```',
+        ].join('\n');
+    }
+    async _snapshotFrame(frame) {
+        const frameIndex = this._frameLocators.push(frame) - 1;
+        const snapshotString = await frame.locator('body').ariaSnapshot({ ref: true, emitGeneric: true });
+        const snapshot = yaml_1.default.parseDocument(snapshotString);
+        const visit = async (node) => {
+            if (yaml_1.default.isPair(node)) {
+                await Promise.all([
+                    visit(node.key).then(k => node.key = k),
+                    visit(node.value).then(v => node.value = v)
+                ]);
+            }
+            else if (yaml_1.default.isSeq(node) || yaml_1.default.isMap(node)) {
+                node.items = await Promise.all(node.items.map(visit));
+            }
+            else if (yaml_1.default.isScalar(node)) {
+                if (typeof node.value === 'string') {
+                    const value = node.value;
+                    if (frameIndex > 0)
+                        node.value = value.replace('[ref=', `[ref=f${frameIndex}`);
+                    if (value.startsWith('iframe ')) {
+                        const ref = value.match(/\[ref=(.*)\]/)?.[1];
+                        if (ref) {
+                            try {
+                                const childSnapshot = await this._snapshotFrame(frame.frameLocator(`aria-ref=${ref}`));
+                                return snapshot.createPair(node.value, childSnapshot);
+                            }
+                            catch (error) {
+                                return snapshot.createPair(node.value, '<could not take iframe snapshot>');
+                            }
+                        }
+                    }
+                }
+            }
+            return node;
+        };
+        await visit(snapshot.contents);
+        return snapshot;
+    }
+    refLocator(ref) {
+        let frame = this._frameLocators[0];
+        const match = ref.match(/^f(\d+)(.*)/);
+        if (match) {
+            const frameIndex = parseInt(match[1], 10);
+            frame = this._frameLocators[frameIndex];
+            ref = match[2];
+        }
+        if (!frame)
+            throw new Error(`Frame does not exist. Provide ref from the most current snapshot.`);
+        return frame.locator(`aria-ref=${ref}`);
+    }
+}
+exports.PageSnapshot = PageSnapshot;

package/lib/program.js

@@ -14,17 +14,12 @@
  * 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 });
-const http_1 = __importDefault(require("http"));
 const commander_1 = require("commander");
-const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
-const sse_js_1 = require("@modelcontextprotocol/sdk/server/sse.js");
 const index_1 = require("./index");
 const server_1 = require("./server");
-const assert_1 = __importDefault(require("assert"));
+const transport_1 = require("./transport");
+const config_1 = require("./config");
 const packageJSON = require('../package.json');
 commander_1.program
     .version('Version ' + packageJSON.version)
@@ -34,27 +29,20 @@ commander_1.program
     .option('--cdp-endpoint <endpoint>', 'CDP endpoint to connect to.')
     .option('--executable-path <path>', 'Path to the browser executable.')
     .option('--headless', 'Run browser in headless mode, headed by default')
-    .option('--port <port>', 'Port to listen on for SSE transport.')
+    .option('--device <device>', 'Device to emulate, for example: "iPhone 15"')
     .option('--user-data-dir <path>', 'Path to the user data directory')
+    .option('--port <port>', 'Port to listen on for SSE transport.')
+    .option('--host <host>', 'Host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.')
     .option('--vision', 'Run server that uses screenshots (Aria snapshots are used by default)')
+    .option('--config <path>', 'Path to the configuration file.')
     .action(async (options) => {
-    const serverList = new server_1.ServerList(() => (0, index_1.createServer)({
-        browser: options.browser,
-        userDataDir: options.userDataDir,
-        headless: options.headless,
-        executablePath: options.executablePath,
-        vision: !!options.vision,
-        cdpEndpoint: options.cdpEndpoint,
-        capabilities: options.caps?.split(',').map((c) => c.trim()),
-    }));
+    const config = await (0, config_1.resolveConfig)(options);
+    const serverList = new server_1.ServerList(() => (0, index_1.createServer)(config));
     setupExitWatchdog(serverList);
-    if (options.port) {
-        startSSEServer(+options.port, serverList);
-    }
-    else {
-        const server = await serverList.create();
-        await server.connect(new stdio_js_1.StdioServerTransport());
-    }
+    if (options.port)
+        (0, transport_1.startHttpTransport)(+options.port, options.host, serverList);
+    else
+        await (0, transport_1.startStdioTransport)(serverList);
 });
 function setupExitWatchdog(serverList) {
     const handleExit = async () => {
@@ -67,64 +55,3 @@ function setupExitWatchdog(serverList) {
     process.on('SIGTERM', handleExit);
 }
 commander_1.program.parse(process.argv);
-async function startSSEServer(port, serverList) {
-    const sessions = new Map();
-    const httpServer = http_1.default.createServer(async (req, res) => {
-        if (req.method === 'POST') {
-            const searchParams = new URL(`http://localhost${req.url}`).searchParams;
-            const sessionId = searchParams.get('sessionId');
-            if (!sessionId) {
-                res.statusCode = 400;
-                res.end('Missing sessionId');
-                return;
-            }
-            const transport = sessions.get(sessionId);
-            if (!transport) {
-                res.statusCode = 404;
-                res.end('Session not found');
-                return;
-            }
-            await transport.handlePostMessage(req, res);
-            return;
-        }
-        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));
-            });
-            await server.connect(transport);
-            return;
-        }
-        else {
-            res.statusCode = 405;
-            res.end('Method not allowed');
-        }
-    });
-    httpServer.listen(port, () => {
-        const address = httpServer.address();
-        (0, 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));
-    });
-}

package/lib/server.js

@@ -21,13 +21,12 @@ const index_js_1 = require("@modelcontextprotocol/sdk/server/index.js");
 const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
 const zod_to_json_schema_1 = require("zod-to-json-schema");
 const context_1 = require("./context");
-function createServerWithTools(options) {
-    const { name, version, tools, resources } = options;
-    const context = new context_1.Context(tools, options);
+function createServerWithTools(serverOptions, config) {
+    const { name, version, tools } = serverOptions;
+    const context = new context_1.Context(tools, config);
     const server = new index_js_1.Server({ name, version }, {
         capabilities: {
             tools: {},
-            resources: {},
         }
     });
     server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => {
@@ -39,46 +38,26 @@ function createServerWithTools(options) {
             })),
         };
     });
-    server.setRequestHandler(types_js_1.ListResourcesRequestSchema, async () => {
-        return { resources: resources.map(resource => resource.schema) };
-    });
     server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
+        const errorResult = (...messages) => ({
+            content: [{ type: 'text', text: messages.join('\n') }],
+            isError: true,
+        });
         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,
-            };
-        }
+        if (!tool)
+            return errorResult(`Tool "${request.params.name}" not found`);
         const modalStates = context.modalStates().map(state => state.type);
-        if ((tool.clearsModalState && !modalStates.includes(tool.clearsModalState)) ||
-            (!tool.clearsModalState && modalStates.length)) {
-            const text = [
-                `Tool "${request.params.name}" does not handle the modal state.`,
-                ...context.modalStatesMarkdown(),
-            ].join('\n');
-            return {
-                content: [{ type: 'text', text }],
-                isError: true,
-            };
-        }
+        if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
+            return errorResult(`The tool "${request.params.name}" can only be used when there is related modal state present.`, ...context.modalStatesMarkdown());
+        if (!tool.clearsModalState && modalStates.length)
+            return errorResult(`Tool "${request.params.name}" does not handle the modal state.`, ...context.modalStatesMarkdown());
         try {
             return await context.run(tool, request.params.arguments);
         }
         catch (error) {
-            return {
-                content: [{ type: 'text', text: String(error) }],
-                isError: true,
-            };
+            return errorResult(String(error));
         }
     });
-    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 };
-    });
     const oldClose = server.close.bind(server);
     server.close = async () => {
         await oldClose();