@szymonrybczak/playwright-mcp 0.0.2 → 0.0.5

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const uploadFile = (captureSnapshot) => tool.defineTool({
+  capability: "files",
+  schema: {
+    name: "browser_file_upload",
+    title: "Upload files",
+    description: "Upload one or multiple files",
+    inputSchema: zod.z.object({
+      paths: zod.z.array(zod.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)
+];
+
+exports.default = files;

package/lib/cjs/src/tools/install.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const node_child_process = require('node:child_process');
+const path = require('node:path');
+const zod = require('zod');
+const tool = require('./tool.js');
+const node_url = require('node:url');
+
+const install = tool.defineTool({
+  capability: "install",
+  schema: {
+    name: "browser_install",
+    title: "Install the browser specified in the config",
+    description: "Install the browser specified in the config. Call this if you get an error about the browser not being installed.",
+    inputSchema: zod.z.object({}),
+    type: "destructive"
+  },
+  handle: async (context) => {
+    const channel = context.config.browser?.launchOptions?.channel ?? context.config.browser?.browserName ?? "chrome";
+    const cliUrl = undefined("@szymonrybczak/patchright/package.json");
+    const cliPath = path.join(node_url.fileURLToPath(cliUrl), "..", "cli.js");
+    const child = node_child_process.fork(cliPath, ["install", channel], {
+      stdio: "pipe"
+    });
+    const output = [];
+    child.stdout?.on("data", (data) => output.push(data.toString()));
+    child.stderr?.on("data", (data) => output.push(data.toString()));
+    await new Promise((resolve, reject) => {
+      child.on("close", (code) => {
+        if (code === 0)
+          resolve();
+        else
+          reject(new Error(`Failed to install browser: ${output.join("")}`));
+      });
+    });
+    return {
+      code: [`// Browser ${channel} installed`],
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const install$1 = [
+  install
+];
+
+exports.default = install$1;

package/lib/cjs/src/tools/keyboard.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const pressKey = (captureSnapshot) => tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_press_key",
+    title: "Press a key",
+    description: "Press a key on the keyboard",
+    inputSchema: zod.z.object({
+      key: zod.z.string().describe("Name of the key to press or a character to generate, such as `ArrowLeft` or `a`")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Press ${params.key}`,
+      `await page.keyboard.press('${params.key}');`
+    ];
+    const action = () => tab.page.keyboard.press(params.key);
+    return {
+      code,
+      action,
+      captureSnapshot,
+      waitForNetwork: true
+    };
+  }
+});
+const keyboard = (captureSnapshot) => [
+  pressKey(captureSnapshot)
+];
+
+exports.default = keyboard;

package/lib/cjs/src/tools/navigate.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const navigate = (captureSnapshot) => tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_navigate",
+    title: "Navigate to a URL",
+    description: "Navigate to a URL",
+    inputSchema: zod.z.object({
+      url: zod.z.string().describe("The URL to navigate to")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = await context.ensureTab();
+    await tab.navigate(params.url);
+    const code = [
+      `// Navigate to ${params.url}`,
+      `await page.goto('${params.url}');`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const goBack = (captureSnapshot) => tool.defineTool({
+  capability: "history",
+  schema: {
+    name: "browser_navigate_back",
+    title: "Go back",
+    description: "Go back to the previous page",
+    inputSchema: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    const tab = await context.ensureTab();
+    await tab.page.goBack();
+    const code = [
+      `// Navigate back`,
+      `await page.goBack();`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const goForward = (captureSnapshot) => tool.defineTool({
+  capability: "history",
+  schema: {
+    name: "browser_navigate_forward",
+    title: "Go forward",
+    description: "Go forward to the next page",
+    inputSchema: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    const tab = context.currentTabOrDie();
+    await tab.page.goForward();
+    const code = [
+      `// Navigate forward`,
+      `await page.goForward();`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const navigate$1 = (captureSnapshot) => [
+  navigate(captureSnapshot),
+  goBack(captureSnapshot),
+  goForward(captureSnapshot)
+];
+
+exports.default = navigate$1;

package/lib/cjs/src/tools/network.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const requests = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_network_requests",
+    title: "List network requests",
+    description: "Returns all network requests since loading the page",
+    inputSchema: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    const requests2 = context.currentTabOrDie().requests();
+    const log = [...requests2.entries()].map(([request, response]) => renderRequest(request, response)).join("\n");
+    return {
+      code: [`// <internal code to list network requests>`],
+      action: async () => {
+        return {
+          content: [{ type: "text", text: log }]
+        };
+      },
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+function renderRequest(request, response) {
+  const result = [];
+  result.push(`[${request.method().toUpperCase()}] ${request.url()}`);
+  if (response)
+    result.push(`=> [${response.status()}] ${response.statusText()}`);
+  return result.join(" ");
+}
+const network = [
+  requests
+];
+
+exports.default = network;

package/lib/cjs/src/tools/pdf.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+const javascript = require('../javascript.js');
+const config = require('../config.js');
+
+const pdfSchema = zod.z.object({
+  filename: zod.z.string().optional().describe("File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.")
+});
+const pdf = tool.defineTool({
+  capability: "pdf",
+  schema: {
+    name: "browser_pdf_save",
+    title: "Save as PDF",
+    description: "Save page as PDF",
+    inputSchema: pdfSchema,
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const fileName = await config.outputFile(context.config, params.filename ?? `page-${(/* @__PURE__ */ new Date()).toISOString()}.pdf`);
+    const code = [
+      `// Save page as ${fileName}`,
+      `await page.pdf(${javascript.formatObject({ path: fileName })});`
+    ];
+    return {
+      code,
+      action: async () => tab.page.pdf({ path: fileName }).then(() => {
+      }),
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const pdf$1 = [
+  pdf
+];
+
+exports.default = pdf$1;

package/lib/cjs/src/tools/screenshot.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+const javascript = require('../javascript.js');
+const config = require('../config.js');
+const utils = require('./utils.js');
+
+const screenshotSchema = zod.z.object({
+  raw: zod.z.coerce.boolean().optional().describe("Whether to return without compression (in PNG format). Default is false, which returns a JPEG image."),
+  filename: zod.z.string().optional().describe("File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified."),
+  element: zod.z.string().optional().describe("Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too."),
+  ref: zod.z.string().optional().describe("Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.")
+}).refine((data) => {
+  return !!data.element === !!data.ref;
+}, {
+  message: "Both element and ref must be provided or neither.",
+  path: ["ref", "element"]
+});
+const screenshot = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_take_screenshot",
+    title: "Take a screenshot",
+    description: `Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.`,
+    inputSchema: screenshotSchema,
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const snapshot = tab.snapshotOrDie();
+    const fileType = params.raw ? "png" : "jpeg";
+    const fileName = await config.outputFile(context.config, params.filename ?? `page-${(/* @__PURE__ */ new Date()).toISOString()}.${fileType}`);
+    const options = { type: fileType, quality: fileType === "png" ? void 0 : 50, scale: "css", path: fileName };
+    const isElementScreenshot = params.element && params.ref;
+    const code = [
+      `// Screenshot ${isElementScreenshot ? params.element : "viewport"} and save it as ${fileName}`
+    ];
+    const locator = params.ref ? snapshot.refLocator({ element: params.element || "", ref: params.ref }) : null;
+    if (locator)
+      code.push(`await page.${await utils.generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
+    else
+      code.push(`await page.screenshot(${javascript.formatObject(options)});`);
+    const includeBase64 = context.clientSupportsImages();
+    const action = async () => {
+      const screenshot2 = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
+      return {
+        content: includeBase64 ? [{
+          type: "image",
+          data: screenshot2.toString("base64"),
+          mimeType: fileType === "png" ? "image/png" : "image/jpeg"
+        }] : []
+      };
+    };
+    return {
+      code,
+      action,
+      captureSnapshot: true,
+      waitForNetwork: false
+    };
+  }
+});
+const screenshot$1 = [
+  screenshot
+];
+
+exports.default = screenshot$1;

package/lib/cjs/src/tools/snapshot.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+const javascript = require('../javascript.js');
+const utils = require('./utils.js');
+
+const snapshot = 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: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    await context.ensureTab();
+    return {
+      code: [`// <internal code to capture accessibility snapshot>`],
+      captureSnapshot: true,
+      waitForNetwork: false
+    };
+  }
+});
+const elementSchema = zod.z.object({
+  element: zod.z.string().describe("Human-readable element description used to obtain permission to interact with the element"),
+  ref: zod.z.string().describe("Exact target element reference from the page snapshot")
+});
+const clickSchema = elementSchema.extend({
+  doubleClick: zod.z.coerce.boolean().optional().describe("Whether to perform a double click instead of a single click")
+});
+const click = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_click",
+    title: "Click",
+    description: "Perform click on a web page",
+    inputSchema: clickSchema,
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const locator = tab.snapshotOrDie().refLocator(params);
+    const code = [];
+    if (params.doubleClick) {
+      code.push(`// Double click ${params.element}`);
+      code.push(`await page.${await utils.generateLocator(locator)}.dblclick();`);
+    } else {
+      code.push(`// Click ${params.element}`);
+      code.push(`await page.${await utils.generateLocator(locator)}.click();`);
+    }
+    return {
+      code,
+      action: () => params.doubleClick ? locator.dblclick() : locator.click(),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const drag = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_drag",
+    title: "Drag mouse",
+    description: "Perform drag and drop between two elements",
+    inputSchema: zod.z.object({
+      startElement: zod.z.string().describe("Human-readable source element description used to obtain the permission to interact with the element"),
+      startRef: zod.z.string().describe("Exact source element reference from the page snapshot"),
+      endElement: zod.z.string().describe("Human-readable target element description used to obtain the permission to interact with the element"),
+      endRef: zod.z.string().describe("Exact target element reference from the page snapshot")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const snapshot2 = context.currentTabOrDie().snapshotOrDie();
+    const startLocator = snapshot2.refLocator({ ref: params.startRef, element: params.startElement });
+    const endLocator = snapshot2.refLocator({ ref: params.endRef, element: params.endElement });
+    const code = [
+      `// Drag ${params.startElement} to ${params.endElement}`,
+      `await page.${await utils.generateLocator(startLocator)}.dragTo(page.${await utils.generateLocator(endLocator)});`
+    ];
+    return {
+      code,
+      action: () => startLocator.dragTo(endLocator),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const hover = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_hover",
+    title: "Hover mouse",
+    description: "Hover over element on page",
+    inputSchema: elementSchema,
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    const snapshot2 = context.currentTabOrDie().snapshotOrDie();
+    const locator = snapshot2.refLocator(params);
+    const code = [
+      `// Hover over ${params.element}`,
+      `await page.${await utils.generateLocator(locator)}.hover();`
+    ];
+    return {
+      code,
+      action: () => locator.hover(),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const typeSchema = elementSchema.extend({
+  text: zod.z.string().describe("Text to type into the element"),
+  submit: zod.z.coerce.boolean().optional().describe("Whether to submit entered text (press Enter after)"),
+  slowly: zod.z.coerce.boolean().optional().describe("Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.")
+});
+const type = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_type",
+    title: "Type text",
+    description: "Type text into editable element",
+    inputSchema: typeSchema,
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const snapshot2 = context.currentTabOrDie().snapshotOrDie();
+    const locator = snapshot2.refLocator(params);
+    const code = [];
+    const steps = [];
+    if (params.slowly) {
+      code.push(`// Press "${params.text}" sequentially into "${params.element}"`);
+      code.push(`await page.${await utils.generateLocator(locator)}.pressSequentially(${javascript.quote(params.text)});`);
+      steps.push(() => locator.pressSequentially(params.text));
+    } else {
+      code.push(`// Fill "${params.text}" into "${params.element}"`);
+      code.push(`await page.${await utils.generateLocator(locator)}.fill(${javascript.quote(params.text)});`);
+      steps.push(() => locator.fill(params.text));
+    }
+    if (params.submit) {
+      code.push(`// Submit text`);
+      code.push(`await page.${await utils.generateLocator(locator)}.press('Enter');`);
+      steps.push(() => locator.press("Enter"));
+    }
+    return {
+      code,
+      action: () => steps.reduce((acc, step) => acc.then(step), Promise.resolve()),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const selectOptionSchema = elementSchema.extend({
+  values: zod.z.array(zod.z.string()).describe("Array of values to select in the dropdown. This can be a single value or multiple values.")
+});
+const selectOption = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_select_option",
+    title: "Select option",
+    description: "Select an option in a dropdown",
+    inputSchema: selectOptionSchema,
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const snapshot2 = context.currentTabOrDie().snapshotOrDie();
+    const locator = snapshot2.refLocator(params);
+    const code = [
+      `// Select options [${params.values.join(", ")}] in ${params.element}`,
+      `await page.${await utils.generateLocator(locator)}.selectOption(${javascript.formatObject(params.values)});`
+    ];
+    return {
+      code,
+      action: () => locator.selectOption(params.values).then(() => {
+      }),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const snapshot$1 = [
+  snapshot,
+  click,
+  drag,
+  hover,
+  type,
+  selectOption
+];
+
+exports.default = snapshot$1;

package/lib/cjs/src/tools/tabs.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const listTabs = tool.defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_list",
+    title: "List tabs",
+    description: "List browser tabs",
+    inputSchema: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    await context.ensureTab();
+    return {
+      code: [`// <internal code to list tabs>`],
+      captureSnapshot: false,
+      waitForNetwork: false,
+      resultOverride: {
+        content: [{
+          type: "text",
+          text: await context.listTabsMarkdown()
+        }]
+      }
+    };
+  }
+});
+const selectTab = (captureSnapshot) => tool.defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_select",
+    title: "Select a tab",
+    description: "Select a tab by index",
+    inputSchema: zod.z.object({
+      index: zod.z.coerce.number().describe("The index of the tab to select")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    await context.selectTab(params.index);
+    const code = [
+      `// <internal code to select tab ${params.index}>`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const newTab = (captureSnapshot) => tool.defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_new",
+    title: "Open a new tab",
+    description: "Open a new tab",
+    inputSchema: zod.z.object({
+      url: zod.z.string().optional().describe("The URL to navigate to in the new tab. If not provided, the new tab will be blank.")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    await context.newTab();
+    if (params.url)
+      await context.currentTabOrDie().navigate(params.url);
+    const code = [
+      `// <internal code to open a new tab>`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const closeTab = (captureSnapshot) => tool.defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_close",
+    title: "Close a tab",
+    description: "Close a tab",
+    inputSchema: zod.z.object({
+      index: zod.z.coerce.number().optional().describe("The index of the tab to close. Closes current tab if not provided.")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    await context.closeTab(params.index);
+    const code = [
+      `// <internal code to close tab ${params.index}>`
+    ];
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const tabs = (captureSnapshot) => [
+  listTabs,
+  newTab(captureSnapshot),
+  selectTab(captureSnapshot),
+  closeTab(captureSnapshot)
+];
+
+exports.default = tabs;