@szymonrybczak/playwright-mcp 0.0.2 → 0.0.5

package/lib/esm/src/context.js

@@ -0,0 +1,277 @@
+import debug from '../_virtual/browser.js';
+import { waitForCompletion, callOnPageNoTrace } from './tools/utils.js';
+import { ManualPromise } from './manualPromise.js';
+import { Tab } from './tab.js';
+import { outputFile } from './config.js';
+
+const testDebug = debug("pw:mcp:test");
+class Context {
+  tools;
+  config;
+  _browserContextPromise;
+  _browserContextFactory;
+  _tabs = [];
+  _currentTab;
+  _modalStates = [];
+  _pendingAction;
+  _downloads = [];
+  clientVersion;
+  constructor(tools, config, browserContextFactory) {
+    this.tools = tools;
+    this.config = config;
+    this._browserContextFactory = browserContextFactory;
+    testDebug("create context");
+  }
+  clientSupportsImages() {
+    if (this.config.imageResponses === "allow")
+      return true;
+    if (this.config.imageResponses === "omit")
+      return false;
+    return !this.clientVersion?.name.includes("cursor");
+  }
+  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"];
+    if (this._modalStates.length === 0)
+      result.push("- There is no modal state present");
+    for (const state of this._modalStates) {
+      const tool = this.tools.find((tool2) => tool2.clearsModalState === state.type);
+      result.push(`- [${state.description}]: can be handled by the "${tool?.schema.name}" tool`);
+    }
+    return result;
+  }
+  tabs() {
+    return this._tabs;
+  }
+  currentTabOrDie() {
+    if (!this._currentTab)
+      throw new Error("No current snapshot available. Capture a snapshot or navigate to a new location 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) {
+    this._currentTab = this._tabs[index - 1];
+    await this._currentTab.page.bringToFront();
+  }
+  async ensureTab() {
+    const { browserContext } = await this._ensureBrowserContext();
+    if (!this._currentTab)
+      await browserContext.newPage();
+    return this._currentTab;
+  }
+  async listTabsMarkdown() {
+    if (!this._tabs.length)
+      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.title();
+      const url = tab.page.url();
+      const current = tab === this._currentTab ? " (current)" : "";
+      lines.push(`- ${i + 1}:${current} [${title}] (${url})`);
+    }
+    return lines.join("\n");
+  }
+  async closeTab(index) {
+    const tab = index === void 0 ? this._currentTab : this._tabs[index - 1];
+    await tab?.page.close();
+    return await this.listTabsMarkdown();
+  }
+  async run(tool, params) {
+    const toolResult = await tool.handle(this, tool.schema.inputSchema.parse(params || {}));
+    const { code, action, waitForNetwork, captureSnapshot, resultOverride } = toolResult;
+    const racingAction = action ? () => this._raceAgainstModalDialogs(action) : void 0;
+    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();
+    let actionResult;
+    try {
+      if (waitForNetwork)
+        actionResult = await waitForCompletion(this, tab, async () => racingAction?.()) ?? void 0;
+      else
+        actionResult = await racingAction?.() ?? void 0;
+    } 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._downloads.length) {
+      result.push("", "### Downloads");
+      for (const entry of this._downloads) {
+        if (entry.finished)
+          result.push(`- Downloaded file ${entry.download.suggestedFilename()} to ${entry.outputFile}`);
+        else
+          result.push(`- Downloading file ${entry.download.suggestedFilename()} ...`);
+      }
+      result.push("");
+    }
+    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.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 new Promise((f) => setTimeout(f, time));
+      return;
+    }
+    await callOnPageNoTrace(this._currentTab.page, (page) => {
+      return page.evaluate(() => new Promise((f) => setTimeout(f, 1e3)));
+    });
+  }
+  async _raceAgainstModalDialogs(action) {
+    this._pendingAction = {
+      dialogShown: new ManualPromise()
+    };
+    let result;
+    try {
+      await Promise.race([
+        action().then((r) => result = r),
+        this._pendingAction.dialogShown
+      ]);
+    } finally {
+      this._pendingAction = void 0;
+    }
+    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();
+  }
+  async downloadStarted(tab, download) {
+    const entry = {
+      download,
+      finished: false,
+      outputFile: await outputFile(this.config, download.suggestedFilename())
+    };
+    this._downloads.push(entry);
+    await download.saveAs(entry.outputFile);
+    entry.finished = true;
+  }
+  _onPageCreated(page) {
+    const tab = new Tab(this, page, (tab2) => this._onPageClosed(tab2));
+    this._tabs.push(tab);
+    if (!this._currentTab)
+      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)];
+    if (!this._tabs.length)
+      void this.close();
+  }
+  async close() {
+    if (!this._browserContextPromise)
+      return;
+    testDebug("close context");
+    const promise = this._browserContextPromise;
+    this._browserContextPromise = void 0;
+    await promise.then(async ({ browserContext, close }) => {
+      if (this.config.saveTrace)
+        await browserContext.tracing.stop();
+      await close();
+    });
+  }
+  async _setupRequestInterception(context) {
+    if (this.config.network?.allowedOrigins?.length) {
+      await context.route("**", (route) => route.abort("blockedbyclient"));
+      for (const origin of this.config.network.allowedOrigins)
+        await context.route(`*://${origin}/**`, (route) => route.continue());
+    }
+    if (this.config.network?.blockedOrigins?.length) {
+      for (const origin of this.config.network.blockedOrigins)
+        await context.route(`*://${origin}/**`, (route) => route.abort("blockedbyclient"));
+    }
+  }
+  _ensureBrowserContext() {
+    if (!this._browserContextPromise) {
+      this._browserContextPromise = this._setupBrowserContext();
+      this._browserContextPromise.catch(() => {
+        this._browserContextPromise = void 0;
+      });
+    }
+    return this._browserContextPromise;
+  }
+  async _setupBrowserContext() {
+    const result = await this._browserContextFactory.createContext();
+    const { browserContext } = result;
+    await this._setupRequestInterception(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;
+  }
+}
+
+export { Context };

