@pedropaulovc/playwright 1.59.0-next

package/lib/mcp/browser/tools/snapshot.js

@@ -0,0 +1,205 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var snapshot_exports = {};
+__export(snapshot_exports, {
+  default: () => snapshot_default,
+  elementSchema: () => elementSchema
+});
+module.exports = __toCommonJS(snapshot_exports);
+var import_mcpBundle = require("playwright-core/lib/mcpBundle");
+var import_utils = require("playwright-core/lib/utils");
+var import_tool = require("./tool");
+const snapshot = (0, import_tool.defineTool)({
+  capability: "core",
+  schema: {
+    name: "browser_snapshot",
+    title: "Page snapshot",
+    description: "Capture accessibility snapshot of the current page, this is better than screenshot",
+    inputSchema: import_mcpBundle.z.object({
+      filename: import_mcpBundle.z.string().optional().describe("Save snapshot to markdown file instead of returning it in the response.")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params, response) => {
+    await context.ensureTab();
+    response.setIncludeFullSnapshot(params.filename);
+  }
+});
+const elementSchema = import_mcpBundle.z.object({
+  element: import_mcpBundle.z.string().optional().describe("Human-readable element description used to obtain permission to interact with the element"),
+  ref: import_mcpBundle.z.string().describe("Exact target element reference from the page snapshot")
+});
+const clickSchema = elementSchema.extend({
+  doubleClick: import_mcpBundle.z.boolean().optional().describe("Whether to perform a double click instead of a single click"),
+  button: import_mcpBundle.z.enum(["left", "right", "middle"]).optional().describe("Button to click, defaults to left"),
+  modifiers: import_mcpBundle.z.array(import_mcpBundle.z.enum(["Alt", "Control", "ControlOrMeta", "Meta", "Shift"])).optional().describe("Modifier keys to press")
+});
+const click = (0, import_tool.defineTabTool)({
+  capability: "core",
+  schema: {
+    name: "browser_click",
+    title: "Click",
+    description: "Perform click on a web page",
+    inputSchema: clickSchema,
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    const { locator, resolved } = await tab.refLocator(params);
+    const options = {
+      button: params.button,
+      modifiers: params.modifiers
+    };
+    const formatted = (0, import_utils.formatObject)(options, " ", "oneline");
+    const optionsAttr = formatted !== "{}" ? formatted : "";
+    if (params.doubleClick)
+      response.addCode(`await page.${resolved}.dblclick(${optionsAttr});`);
+    else
+      response.addCode(`await page.${resolved}.click(${optionsAttr});`);
+    await tab.waitForCompletion(async () => {
+      if (params.doubleClick)
+        await locator.dblclick(options);
+      else
+        await locator.click(options);
+    });
+  }
+});
+const drag = (0, import_tool.defineTabTool)({
+  capability: "core",
+  schema: {
+    name: "browser_drag",
+    title: "Drag mouse",
+    description: "Perform drag and drop between two elements",
+    inputSchema: import_mcpBundle.z.object({
+      startElement: import_mcpBundle.z.string().describe("Human-readable source element description used to obtain the permission to interact with the element"),
+      startRef: import_mcpBundle.z.string().describe("Exact source element reference from the page snapshot"),
+      endElement: import_mcpBundle.z.string().describe("Human-readable target element description used to obtain the permission to interact with the element"),
+      endRef: import_mcpBundle.z.string().describe("Exact target element reference from the page snapshot")
+    }),
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    const [start, end] = await tab.refLocators([
+      { ref: params.startRef, element: params.startElement },
+      { ref: params.endRef, element: params.endElement }
+    ]);
+    await tab.waitForCompletion(async () => {
+      await start.locator.dragTo(end.locator);
+    });
+    response.addCode(`await page.${start.resolved}.dragTo(page.${end.resolved});`);
+  }
+});
+const hover = (0, import_tool.defineTabTool)({
+  capability: "core",
+  schema: {
+    name: "browser_hover",
+    title: "Hover mouse",
+    description: "Hover over element on page",
+    inputSchema: elementSchema,
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    const { locator, resolved } = await tab.refLocator(params);
+    response.addCode(`await page.${resolved}.hover();`);
+    await tab.waitForCompletion(async () => {
+      await locator.hover();
+    });
+  }
+});
+const selectOptionSchema = elementSchema.extend({
+  values: import_mcpBundle.z.array(import_mcpBundle.z.string()).describe("Array of values to select in the dropdown. This can be a single value or multiple values.")
+});
+const selectOption = (0, import_tool.defineTabTool)({
+  capability: "core",
+  schema: {
+    name: "browser_select_option",
+    title: "Select option",
+    description: "Select an option in a dropdown",
+    inputSchema: selectOptionSchema,
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    const { locator, resolved } = await tab.refLocator(params);
+    response.addCode(`await page.${resolved}.selectOption(${(0, import_utils.formatObject)(params.values)});`);
+    await tab.waitForCompletion(async () => {
+      await locator.selectOption(params.values);
+    });
+  }
+});
+const pickLocator = (0, import_tool.defineTabTool)({
+  capability: "testing",
+  schema: {
+    name: "browser_generate_locator",
+    title: "Create locator for element",
+    description: "Generate locator for the given element to use in tests",
+    inputSchema: elementSchema,
+    type: "readOnly"
+  },
+  handle: async (tab, params, response) => {
+    const { resolved } = await tab.refLocator(params);
+    response.addTextResult(resolved);
+  }
+});
+const check = (0, import_tool.defineTabTool)({
+  capability: "core-input",
+  skillOnly: true,
+  schema: {
+    name: "browser_check",
+    title: "Check",
+    description: "Check a checkbox or radio button",
+    inputSchema: elementSchema,
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    const { resolved } = await tab.refLocator(params);
+    response.addCode(`await page.${resolved}.check();`);
+  }
+});
+const uncheck = (0, import_tool.defineTabTool)({
+  capability: "core-input",
+  skillOnly: true,
+  schema: {
+    name: "browser_uncheck",
+    title: "Uncheck",
+    description: "Uncheck a checkbox or radio button",
+    inputSchema: elementSchema,
+    type: "input"
+  },
+  handle: async (tab, params, response) => {
+    const { resolved } = await tab.refLocator(params);
+    response.addCode(`await page.${resolved}.uncheck();`);
+  }
+});
+var snapshot_default = [
+  snapshot,
+  click,
+  drag,
+  hover,
+  selectOption,
+  pickLocator,
+  check,
+  uncheck
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  elementSchema
+});

package/lib/mcp/browser/tools/snapshotViewport.js

@@ -0,0 +1,63 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var snapshotViewport_exports = {};
+__export(snapshotViewport_exports, {
+  default: () => snapshotViewport_default
+});
+module.exports = __toCommonJS(snapshotViewport_exports);
+var import_fs = __toESM(require("fs"));
+var import_mcpBundle = require("playwright-core/lib/mcpBundle");
+var import_tool = require("./tool");
+const snapshotViewport = (0, import_tool.defineTool)({
+  capability: "core",
+  schema: {
+    name: "browser_snapshot_viewport",
+    title: "Viewport snapshot",
+    description: "Capture accessibility snapshot of only what is visible in the current viewport",
+    inputSchema: import_mcpBundle.z.object({
+      filename: import_mcpBundle.z.string().optional().describe("Save snapshot to markdown file instead of returning it in the response.")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params, response) => {
+    const tab = await context.ensureTab();
+    const snapshotResult = await tab.page._snapshotForAI({ track: "response", viewportOnly: true });
+    const viewportSnapshot = snapshotResult.full;
+    if (params.filename) {
+      const fileName = await response.addFile(params.filename, { origin: "llm", reason: "Saved viewport snapshot" });
+      await import_fs.default.promises.writeFile(fileName, viewportSnapshot);
+      response.setIncludeMetaOnly();
+    } else {
+      response.addResult(viewportSnapshot);
+    }
+  }
+});
+var snapshotViewport_default = [
+  snapshotViewport
+];

package/lib/mcp/browser/tools/tabs.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabs_exports = {};
+__export(tabs_exports, {
+  default: () => tabs_default
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_mcpBundle = require("playwright-core/lib/mcpBundle");
+var import_tool = require("./tool");
+var import_response = require("../response");
+const browserTabs = (0, import_tool.defineTool)({
+  capability: "core-tabs",
+  schema: {
+    name: "browser_tabs",
+    title: "Manage tabs",
+    description: "List, create, close, or select a browser tab.",
+    inputSchema: import_mcpBundle.z.object({
+      action: import_mcpBundle.z.enum(["list", "new", "close", "select"]).describe("Operation to perform"),
+      index: import_mcpBundle.z.number().optional().describe("Tab index, used for close/select. If omitted for close, current tab is closed.")
+    }),
+    type: "action"
+  },
+  handle: async (context, params, response) => {
+    switch (params.action) {
+      case "list": {
+        await context.ensureTab();
+        break;
+      }
+      case "new": {
+        await context.newTab();
+        break;
+      }
+      case "close": {
+        await context.closeTab(params.index);
+        break;
+      }
+      case "select": {
+        if (params.index === void 0)
+          throw new Error("Tab index is required");
+        await context.selectTab(params.index);
+        break;
+      }
+    }
+    const tabHeaders = await Promise.all(context.tabs().map((tab) => tab.headerSnapshot()));
+    const result = (0, import_response.renderTabsMarkdown)(tabHeaders);
+    response.addTextResult(result.join("\n"));
+  }
+});
+var tabs_default = [
+  browserTabs
+];

package/lib/mcp/browser/tools/tool.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tool_exports = {};
+__export(tool_exports, {
+  defineTabTool: () => defineTabTool,
+  defineTool: () => defineTool
+});
+module.exports = __toCommonJS(tool_exports);
+function defineTool(tool) {
+  return tool;
+}
+function defineTabTool(tool) {
+  return {
+    ...tool,
+    handle: async (context, params, response) => {
+      const tab = await context.ensureTab();
+      const modalStates = tab.modalStates().map((state) => state.type);
+      if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState))
+        response.addError(`Error: The tool "${tool.schema.name}" can only be used when there is related modal state present.`);
+      else if (!tool.clearsModalState && modalStates.length)
+        response.addError(`Error: Tool "${tool.schema.name}" does not handle the modal state.`);
+      else
+        return tool.handle(tab, params, response);
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineTabTool,
+  defineTool
+});

package/lib/mcp/browser/tools/tracing.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tracing_exports = {};
+__export(tracing_exports, {
+  default: () => tracing_default
+});
+module.exports = __toCommonJS(tracing_exports);
+var import_mcpBundle = require("playwright-core/lib/mcpBundle");
+var import_tool = require("./tool");
+const tracingStart = (0, import_tool.defineTool)({
+  capability: "tracing",
+  schema: {
+    name: "browser_start_tracing",
+    title: "Start tracing",
+    description: "Start trace recording",
+    inputSchema: import_mcpBundle.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context, params, response) => {
+    const browserContext = await context.ensureBrowserContext();
+    const tracesDir = await context.outputFile(`traces`, { origin: "code", title: "Collecting trace" });
+    const name = "trace-" + Date.now();
+    await browserContext.tracing.start({
+      name,
+      screenshots: true,
+      snapshots: true,
+      _live: true
+    });
+    const traceLegend = `- Action log: ${tracesDir}/${name}.trace
+- Network log: ${tracesDir}/${name}.network
+- Resources with content by sha1: ${tracesDir}/resources`;
+    response.addTextResult(`Tracing started, saving to ${tracesDir}.
+${traceLegend}`);
+    browserContext.tracing[traceLegendSymbol] = traceLegend;
+  }
+});
+const tracingStop = (0, import_tool.defineTool)({
+  capability: "tracing",
+  schema: {
+    name: "browser_stop_tracing",
+    title: "Stop tracing",
+    description: "Stop trace recording",
+    inputSchema: import_mcpBundle.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context, params, response) => {
+    const browserContext = await context.ensureBrowserContext();
+    await browserContext.tracing.stop();
+    const traceLegend = browserContext.tracing[traceLegendSymbol];
+    response.addTextResult(`Tracing stopped.
+${traceLegend}`);
+  }
+});
+var tracing_default = [
+  tracingStart,
+  tracingStop
+];
+const traceLegendSymbol = Symbol("tracesDir");

package/lib/mcp/browser/tools/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  callOnPageNoTrace: () => callOnPageNoTrace,
+  dateAsFileName: () => dateAsFileName,
+  eventWaiter: () => eventWaiter,
+  waitForCompletion: () => waitForCompletion
+});
+module.exports = __toCommonJS(utils_exports);
+async function waitForCompletion(tab, callback) {
+  const requests = [];
+  const requestListener = (request) => requests.push(request);
+  const disposeListeners = () => {
+    tab.page.off("request", requestListener);
+  };
+  tab.page.on("request", requestListener);
+  let result;
+  try {
+    result = await callback();
+    await tab.waitForTimeout(500);
+  } finally {
+    disposeListeners();
+  }
+  const requestedNavigation = requests.some((request) => request.isNavigationRequest());
+  if (requestedNavigation) {
+    await tab.page.mainFrame().waitForLoadState("load", { timeout: 1e4 }).catch(() => {
+    });
+    return result;
+  }
+  const promises = [];
+  for (const request of requests) {
+    if (["document", "stylesheet", "script", "xhr", "fetch"].includes(request.resourceType()))
+      promises.push(request.response().then((r) => r?.finished()).catch(() => {
+      }));
+    else
+      promises.push(request.response().catch(() => {
+      }));
+  }
+  const timeout = new Promise((resolve) => setTimeout(resolve, 5e3));
+  await Promise.race([Promise.all(promises), timeout]);
+  if (requests.length)
+    await tab.waitForTimeout(500);
+  return result;
+}
+async function callOnPageNoTrace(page, callback) {
+  return await page._wrapApiCall(() => callback(page), { internal: true });
+}
+function dateAsFileName(extension) {
+  const date = /* @__PURE__ */ new Date();
+  return `page-${date.toISOString().replace(/[:.]/g, "-")}.${extension}`;
+}
+function eventWaiter(page, event, timeout) {
+  const disposables = [];
+  const eventPromise = new Promise((resolve, reject) => {
+    page.on(event, resolve);
+    disposables.push(() => page.off(event, resolve));
+  });
+  let abort;
+  const abortPromise = new Promise((resolve, reject) => {
+    abort = () => resolve(void 0);
+  });
+  const timeoutPromise = new Promise((f) => {
+    const timeoutId = setTimeout(() => f(void 0), timeout);
+    disposables.push(() => clearTimeout(timeoutId));
+  });
+  return {
+    promise: Promise.race([eventPromise, abortPromise, timeoutPromise]).finally(() => disposables.forEach((dispose) => dispose())),
+    abort
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  callOnPageNoTrace,
+  dateAsFileName,
+  eventWaiter,
+  waitForCompletion
+});