@wordbricks/playwright-mcp 0.1.25 → 0.1.26

package/lib/config.js

@@ -0,0 +1,300 @@
+/**
+ * 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 fs from "fs";
+import os from "os";
+import path from "path";
+import { devices } from "playwright-core";
+import { sanitizeForFilePath } from "./utils/fileUtils.js";
+const defaultConfig = {
+    browser: {
+        browserName: "chromium",
+        launchOptions: {
+            channel: "chrome",
+            headless: os.platform() === "linux" && !process.env.DISPLAY,
+            chromiumSandbox: true,
+        },
+        contextOptions: {
+            viewport: null,
+        },
+    },
+    network: {
+        allowedOrigins: undefined,
+        blockedOrigins: undefined,
+    },
+    server: {},
+    saveTrace: false,
+};
+export async function resolveConfig(config) {
+    return mergeConfig(defaultConfig, config);
+}
+export async function resolveCLIConfig(cliOptions) {
+    const configInFile = await loadConfig(cliOptions.config);
+    const envOverrides = configFromEnv();
+    const cliOverrides = configFromCLIOptions(cliOptions);
+    let result = defaultConfig;
+    result = mergeConfig(result, configInFile);
+    result = mergeConfig(result, envOverrides);
+    result = mergeConfig(result, cliOverrides);
+    return result;
+}
+export function configFromCLIOptions(cliOptions) {
+    let browserName;
+    let channel;
+    switch (cliOptions.browser) {
+        case "chrome":
+        case "chrome-beta":
+        case "chrome-canary":
+        case "chrome-dev":
+        case "chromium":
+        case "msedge":
+        case "msedge-beta":
+        case "msedge-canary":
+        case "msedge-dev":
+            browserName = "chromium";
+            channel = cliOptions.browser;
+            break;
+        case "firefox":
+            browserName = "firefox";
+            break;
+        case "webkit":
+            browserName = "webkit";
+            break;
+    }
+    // Launch options
+    const launchOptions = {
+        channel,
+        executablePath: cliOptions.executablePath,
+        headless: cliOptions.headless,
+        // Ignore default automation flag to reduce bot detection
+        ignoreDefaultArgs: ["--enable-automation"],
+    };
+    // --no-sandbox was passed, disable the sandbox
+    if (cliOptions.sandbox === false)
+        launchOptions.chromiumSandbox = false;
+    // Add default Chrome args to avoid automation detection and suppress popups
+    launchOptions.args = launchOptions.args || [];
+    launchOptions.args.push("--disable-infobars", 
+    // Password & credential popups
+    "--disable-save-password-bubble", "--password-store=basic", "--use-mock-keychain", 
+    // Crash restore popup
+    "--hide-crash-restore-bubble", 
+    // First run & default browser
+    "--no-first-run", "--no-default-browser-check", 
+    // Disable various Chrome features (Translate, PasswordManager, Autofill, Sync)
+    "--disable-features=Translate,PasswordManager,PasswordManagerEnabled,PasswordManagerOnboarding,AutofillServerCommunication,CredentialManagerOnboarding", "--disable-sync", 
+    // Disable password manager via experimental options
+    "--enable-features=DisablePasswordManager");
+    // --app was passed, add app mode argument
+    if (cliOptions.app) {
+        launchOptions.args = launchOptions.args || [];
+        launchOptions.args.push(`--app=${cliOptions.app}`);
+    }
+    // --window-position was passed, add window position argument
+    if (cliOptions.windowPosition) {
+        try {
+            const [x, y] = cliOptions.windowPosition.split(",").map((n) => +n);
+            if (isNaN(x) || isNaN(y))
+                throw new Error("bad values");
+            launchOptions.args = launchOptions.args || [];
+            launchOptions.args.push(`--window-position=${x},${y}`);
+        }
+        catch (e) {
+            throw new Error('Invalid window position format: use "x,y", for example --window-position="100,200"');
+        }
+    }
+    // --window-size was passed, add window size argument
+    if (cliOptions.windowSize) {
+        try {
+            const [width, height] = cliOptions.windowSize.split(",").map((n) => +n);
+            if (isNaN(width) || isNaN(height))
+                throw new Error("bad values");
+            launchOptions.args = launchOptions.args || [];
+            launchOptions.args.push(`--window-size=${width},${height}`);
+        }
+        catch (e) {
+            throw new Error('Invalid window size format: use "width,height", for example --window-size="1280,720"');
+        }
+    }
+    if (cliOptions.proxyServer) {
+        launchOptions.proxy = {
+            server: cliOptions.proxyServer,
+        };
+        if (cliOptions.proxyBypass)
+            launchOptions.proxy.bypass = cliOptions.proxyBypass;
+    }
+    if (cliOptions.device && cliOptions.cdpEndpoint)
+        throw new Error("Device emulation is not supported with cdpEndpoint.");
+    // Context options
+    const contextOptions = cliOptions.device
+        ? devices[cliOptions.device]
+        : {};
+    if (cliOptions.storageState)
+        contextOptions.storageState = cliOptions.storageState;
+    if (cliOptions.userAgent)
+        contextOptions.userAgent = cliOptions.userAgent;
+    if (cliOptions.viewportSize) {
+        try {
+            const [width, height] = cliOptions.viewportSize.split(",").map((n) => +n);
+            if (isNaN(width) || isNaN(height))
+                throw new Error("bad values");
+            contextOptions.viewport = { width, height };
+        }
+        catch (e) {
+            throw new Error('Invalid viewport size format: use "width,height", for example --viewport-size="800,600"');
+        }
+    }
+    if (cliOptions.ignoreHttpsErrors)
+        contextOptions.ignoreHTTPSErrors = true;
+    if (cliOptions.blockServiceWorkers)
+        contextOptions.serviceWorkers = "block";
+    const result = {
+        browser: {
+            browserName,
+            isolated: cliOptions.isolated,
+            userDataDir: cliOptions.userDataDir,
+            launchOptions,
+            contextOptions,
+            cdpEndpoint: cliOptions.cdpEndpoint,
+            initScript: cliOptions.initScript,
+            app: cliOptions.app,
+        },
+        server: {
+            port: cliOptions.port,
+            host: cliOptions.host,
+        },
+        capabilities: cliOptions.caps,
+        network: {
+            allowedOrigins: cliOptions.allowedOrigins,
+            blockedOrigins: cliOptions.blockedOrigins,
+        },
+        saveSession: cliOptions.saveSession,
+        saveTrace: cliOptions.saveTrace,
+        outputDir: cliOptions.outputDir,
+        imageResponses: cliOptions.imageResponses,
+    };
+    return result;
+}
+function configFromEnv() {
+    const options = {};
+    options.allowedOrigins = semicolonSeparatedList(process.env.PLAYWRIGHT_MCP_ALLOWED_ORIGINS);
+    options.app = envToString(process.env.PLAYWRIGHT_MCP_APP);
+    options.blockedOrigins = semicolonSeparatedList(process.env.PLAYWRIGHT_MCP_BLOCKED_ORIGINS);
+    options.blockServiceWorkers = envToBoolean(process.env.PLAYWRIGHT_MCP_BLOCK_SERVICE_WORKERS);
+    options.browser = envToString(process.env.PLAYWRIGHT_MCP_BROWSER);
+    options.caps = commaSeparatedList(process.env.PLAYWRIGHT_MCP_CAPS);
+    options.cdpEndpoint = envToString(process.env.PLAYWRIGHT_MCP_CDP_ENDPOINT);
+    options.config = envToString(process.env.PLAYWRIGHT_MCP_CONFIG);
+    options.device = envToString(process.env.PLAYWRIGHT_MCP_DEVICE);
+    options.executablePath = envToString(process.env.PLAYWRIGHT_MCP_EXECUTABLE_PATH);
+    options.headless = envToBoolean(process.env.PLAYWRIGHT_MCP_HEADLESS);
+    options.host = envToString(process.env.PLAYWRIGHT_MCP_HOST);
+    options.ignoreHttpsErrors = envToBoolean(process.env.PLAYWRIGHT_MCP_IGNORE_HTTPS_ERRORS);
+    options.initScript = envToString(process.env.PLAYWRIGHT_MCP_INIT_SCRIPT);
+    options.isolated = envToBoolean(process.env.PLAYWRIGHT_MCP_ISOLATED);
+    if (process.env.PLAYWRIGHT_MCP_IMAGE_RESPONSES === "omit")
+        options.imageResponses = "omit";
+    options.sandbox = envToBoolean(process.env.PLAYWRIGHT_MCP_SANDBOX);
+    options.outputDir = envToString(process.env.PLAYWRIGHT_MCP_OUTPUT_DIR);
+    options.port = envToNumber(process.env.PLAYWRIGHT_MCP_PORT);
+    options.proxyBypass = envToString(process.env.PLAYWRIGHT_MCP_PROXY_BYPASS);
+    options.proxyServer = envToString(process.env.PLAYWRIGHT_MCP_PROXY_SERVER);
+    options.saveTrace = envToBoolean(process.env.PLAYWRIGHT_MCP_SAVE_TRACE);
+    options.storageState = envToString(process.env.PLAYWRIGHT_MCP_STORAGE_STATE);
+    options.userAgent = envToString(process.env.PLAYWRIGHT_MCP_USER_AGENT);
+    options.userDataDir = envToString(process.env.PLAYWRIGHT_MCP_USER_DATA_DIR);
+    options.viewportSize = envToString(process.env.PLAYWRIGHT_MCP_VIEWPORT_SIZE);
+    options.windowPosition = envToString(process.env.PLAYWRIGHT_MCP_WINDOW_POSITION);
+    options.windowSize = envToString(process.env.PLAYWRIGHT_MCP_WINDOW_SIZE);
+    return configFromCLIOptions(options);
+}
+async function loadConfig(configFile) {
+    if (!configFile)
+        return {};
+    try {
+        return JSON.parse(await fs.promises.readFile(configFile, "utf8"));
+    }
+    catch (error) {
+        throw new Error(`Failed to load config file: ${configFile}, ${error}`);
+    }
+}
+export async function outputFile(config, rootPath, name) {
+    const outputDir = config.outputDir ??
+        (rootPath ? path.join(rootPath, ".playwright-mcp") : undefined) ??
+        path.join(os.tmpdir(), "playwright-mcp-output", sanitizeForFilePath(new Date().toISOString()));
+    await fs.promises.mkdir(outputDir, { recursive: true });
+    const fileName = sanitizeForFilePath(name);
+    return path.join(outputDir, fileName);
+}
+function pickDefined(obj) {
+    return Object.fromEntries(Object.entries(obj ?? {}).filter(([_, v]) => v !== undefined));
+}
+function mergeConfig(base, overrides) {
+    const browser = {
+        ...pickDefined(base.browser),
+        ...pickDefined(overrides.browser),
+        browserName: overrides.browser?.browserName ?? base.browser?.browserName ?? "chromium",
+        isolated: overrides.browser?.isolated ?? base.browser?.isolated ?? false,
+        launchOptions: {
+            ...pickDefined(base.browser?.launchOptions),
+            ...pickDefined(overrides.browser?.launchOptions),
+            ...{ assistantMode: true },
+        },
+        contextOptions: {
+            ...pickDefined(base.browser?.contextOptions),
+            ...pickDefined(overrides.browser?.contextOptions),
+        },
+    };
+    if (browser.browserName !== "chromium" && browser.launchOptions)
+        delete browser.launchOptions.channel;
+    return {
+        ...pickDefined(base),
+        ...pickDefined(overrides),
+        browser,
+        network: {
+            ...pickDefined(base.network),
+            ...pickDefined(overrides.network),
+        },
+        server: {
+            ...pickDefined(base.server),
+            ...pickDefined(overrides.server),
+        },
+    };
+}
+export function semicolonSeparatedList(value) {
+    if (!value)
+        return undefined;
+    return value.split(";").map((v) => v.trim());
+}
+export function commaSeparatedList(value) {
+    if (!value)
+        return undefined;
+    return value.split(",").map((v) => v.trim());
+}
+function envToNumber(value) {
+    if (!value)
+        return undefined;
+    return +value;
+}
+function envToBoolean(value) {
+    if (value === "true" || value === "1")
+        return true;
+    if (value === "false" || value === "0")
+        return false;
+    return undefined;
+}
+function envToString(value) {
+    return value ? value.trim() : undefined;
+}

package/lib/context.js

@@ -0,0 +1,311 @@
+/**
+ * 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 debug from "debug";
+import { outputFile } from "./config.js";
+import { applyHooksToTools, hookRegistryMap } from "./hooks/core.js";
+import { createEventStore, setEventStore } from "./hooks/events.js";
+import { setupNetworkTracking } from "./hooks/networkSetup.js";
+import { buildHookRegistry } from "./hooks/registry.js";
+import { Tab } from "./tab.js";
+import { shouldBlockRequest } from "./utils/adBlockFilter.js";
+import * as codegen from "./utils/codegen.js";
+import { logUnhandledError } from "./utils/log.js";
+const testDebug = debug("pw:mcp:test");
+const protocolPattern = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//;
+const defaultPortForProtocol = (protocol) => {
+    if (protocol === "http:")
+        return "80";
+    if (protocol === "https:")
+        return "443";
+    return "";
+};
+const matchesOriginHost = (requestUrl, candidate) => {
+    const normalized = candidate.trim();
+    if (!normalized)
+        return false;
+    const hasProtocol = protocolPattern.test(normalized);
+    const parsed = (() => {
+        try {
+            return new URL(hasProtocol ? normalized : `http://${normalized}`);
+        }
+        catch {
+            return undefined;
+        }
+    })();
+    if (!parsed)
+        return false;
+    const candidateHost = parsed.hostname.toLowerCase().replace(/\.+$/, "");
+    if (!candidateHost)
+        return false;
+    const requestHost = requestUrl.hostname.toLowerCase();
+    if (requestHost !== candidateHost &&
+        !requestHost.endsWith(`.${candidateHost}`))
+        return false;
+    if (hasProtocol && parsed.protocol !== requestUrl.protocol)
+        return false;
+    if (parsed.port === "")
+        return true;
+    const candidatePort = parsed.port || defaultPortForProtocol(parsed.protocol);
+    if (!candidatePort)
+        return false;
+    const requestPort = requestUrl.port || defaultPortForProtocol(requestUrl.protocol);
+    return requestPort === candidatePort;
+};
+export class Context {
+    tools;
+    config;
+    sessionLog;
+    options;
+    _browserContextPromise;
+    _browserContextFactory;
+    _tabs = [];
+    _currentTab;
+    _clientInfo;
+    static _allContexts = new Set();
+    _closeBrowserContextPromise;
+    _isRunningTool = false;
+    _abortController = new AbortController();
+    constructor(options) {
+        // Set up hook registry and event store first
+        hookRegistryMap.set(this, buildHookRegistry());
+        setEventStore(this, createEventStore());
+        // Apply hooks to tools
+        this.tools = applyHooksToTools(options.tools, this);
+        this.config = options.config;
+        this.sessionLog = options.sessionLog;
+        this.options = options;
+        this._browserContextFactory = options.browserContextFactory;
+        this._clientInfo = options.clientInfo;
+        testDebug("create context");
+        Context._allContexts.add(this);
+    }
+    static async disposeAll() {
+        await Promise.all([...Context._allContexts].map((context) => context.dispose()));
+    }
+    tabs() {
+        return this._tabs;
+    }
+    currentTab() {
+        return this._currentTab;
+    }
+    currentTabOrDie() {
+        if (!this._currentTab)
+            throw new Error('No open pages available. Use the "browser_navigate" tool to navigate to a page first.');
+        return this._currentTab;
+    }
+    async newTab() {
+        const { browserContext } = await this._ensureBrowserContext();
+        const page = await browserContext.newPage();
+        this._currentTab = this._tabs.find((t) => t.page === page);
+        return this._currentTab;
+    }
+    async selectTab(index) {
+        const tab = this._tabs[index];
+        if (!tab)
+            throw new Error(`Tab ${index} not found`);
+        await tab.page.bringToFront();
+        this._currentTab = tab;
+        return tab;
+    }
+    async ensureTab() {
+        const { browserContext } = await this._ensureBrowserContext();
+        if (!this._currentTab)
+            await browserContext.newPage();
+        return this._currentTab;
+    }
+    async closeTab(index) {
+        const tab = index === undefined ? this._currentTab : this._tabs[index];
+        if (!tab)
+            throw new Error(`Tab ${index} not found`);
+        const url = tab.page.url();
+        await tab.page.close();
+        return url;
+    }
+    async outputFile(name) {
+        return outputFile(this.config, this._clientInfo.rootPath, name);
+    }
+    _onPageCreated(page) {
+        const tab = new Tab(this, page, (tab) => this._onPageClosed(tab));
+        this._tabs.push(tab);
+        if (!this._currentTab)
+            this._currentTab = tab;
+        // Set up network tracking via hooks system
+        setupNetworkTracking(this, page);
+    }
+    _onPageClosed(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)];
+        if (!this._tabs.length)
+            void this.closeBrowserContext();
+    }
+    async closeBrowserContext() {
+        if (!this._closeBrowserContextPromise)
+            this._closeBrowserContextPromise =
+                this._closeBrowserContextImpl().catch(logUnhandledError);
+        await this._closeBrowserContextPromise;
+        this._closeBrowserContextPromise = undefined;
+    }
+    isRunningTool() {
+        return this._isRunningTool;
+    }
+    setRunningTool(isRunningTool) {
+        this._isRunningTool = isRunningTool;
+    }
+    async _closeBrowserContextImpl() {
+        if (!this._browserContextPromise)
+            return;
+        testDebug("close context");
+        const promise = this._browserContextPromise;
+        this._browserContextPromise = undefined;
+        await promise.then(async ({ browserContext, close }) => {
+            if (this.config.saveTrace)
+                await browserContext.tracing.stop();
+            await close();
+        });
+    }
+    async dispose() {
+        this._abortController.abort("MCP context disposed");
+        await this.closeBrowserContext();
+        Context._allContexts.delete(this);
+    }
+    async _setupRequestInterception(context) {
+        await context.route("**", (route) => {
+            const request = route.request();
+            const url = request.url();
+            const resourceType = request.resourceType();
+            let urlObj;
+            try {
+                urlObj = new URL(url);
+            }
+            catch {
+                void route.continue();
+                return;
+            }
+            const domain = urlObj.hostname;
+            if (shouldBlockRequest(url, domain, resourceType)) {
+                void route.abort("blockedbyclient");
+                return;
+            }
+            if (this.config.network?.allowedOrigins?.length) {
+                const isAllowed = this.config.network.allowedOrigins.some((allowed) => matchesOriginHost(urlObj, allowed));
+                if (!isAllowed) {
+                    void route.abort("blockedbyclient");
+                    return;
+                }
+            }
+            if (this.config.network?.blockedOrigins?.length) {
+                const isBlocked = this.config.network.blockedOrigins.some((blocked) => matchesOriginHost(urlObj, blocked));
+                if (isBlocked) {
+                    void route.abort("blockedbyclient");
+                    return;
+                }
+            }
+            void route.continue();
+        });
+    }
+    _ensureBrowserContext() {
+        if (!this._browserContextPromise) {
+            this._browserContextPromise = this._setupBrowserContext();
+            this._browserContextPromise.catch(() => {
+                this._browserContextPromise = undefined;
+            });
+        }
+        return this._browserContextPromise;
+    }
+    async _setupBrowserContext() {
+        if (this._closeBrowserContextPromise)
+            throw new Error("Another browser context is being closed.");
+        // TODO: move to the browser context factory to make it based on isolation mode.
+        const result = await this._browserContextFactory.createContext(this._clientInfo, this._abortController.signal);
+        const { browserContext } = result;
+        await this._setupRequestInterception(browserContext);
+        if (this.sessionLog)
+            await InputRecorder.create(this, browserContext);
+        for (const page of browserContext.pages())
+            this._onPageCreated(page);
+        browserContext.on("page", (page) => this._onPageCreated(page));
+        if (this.config.saveTrace) {
+            await browserContext.tracing.start({
+                name: "trace",
+                screenshots: false,
+                snapshots: true,
+                sources: false,
+            });
+        }
+        return result;
+    }
+    lookupSecret(secretName) {
+        // if (!this.config.secrets?.[secretName])
+        return { value: secretName, code: codegen.quote(secretName) };
+        // return {
+        //   value: this.config.secrets[secretName]!,
+        //   code: `process.env['${secretName}']`,
+        // };
+    }
+}
+export class InputRecorder {
+    _context;
+    _browserContext;
+    constructor(context, browserContext) {
+        this._context = context;
+        this._browserContext = browserContext;
+    }
+    static async create(context, browserContext) {
+        const recorder = new InputRecorder(context, browserContext);
+        await recorder._initialize();
+        return recorder;
+    }
+    async _initialize() {
+        const sessionLog = this._context.sessionLog;
+        await this._browserContext._enableRecorder({
+            mode: "recording",
+            recorderMode: "api",
+        }, {
+            actionAdded: (page, data, code) => {
+                if (this._context.isRunningTool())
+                    return;
+                const tab = Tab.forPage(page);
+                if (tab)
+                    sessionLog.logUserAction(data.action, tab, code, false);
+            },
+            actionUpdated: (page, data, code) => {
+                if (this._context.isRunningTool())
+                    return;
+                const tab = Tab.forPage(page);
+                if (tab)
+                    sessionLog.logUserAction(data.action, tab, code, true);
+            },
+            signalAdded: (page, data) => {
+                if (this._context.isRunningTool())
+                    return;
+                if (data.signal.name !== "navigation")
+                    return;
+                const tab = Tab.forPage(page);
+                const navigateAction = {
+                    name: "navigate",
+                    url: data.signal.url,
+                    signals: [],
+                };
+                if (tab)
+                    sessionLog.logUserAction(navigateAction, tab, `await page.goto('${data.signal.url}');`, false);
+            },
+        });
+    }
+}