@playwright/mcp 0.0.10 → 0.0.14

package/lib/context.js

@@ -51,25 +51,48 @@ 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('Navigate to a location to create a tab');
+            throw new Error('No current snapshot available. Capture a snapshot of navigate to a new location first.');
         return this._currentTab;
     }
     async newTab() {
@@ -88,10 +111,10 @@ class Context {
             await context.newPage();
         return this._currentTab;
     }
-    async listTabs() {
+    async listTabsMarkdown() {
         if (!this._tabs.length)
-            return 'No tabs open';
-        const lines = ['Open tabs:'];
+            return '### No tabs open';
+        const lines = ['### Open tabs'];
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i];
             const title = await tab.page.title();
@@ -102,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));
@@ -113,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) {
@@ -178,7 +298,6 @@ class Tab {
     context;
     page;
     _console = [];
-    _fileChooser;
     _snapshot;
     _onPageClose;
     constructor(context, page, onPageClose) {
@@ -191,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);
     }
@@ -205,42 +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) {
-        try {
-            if (!options?.noClearFileChooser)
-                this._fileChooser = undefined;
-            if (options?.waitForCompletion)
-                await (0, utils_1.waitForCompletion)(this.page, () => callback(this));
-            else
-                await callback(this);
-        }
-        finally {
-            if (options?.captureSnapshot)
-                this._snapshot = await PageSnapshot.create(this.page);
-        }
-        const tabList = this.context.tabs().length > 1 ? await this.context.listTabs() + '\n\nCurrent tab:' + '\n' : '';
-        const snapshot = this._snapshot?.text({ status: options?.status, hasFileChooser: !!this._fileChooser }) ?? options?.status ?? '';
-        return {
-            content: [{
-                    type: 'text',
-                    text: tabList + snapshot,
-                }],
-        };
-    }
-    async runAndWait(callback, options) {
-        return await this.run(callback, {
-            waitForCompletion: true,
-            ...options,
-        });
+    hasSnapshot() {
+        return !!this._snapshot;
     }
-    async runAndWaitWithSnapshot(callback, options) {
-        return await this.run(callback, {
-            captureSnapshot: true,
-            waitForCompletion: true,
-            ...options,
-        });
-    }
-    lastSnapshot() {
+    snapshotOrDie() {
         if (!this._snapshot)
             throw new Error('No snapshot available');
         return this._snapshot;
@@ -248,13 +341,11 @@ class Tab {
     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;
@@ -265,25 +356,17 @@ class PageSnapshot {
         await snapshot._build(page);
         return snapshot;
     }
-    text(options) {
-        const results = [];
-        if (options?.status) {
-            results.push(options.status);
-            results.push('');
-        }
-        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;
@@ -336,3 +419,6 @@ class PageSnapshot {
         return frame.locator(`aria-ref=${ref}`);
     }
 }
+async function generateLocator(locator) {
+    return locator._generateLocatorString();
+}

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 = [
-    ...common_1.default,
+    ...(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),
@@ -41,7 +47,9 @@ const snapshotTools = [
     ...(0, tabs_1.default)(true),
 ];
 const screenshotTools = [
-    ...common_1.default,
+    ...(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/javascript.js

@@ -0,0 +1,54 @@
+"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.escapeWithQuotes = escapeWithQuotes;
+exports.quote = quote;
+exports.formatObject = formatObject;
+// adapted from:
+// - https://github.com/microsoft/playwright/blob/76ee48dc9d4034536e3ec5b2c7ce8be3b79418a8/packages/playwright-core/src/utils/isomorphic/stringUtils.ts
+// - https://github.com/microsoft/playwright/blob/76ee48dc9d4034536e3ec5b2c7ce8be3b79418a8/packages/playwright-core/src/server/codegen/javascript.ts
+// NOTE: this function should not be used to escape any selectors.
+function escapeWithQuotes(text, char = '\'') {
+    const stringified = JSON.stringify(text);
+    const escapedText = stringified.substring(1, stringified.length - 1).replace(/\\"/g, '"');
+    if (char === '\'')
+        return char + escapedText.replace(/[']/g, '\\\'') + char;
+    if (char === '"')
+        return char + escapedText.replace(/["]/g, '\\"') + char;
+    if (char === '`')
+        return char + escapedText.replace(/[`]/g, '`') + char;
+    throw new Error('Invalid escape char');
+}
+function quote(text) {
+    return escapeWithQuotes(text, '\'');
+}
+function formatObject(value, indent = '  ') {
+    if (typeof value === 'string')
+        return quote(value);
+    if (Array.isArray(value))
+        return `[${value.map(o => formatObject(o)).join(', ')}]`;
+    if (typeof value === 'object') {
+        const keys = Object.keys(value).filter(key => value[key] !== undefined).sort();
+        if (!keys.length)
+            return '{}';
+        const tokens = [];
+        for (const key of keys)
+            tokens.push(`${key}: ${formatObject(value[key])}`);
+        return `{\n${indent}${tokens.join(`,\n${indent}`)}\n}`;
+    }
+    return String(value);
+}

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');
+}