@playwright/mcp 0.0.13 → 0.0.14

package/lib/context.js

@@ -51,24 +51,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Context = void 0;
+exports.Tab = 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");
 class Context {
+    tools;
     options;
     _browser;
     _browserContext;
     _tabs = [];
     _currentTab;
-    constructor(options) {
+    _modalStates = [];
+    _pendingAction;
+    constructor(tools, options) {
+        this.tools = tools;
         this.options = options;
     }
+    modalStates() {
+        return this._modalStates;
+    }
+    setModalState(modalState, inTab) {
+        this._modalStates.push({ ...modalState, tab: inTab });
+    }
+    clearModalState(modalState) {
+        this._modalStates = this._modalStates.filter(state => state !== modalState);
+    }
+    modalStatesMarkdown() {
+        const result = ['### Modal state'];
+        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`);
+        }
+        return result;
+    }
     tabs() {
         return this._tabs;
     }
-    currentTab() {
+    currentTabOrDie() {
         if (!this._currentTab)
             throw new Error('No current snapshot available. Capture a snapshot of navigate to a new location first.');
         return this._currentTab;
@@ -89,7 +111,7 @@ class Context {
             await context.newPage();
         return this._currentTab;
     }
-    async listTabs() {
+    async listTabsMarkdown() {
         if (!this._tabs.length)
             return '### No tabs open';
         const lines = ['### Open tabs'];
@@ -103,9 +125,103 @@ class Context {
         return lines.join('\n');
     }
     async closeTab(index) {
-        const tab = index === undefined ? this.currentTab() : this._tabs[index - 1];
-        await tab.page.close();
-        return await this.listTabs();
+        const tab = index === undefined ? this._currentTab : this._tabs[index - 1];
+        await tab?.page.close();
+        return await this.listTabsMarkdown();
+    }
+    async run(tool, params) {
+        // Tab management is done outside of the action() call.
+        const toolResult = await tool.handle(this, params);
+        const { code, action, waitForNetwork, captureSnapshot, resultOverride } = toolResult;
+        const racingAction = action ? () => this._raceAgainstModalDialogs(action) : undefined;
+        if (resultOverride)
+            return resultOverride;
+        if (!this._currentTab) {
+            return {
+                content: [{
+                        type: 'text',
+                        text: 'No open pages available. Use the "browser_navigate" tool to navigate to a page first.',
+                    }],
+            };
+        }
+        const tab = this.currentTabOrDie();
+        // TODO: race against modal dialogs to resolve clicks.
+        let actionResult;
+        try {
+            if (waitForNetwork)
+                actionResult = await (0, utils_1.waitForCompletion)(this, tab.page, async () => racingAction?.()) ?? undefined;
+            else
+                actionResult = await racingAction?.() ?? undefined;
+        }
+        finally {
+            if (captureSnapshot && !this._javaScriptBlocked())
+                await tab.captureSnapshot();
+        }
+        const result = [];
+        result.push(`- Ran Playwright code:
+\`\`\`js
+${code.join('\n')}
+\`\`\`
+`);
+        if (this.modalStates().length) {
+            result.push(...this.modalStatesMarkdown());
+            return {
+                content: [{
+                        type: 'text',
+                        text: result.join('\n'),
+                    }],
+            };
+        }
+        if (this.tabs().length > 1)
+            result.push(await this.listTabsMarkdown(), '');
+        if (this.tabs().length > 1)
+            result.push('### Current tab');
+        result.push(`- Page URL: ${tab.page.url()}`, `- Page Title: ${await tab.page.title()}`);
+        if (captureSnapshot && tab.hasSnapshot())
+            result.push(tab.snapshotOrDie().text());
+        const content = actionResult?.content ?? [];
+        return {
+            content: [
+                ...content,
+                {
+                    type: 'text',
+                    text: result.join('\n'),
+                }
+            ],
+        };
+    }
+    async waitForTimeout(time) {
+        if (this._currentTab && !this._javaScriptBlocked())
+            await this._currentTab.page.evaluate(() => new Promise(f => setTimeout(f, 1000)));
+        else
+            await new Promise(f => setTimeout(f, time));
+    }
+    async _raceAgainstModalDialogs(action) {
+        this._pendingAction = {
+            dialogShown: new manualPromise_1.ManualPromise(),
+        };
+        let result;
+        try {
+            await Promise.race([
+                action().then(r => result = r),
+                this._pendingAction.dialogShown,
+            ]);
+        }
+        finally {
+            this._pendingAction = undefined;
+        }
+        return result;
+    }
+    _javaScriptBlocked() {
+        return this._modalStates.some(state => state.type === 'dialog');
+    }
+    dialogShown(tab, dialog) {
+        this.setModalState({
+            type: 'dialog',
+            description: `"${dialog.type()}" dialog with message "${dialog.message()}"`,
+            dialog,
+        }, tab);
+        this._pendingAction?.dialogShown.resolve();
     }
     _onPageCreated(page) {
         const tab = new Tab(this, page, tab => this._onPageClosed(tab));
@@ -114,23 +230,26 @@ class Context {
             this._currentTab = tab;
     }
     _onPageClosed(tab) {
+        this._modalStates = this._modalStates.filter(state => state.tab !== tab);
         const index = this._tabs.indexOf(tab);
         if (index === -1)
             return;
         this._tabs.splice(index, 1);
         if (this._currentTab === tab)
             this._currentTab = this._tabs[Math.min(index, this._tabs.length - 1)];
-        const browser = this._browser;
-        if (this._browserContext && !this._tabs.length) {
-            void this._browserContext.close().then(() => browser?.close()).catch(() => { });
-            this._browser = undefined;
-            this._browserContext = undefined;
-        }
+        if (this._browserContext && !this._tabs.length)
+            void this.close();
     }
     async close() {
         if (!this._browserContext)
             return;
-        await this._browserContext.close();
+        const browserContext = this._browserContext;
+        const browser = this._browser;
+        this._browserContext = undefined;
+        this._browser = undefined;
+        await browserContext?.close().then(async () => {
+            await browser?.close();
+        }).catch(() => { });
     }
     async _ensureBrowserContext() {
         if (!this._browserContext) {
@@ -179,7 +298,6 @@ class Tab {
     context;
     page;
     _console = [];
-    _fileChooser;
     _snapshot;
     _onPageClose;
     constructor(context, page, onPageClose) {
@@ -192,12 +310,18 @@ class Tab {
                 this._console.length = 0;
         });
         page.on('close', () => this._onClose());
-        page.on('filechooser', chooser => this._fileChooser = chooser);
+        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);
     }
     _onClose() {
-        this._fileChooser = undefined;
         this._console.length = 0;
         this._onPageClose(this);
     }
@@ -206,54 +330,10 @@ class Tab {
         // Cap load event to 5 seconds, the page is operational at this point.
         await this.page.waitForLoadState('load', { timeout: 5000 }).catch(() => { });
     }
-    async run(callback, options) {
-        let runResult;
-        try {
-            if (!options?.noClearFileChooser)
-                this._fileChooser = undefined;
-            if (options?.waitForCompletion)
-                runResult = await (0, utils_1.waitForCompletion)(this.page, () => callback(this)) ?? undefined;
-            else
-                runResult = await callback(this) ?? undefined;
-        }
-        finally {
-            if (options?.captureSnapshot)
-                this._snapshot = await PageSnapshot.create(this.page);
-        }
-        const result = [];
-        result.push(`- Ran code:
-\`\`\`js
-${runResult.code.join('\n')}
-\`\`\`
-`);
-        if (this.context.tabs().length > 1)
-            result.push(await this.context.listTabs(), '');
-        if (this._snapshot) {
-            if (this.context.tabs().length > 1)
-                result.push('### Current tab');
-            result.push(this._snapshot.text({ hasFileChooser: !!this._fileChooser }));
-        }
-        return {
-            content: [{
-                    type: 'text',
-                    text: result.join('\n'),
-                }],
-        };
-    }
-    async runAndWait(callback, options) {
-        return await this.run(callback, {
-            waitForCompletion: true,
-            ...options,
-        });
+    hasSnapshot() {
+        return !!this._snapshot;
     }
-    async runAndWaitWithSnapshot(callback, options) {
-        return await this.run(tab => callback(tab.lastSnapshot()), {
-            captureSnapshot: true,
-            waitForCompletion: true,
-            ...options,
-        });
-    }
-    lastSnapshot() {
+    snapshotOrDie() {
         if (!this._snapshot)
             throw new Error('No snapshot available');
         return this._snapshot;
@@ -261,13 +341,11 @@ ${runResult.code.join('\n')}
     async console() {
         return this._console;
     }
-    async submitFileChooser(paths) {
-        if (!this._fileChooser)
-            throw new Error('No file chooser visible');
-        await this._fileChooser.setFiles(paths);
-        this._fileChooser = undefined;
+    async captureSnapshot() {
+        this._snapshot = await PageSnapshot.create(this.page);
     }
 }
+exports.Tab = Tab;
 class PageSnapshot {
     _frameLocators = [];
     _text;
@@ -278,21 +356,17 @@ class PageSnapshot {
         await snapshot._build(page);
         return snapshot;
     }
-    text(options) {
-        const results = [];
-        if (options.hasFileChooser) {
-            results.push('- There is a file chooser visible that requires browser_file_upload to be called');
-            results.push('');
-        }
-        results.push(this._text);
-        return results.join('\n');
+    text() {
+        return this._text;
     }
     async _build(page) {
         const yamlDocument = await this._snapshotFrame(page);
-        const lines = [];
-        lines.push(`- Page URL: ${page.url()}`, `- Page Title: ${await page.title()}`);
-        lines.push(`- Page Snapshot`, '```yaml', yamlDocument.toString().trim(), '```', '');
-        this._text = lines.join('\n');
+        this._text = [
+            `- Page Snapshot`,
+            '```yaml',
+            yamlDocument.toString({ indentSeq: false }).trim(),
+            '```',
+        ].join('\n');
     }
     async _snapshotFrame(frame) {
         const frameIndex = this._frameLocators.push(frame) - 1;

package/lib/index.js

@@ -19,8 +19,13 @@ 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"));
+const dialogs_1 = __importDefault(require("./tools/dialogs"));
 const files_1 = __importDefault(require("./tools/files"));
 const install_1 = __importDefault(require("./tools/install"));
 const keyboard_1 = __importDefault(require("./tools/keyboard"));
@@ -29,9 +34,10 @@ const pdf_1 = __importDefault(require("./tools/pdf"));
 const snapshot_1 = __importDefault(require("./tools/snapshot"));
 const tabs_1 = __importDefault(require("./tools/tabs"));
 const screen_1 = __importDefault(require("./tools/screen"));
-const console_1 = require("./resources/console");
 const snapshotTools = [
     ...(0, common_1.default)(true),
+    ...console_1.default,
+    ...(0, dialogs_1.default)(true),
     ...(0, files_1.default)(true),
     ...install_1.default,
     ...(0, keyboard_1.default)(true),
@@ -42,6 +48,8 @@ const snapshotTools = [
 ];
 const screenshotTools = [
     ...(0, common_1.default)(false),
+    ...console_1.default,
+    ...(0, dialogs_1.default)(false),
     ...(0, files_1.default)(false),
     ...install_1.default,
     ...(0, keyboard_1.default)(false),
@@ -50,21 +58,65 @@ const screenshotTools = [
     ...screen_1.default,
     ...(0, tabs_1.default)(false),
 ];
-const resources = [
-    console_1.console,
-];
 const packageJSON = require('../package.json');
-function createServer(options) {
+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));
     return (0, server_1.createServerWithTools)({
         name: 'Playwright',
         version: packageJSON.version,
         tools,
-        resources,
-        browserName: options?.browserName,
-        userDataDir: options?.userDataDir ?? '',
-        launchOptions: options?.launchOptions,
+        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;
+}

package/lib/manualPromise.js

@@ -0,0 +1,116 @@
+"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.LongStandingScope = exports.ManualPromise = void 0;
+class ManualPromise extends Promise {
+    _resolve;
+    _reject;
+    _isDone;
+    constructor() {
+        let resolve;
+        let reject;
+        super((f, r) => {
+            resolve = f;
+            reject = r;
+        });
+        this._isDone = false;
+        this._resolve = resolve;
+        this._reject = reject;
+    }
+    isDone() {
+        return this._isDone;
+    }
+    resolve(t) {
+        this._isDone = true;
+        this._resolve(t);
+    }
+    reject(e) {
+        this._isDone = true;
+        this._reject(e);
+    }
+    static get [Symbol.species]() {
+        return Promise;
+    }
+    get [Symbol.toStringTag]() {
+        return 'ManualPromise';
+    }
+}
+exports.ManualPromise = ManualPromise;
+class LongStandingScope {
+    _terminateError;
+    _closeError;
+    _terminatePromises = new Map();
+    _isClosed = false;
+    reject(error) {
+        this._isClosed = true;
+        this._terminateError = error;
+        for (const p of this._terminatePromises.keys())
+            p.resolve(error);
+    }
+    close(error) {
+        this._isClosed = true;
+        this._closeError = error;
+        for (const [p, frames] of this._terminatePromises)
+            p.resolve(cloneError(error, frames));
+    }
+    isClosed() {
+        return this._isClosed;
+    }
+    static async raceMultiple(scopes, promise) {
+        return Promise.race(scopes.map(s => s.race(promise)));
+    }
+    async race(promise) {
+        return this._race(Array.isArray(promise) ? promise : [promise], false);
+    }
+    async safeRace(promise, defaultValue) {
+        return this._race([promise], true, defaultValue);
+    }
+    async _race(promises, safe, defaultValue) {
+        const terminatePromise = new ManualPromise();
+        const frames = captureRawStack();
+        if (this._terminateError)
+            terminatePromise.resolve(this._terminateError);
+        if (this._closeError)
+            terminatePromise.resolve(cloneError(this._closeError, frames));
+        this._terminatePromises.set(terminatePromise, frames);
+        try {
+            return await Promise.race([
+                terminatePromise.then(e => safe ? defaultValue : Promise.reject(e)),
+                ...promises
+            ]);
+        }
+        finally {
+            this._terminatePromises.delete(terminatePromise);
+        }
+    }
+}
+exports.LongStandingScope = LongStandingScope;
+function cloneError(error, frames) {
+    const clone = new Error();
+    clone.name = error.name;
+    clone.message = error.message;
+    clone.stack = [error.name + ':' + error.message, ...frames].join('\n');
+    return clone;
+}
+function captureRawStack() {
+    const stackTraceLimit = Error.stackTraceLimit;
+    Error.stackTraceLimit = 50;
+    const error = new Error();
+    const stack = error.stack || '';
+    Error.stackTraceLimit = stackTraceLimit;
+    return stack.split('\n');
+}

package/lib/program.js

@@ -19,9 +19,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const http_1 = __importDefault(require("http"));
-const fs_1 = __importDefault(require("fs"));
-const os_1 = __importDefault(require("os"));
-const path_1 = __importDefault(require("path"));
 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");
@@ -41,43 +38,11 @@ commander_1.program
     .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) => {
-    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 launchOptions = {
-        headless: !!(options.headless ?? (os_1.default.platform() === 'linux' && !process.env.DISPLAY)),
-        channel,
-        executablePath: options.executablePath,
-    };
-    const userDataDir = options.userDataDir ?? await createUserDataDir(browserName);
     const serverList = new server_1.ServerList(() => (0, index_1.createServer)({
-        browserName,
-        userDataDir,
-        launchOptions,
+        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()),
@@ -102,20 +67,6 @@ function setupExitWatchdog(serverList) {
     process.on('SIGTERM', handleExit);
 }
 commander_1.program.parse(process.argv);
-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;
-}
 async function startSSEServer(port, serverList) {
     const sessions = new Map();
     const httpServer = http_1.default.createServer(async (req, res) => {

package/lib/server.js

@@ -22,7 +22,7 @@ const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
 const context_1 = require("./context");
 function createServerWithTools(options) {
     const { name, version, tools, resources } = options;
-    const context = new context_1.Context(options);
+    const context = new context_1.Context(tools, options);
     const server = new index_js_1.Server({ name, version }, {
         capabilities: {
             tools: {},
@@ -43,9 +43,20 @@ function createServerWithTools(options) {
                 isError: true,
             };
         }
+        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,
+            };
+        }
         try {
-            const result = await tool.handle(context, request.params.arguments);
-            return result;
+            return await context.run(tool, request.params.arguments);
         }
         catch (error) {
             return {
@@ -75,7 +86,7 @@ class ServerList {
         this._serverFactory = serverFactory;
     }
     async create() {
-        const server = this._serverFactory();
+        const server = await this._serverFactory();
         this._servers.push(server);
         return server;
     }