package/lib/esm/src/fileUtils.js

@@ -0,0 +1,20 @@
+import os from 'node:os';
+import path from 'node:path';
+
+function cacheDir() {
+  let cacheDirectory;
+  if (process.platform === "linux")
+    cacheDirectory = process.env.XDG_CACHE_HOME || path.join(os.homedir(), ".cache");
+  else if (process.platform === "darwin")
+    cacheDirectory = path.join(os.homedir(), "Library", "Caches");
+  else if (process.platform === "win32")
+    cacheDirectory = process.env.LOCALAPPDATA || path.join(os.homedir(), "AppData", "Local");
+  else
+    throw new Error("Unsupported platform: " + process.platform);
+  return path.join(cacheDirectory, "ms-playwright");
+}
+async function userDataDir(browserConfig) {
+  return path.join(cacheDir(), "ms-playwright", `mcp-${browserConfig.launchOptions?.channel ?? browserConfig?.browserName}-profile`);
+}
+
+export { cacheDir, userDataDir };

package/lib/esm/src/index.js

@@ -0,0 +1,11 @@
+import { createConnection as createConnection$1 } from './connection.js';
+import { resolveConfig } from './config.js';
+import { contextFactory } from './browserContextFactory.js';
+
+async function createConnection(userConfig = {}, contextGetter) {
+  const config = await resolveConfig(userConfig);
+  const factory = contextFactory(config.browser);
+  return createConnection$1(config, factory);
+}
+
+export { createConnection };

package/lib/esm/src/javascript.js

@@ -0,0 +1,35 @@
+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] !== void 0).sort();
+    if (!keys.length)
+      return "{}";
+    const tokens = [];
+    for (const key of keys)
+      tokens.push(`${key}: ${formatObject(value[key])}`);
+    return `{
+${indent}${tokens.join(`,
+${indent}`)}
+}`;
+  }
+  return String(value);
+}
+
+export { escapeWithQuotes, formatObject, quote };

package/lib/esm/src/manualPromise.js

@@ -0,0 +1,35 @@
+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";
+  }
+}
+
+export { ManualPromise };

package/lib/esm/src/pageSnapshot.js

@@ -0,0 +1,31 @@
+import { callOnPageNoTrace } from './tools/utils.js';
+
+class PageSnapshot {
+  _page;
+  _text;
+  constructor(page) {
+    this._page = page;
+  }
+  static async create(page) {
+    const snapshot = new PageSnapshot(page);
+    await snapshot._build();
+    return snapshot;
+  }
+  text() {
+    return this._text;
+  }
+  async _build() {
+    const snapshot = await callOnPageNoTrace(this._page, (page) => page._snapshotForAI());
+    this._text = [
+      `- Page Snapshot`,
+      "```yaml",
+      snapshot,
+      "```"
+    ].join("\n");
+  }
+  refLocator(params) {
+    return this._page.locator(`aria-ref=${params.ref}`).describe(params.element);
+  }
+}
+
+export { PageSnapshot };

package/lib/esm/src/tab.js

