@szymonrybczak/playwright-mcp 0.0.2 → 0.0.4

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

@@ -0,0 +1,45 @@
+import { fork } from 'node:child_process';
+import path from 'node:path';
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+import { fileURLToPath } from 'node:url';
+
+const install = 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: z.object({}),
+    type: "destructive"
+  },
+  handle: async (context) => {
+    const channel = context.config.browser?.launchOptions?.channel ?? context.config.browser?.browserName ?? "chrome";
+    const cliUrl = import.meta.resolve("@szymonrybczak/patchright/package.json");
+    const cliPath = path.join(fileURLToPath(cliUrl), "..", "cli.js");
+    const child = 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
+];
+
+export { install$1 as default };

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

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const pressKey = (captureSnapshot) => defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_press_key",
+    title: "Press a key",
+    description: "Press a key on the keyboard",
+    inputSchema: z.object({
+      key: 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)
+];
+
+export { keyboard as default };

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

@@ -0,0 +1,81 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const navigate = (captureSnapshot) => defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_navigate",
+    title: "Navigate to a URL",
+    description: "Navigate to a URL",
+    inputSchema: z.object({
+      url: 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) => defineTool({
+  capability: "history",
+  schema: {
+    name: "browser_navigate_back",
+    title: "Go back",
+    description: "Go back to the previous page",
+    inputSchema: 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) => defineTool({
+  capability: "history",
+  schema: {
+    name: "browser_navigate_forward",
+    title: "Go forward",
+    description: "Go forward to the next page",
+    inputSchema: 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)
+];
+
+export { navigate$1 as default };

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

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const requests = defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_network_requests",
+    title: "List network requests",
+    description: "Returns all network requests since loading the page",
+    inputSchema: 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
+];
+
+export { network as default };

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

@@ -0,0 +1,38 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+import { formatObject } from '../javascript.js';
+import { outputFile } from '../config.js';
+
+const pdfSchema = z.object({
+  filename: z.string().optional().describe("File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.")
+});
+const pdf = 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 outputFile(context.config, params.filename ?? `page-${(/* @__PURE__ */ new Date()).toISOString()}.pdf`);
+    const code = [
+      `// Save page as ${fileName}`,
+      `await page.pdf(${formatObject({ path: fileName })});`
+    ];
+    return {
+      code,
+      action: async () => tab.page.pdf({ path: fileName }).then(() => {
+      }),
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const pdf$1 = [
+  pdf
+];
+
+export { pdf$1 as default };

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

@@ -0,0 +1,65 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+import { formatObject } from '../javascript.js';
+import { outputFile } from '../config.js';
+import { generateLocator } from './utils.js';
+
+const screenshotSchema = z.object({
+  raw: z.coerce.boolean().optional().describe("Whether to return without compression (in PNG format). Default is false, which returns a JPEG image."),
+  filename: z.string().optional().describe("File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified."),
+  element: 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: 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 = 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 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 generateLocator(locator)}.screenshot(${formatObject(options)});`);
+    else
+      code.push(`await page.screenshot(${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
+];
+
+export { screenshot$1 as default };

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

@@ -0,0 +1,191 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+import { quote, formatObject } from '../javascript.js';
+import { generateLocator } from './utils.js';
+
+const snapshot = defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_snapshot",
+    title: "Page snapshot",
+    description: "Capture accessibility snapshot of the current page, this is better than screenshot",
+    inputSchema: z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    await context.ensureTab();
+    return {
+      code: [`// <internal code to capture accessibility snapshot>`],
+      captureSnapshot: true,
+      waitForNetwork: false
+    };
+  }
+});
+const elementSchema = z.object({
+  element: z.string().describe("Human-readable element description used to obtain permission to interact with the element"),
+  ref: z.string().describe("Exact target element reference from the page snapshot")
+});
+const clickSchema = elementSchema.extend({
+  doubleClick: z.coerce.boolean().optional().describe("Whether to perform a double click instead of a single click")
+});
+const click = 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 generateLocator(locator)}.dblclick();`);
+    } else {
+      code.push(`// Click ${params.element}`);
+      code.push(`await page.${await generateLocator(locator)}.click();`);
+    }
+    return {
+      code,
+      action: () => params.doubleClick ? locator.dblclick() : locator.click(),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const drag = defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_drag",
+    title: "Drag mouse",
+    description: "Perform drag and drop between two elements",
+    inputSchema: z.object({
+      startElement: z.string().describe("Human-readable source element description used to obtain the permission to interact with the element"),
+      startRef: z.string().describe("Exact source element reference from the page snapshot"),
+      endElement: z.string().describe("Human-readable target element description used to obtain the permission to interact with the element"),
+      endRef: 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 generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`
+    ];
+    return {
+      code,
+      action: () => startLocator.dragTo(endLocator),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const hover = 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 generateLocator(locator)}.hover();`
+    ];
+    return {
+      code,
+      action: () => locator.hover(),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const typeSchema = elementSchema.extend({
+  text: z.string().describe("Text to type into the element"),
+  submit: z.coerce.boolean().optional().describe("Whether to submit entered text (press Enter after)"),
+  slowly: 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 = 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 generateLocator(locator)}.pressSequentially(${quote(params.text)});`);
+      steps.push(() => locator.pressSequentially(params.text));
+    } else {
+      code.push(`// Fill "${params.text}" into "${params.element}"`);
+      code.push(`await page.${await generateLocator(locator)}.fill(${quote(params.text)});`);
+      steps.push(() => locator.fill(params.text));
+    }
+    if (params.submit) {
+      code.push(`// Submit text`);
+      code.push(`await page.${await 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: z.array(z.string()).describe("Array of values to select in the dropdown. This can be a single value or multiple values.")
+});
+const selectOption = 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 generateLocator(locator)}.selectOption(${formatObject(params.values)});`
+    ];
+    return {
+      code,
+      action: () => locator.selectOption(params.values).then(() => {
+      }),
+      captureSnapshot: true,
+      waitForNetwork: true
+    };
+  }
+});
+const snapshot$1 = [
+  snapshot,
+  click,
+  drag,
+  hover,
+  type,
+  selectOption
+];
+
+export { snapshot$1 as default };

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

@@ -0,0 +1,106 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const listTabs = defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_list",
+    title: "List tabs",
+    description: "List browser tabs",
+    inputSchema: 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) => defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_select",
+    title: "Select a tab",
+    description: "Select a tab by index",
+    inputSchema: z.object({
+      index: 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) => defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_new",
+    title: "Open a new tab",
+    description: "Open a new tab",
+    inputSchema: z.object({
+      url: 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) => defineTool({
+  capability: "tabs",
+  schema: {
+    name: "browser_tab_close",
+    title: "Close a tab",
+    description: "Close a tab",
+    inputSchema: z.object({
+      index: 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)
+];
+
+export { tabs as default };

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

@@ -0,0 +1,48 @@
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+
+const generateTestSchema = z.object({
+  name: z.string().describe("The name of the test"),
+  description: z.string().describe("The description of the test"),
+  steps: z.array(z.string()).describe("The steps of the test")
+});
+const generateTest = defineTool({
+  capability: "testing",
+  schema: {
+    name: "browser_generate_playwright_test",
+    title: "Generate a Playwright test",
+    description: "Generate a Playwright test for given scenario",
+    inputSchema: generateTestSchema,
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    return {
+      resultOverride: {
+        content: [{
+          type: "text",
+          text: instructions(params)
+        }]
+      },
+      code: [],
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const instructions = (params) => [
+  `## Instructions`,
+  `- You are a playwright test generator.`,
+  `- You are given a scenario and you need to generate a playwright test for it.`,
+  "- DO NOT generate test code based on the scenario alone. DO run steps one by one using the tools provided instead.",
+  "- Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test based on message history",
+  "- Save generated test file in the tests directory",
+  `Test name: ${params.name}`,
+  `Description: ${params.description}`,
+  `Steps:`,
+  ...params.steps.map((step, index) => `- ${index + 1}. ${step}`)
+].join("\n");
+const testing = [
+  generateTest
+];
+
+export { testing as default };

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

@@ -0,0 +1,5 @@
+function defineTool(tool) {
+  return tool;
+}
+
+export { defineTool };