@@ -0,0 +1,87 @@
+import { PageSnapshot } from './pageSnapshot.js';
+import { callOnPageNoTrace } from './tools/utils.js';
+
+class Tab {
+  context;
+  page;
+  _consoleMessages = [];
+  _requests = /* @__PURE__ */ new Map();
+  _snapshot;
+  _onPageClose;
+  constructor(context, page, onPageClose) {
+    this.context = context;
+    this.page = page;
+    this._onPageClose = onPageClose;
+    page.on("console", (event) => this._consoleMessages.push(event));
+    page.on("request", (request) => this._requests.set(request, null));
+    page.on("response", (response) => this._requests.set(response.request(), response));
+    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.on("download", (download) => {
+      void this.context.downloadStarted(this, download);
+    });
+    page.setDefaultNavigationTimeout(6e4);
+    page.setDefaultTimeout(5e3);
+  }
+  _clearCollectedArtifacts() {
+    this._consoleMessages.length = 0;
+    this._requests.clear();
+  }
+  _onClose() {
+    this._clearCollectedArtifacts();
+    this._onPageClose(this);
+  }
+  async title() {
+    return await callOnPageNoTrace(this.page, (page) => page.title());
+  }
+  async waitForLoadState(state, options) {
+    await callOnPageNoTrace(this.page, (page) => page.waitForLoadState(state, options).catch(() => {
+    }));
+  }
+  async navigate(url) {
+    this._clearCollectedArtifacts();
+    const downloadEvent = callOnPageNoTrace(this.page, (page) => page.waitForEvent("download").catch(() => {
+    }));
+    try {
+      await this.page.goto(url, { waitUntil: "domcontentloaded" });
+    } catch (_e) {
+      const e = _e;
+      const mightBeDownload = e.message.includes("net::ERR_ABORTED") || e.message.includes("Download is starting");
+      if (!mightBeDownload)
+        throw e;
+      const download = await Promise.race([
+        downloadEvent,
+        new Promise((resolve) => setTimeout(resolve, 1e3))
+      ]);
+      if (!download)
+        throw e;
+    }
+    await this.waitForLoadState("load", { timeout: 5e3 });
+  }
+  hasSnapshot() {
+    return !!this._snapshot;
+  }
+  snapshotOrDie() {
+    if (!this._snapshot)
+      throw new Error("No snapshot available");
+    return this._snapshot;
+  }
+  consoleMessages() {
+    return this._consoleMessages;
+  }
+  requests() {
+    return this._requests;
+  }
+  async captureSnapshot() {
+    this._snapshot = await PageSnapshot.create(this.page);
+  }
+}
+
+export { Tab };

package/lib/esm/src/tools/common.js

@@ -0,0 +1,56 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const close = defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_close",
+    title: "Close browser",
+    description: "Close the page",
+    inputSchema: z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    await context.close();
+    return {
+      code: [`await page.close()`],
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const resize = (captureSnapshot) => defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_resize",
+    title: "Resize browser window",
+    description: "Resize the browser window",
+    inputSchema: z.object({
+      width: z.coerce.number().describe("Width of the browser window"),
+      height: z.coerce.number().describe("Height of the browser window")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Resize browser window to ${params.width}x${params.height}`,
+      `await page.setViewportSize({ width: ${params.width}, height: ${params.height} });`
+    ];
+    const action = async () => {
+      await tab.page.setViewportSize({ width: params.width, height: params.height });
+    };
+    return {
+      code,
+      action,
+      captureSnapshot,
+      waitForNetwork: true
+    };
+  }
+});
+const common = (captureSnapshot) => [
+  close,
+  resize(captureSnapshot)
+];
+
+export { common as default };

package/lib/esm/src/tools/console.js

@@ -0,0 +1,32 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const console = defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_console_messages",
+    title: "Get console messages",
+    description: "Returns all console messages",
+    inputSchema: z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    const messages = context.currentTabOrDie().consoleMessages();
+    const log = messages.map((message) => `[${message.type().toUpperCase()}] ${message.text()}`).join("\n");
+    return {
+      code: [`// <internal code to get console messages>`],
+      action: async () => {
+        return {
+          content: [{ type: "text", text: log }]
+        };
+      },
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const console$1 = [
+  console
+];
+
+export { console$1 as default };

package/lib/esm/src/tools/dialogs.js

@@ -0,0 +1,40 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const handleDialog = (captureSnapshot) => defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_handle_dialog",
+    title: "Handle a dialog",
+    description: "Handle a dialog",
+    inputSchema: z.object({
+      accept: z.coerce.boolean().describe("Whether to accept the dialog."),
+      promptText: z.string().optional().describe("The text of the prompt in case of a prompt dialog.")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const dialogState = context.modalStates().find((state) => state.type === "dialog");
+    if (!dialogState)
+      throw new Error("No dialog visible");
+    if (params.accept)
+      await dialogState.dialog.accept(params.promptText);
+    else
+      await dialogState.dialog.dismiss();
+    context.clearModalState(dialogState);
+    const code = [
+      `// <internal code to handle "${dialogState.dialog.type()}" dialog>`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  },
+  clearsModalState: "dialog"
+});
+const dialogs = (captureSnapshot) => [
+  handleDialog(captureSnapshot)
+];
+
+export { dialogs as default };

package/lib/esm/src/tools/files.js

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const uploadFile = (captureSnapshot) => defineTool({
+  capability: "files",
+  schema: {
+    name: "browser_file_upload",
+    title: "Upload files",
+    description: "Upload one or multiple files",
+    inputSchema: z.object({
+      paths: z.array(z.string()).describe("The absolute paths to the files to upload. Can be a single file or multiple files.")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const modalState = context.modalStates().find((state) => state.type === "fileChooser");
+    if (!modalState)
+      throw new Error("No file chooser visible");
+    const code = [
+      `// <internal code to chose files ${params.paths.join(", ")}`
+    ];
+    const action = async () => {
+      await modalState.fileChooser.setFiles(params.paths);
+      context.clearModalState(modalState);
+    };
+    return {
+      code,
+      action,
+      captureSnapshot,
+      waitForNetwork: true
+    };
+  },
+  clearsModalState: "fileChooser"
+});
+const files = (captureSnapshot) => [
+  uploadFile(captureSnapshot)
+];
+
+export { files as default };