@szymonrybczak/playwright-mcp 0.0.2 → 0.0.4

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const generateTestSchema = zod.z.object({
+  name: zod.z.string().describe("The name of the test"),
+  description: zod.z.string().describe("The description of the test"),
+  steps: zod.z.array(zod.z.string()).describe("The steps of the test")
+});
+const generateTest = tool.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
+];
+
+exports.default = testing;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function defineTool(tool) {
+  return tool;
+}
+
+exports.defineTool = defineTool;

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+async function waitForCompletion(context, tab, callback) {
+  const requests = /* @__PURE__ */ new Set();
+  let frameNavigated = false;
+  let waitCallback = () => {
+  };
+  const waitBarrier = new Promise((f) => {
+    waitCallback = f;
+  });
+  const requestListener = (request) => requests.add(request);
+  const requestFinishedListener = (request) => {
+    requests.delete(request);
+    if (!requests.size)
+      waitCallback();
+  };
+  const frameNavigateListener = (frame) => {
+    if (frame.parentFrame())
+      return;
+    frameNavigated = true;
+    dispose();
+    clearTimeout(timeout);
+    void tab.waitForLoadState("load").then(waitCallback);
+  };
+  const onTimeout = () => {
+    dispose();
+    waitCallback();
+  };
+  tab.page.on("request", requestListener);
+  tab.page.on("requestfinished", requestFinishedListener);
+  tab.page.on("framenavigated", frameNavigateListener);
+  const timeout = setTimeout(onTimeout, 1e4);
+  const dispose = () => {
+    tab.page.off("request", requestListener);
+    tab.page.off("requestfinished", requestFinishedListener);
+    tab.page.off("framenavigated", frameNavigateListener);
+    clearTimeout(timeout);
+  };
+  try {
+    const result = await callback();
+    if (!requests.size && !frameNavigated)
+      waitCallback();
+    await waitBarrier;
+    await context.waitForTimeout(1e3);
+    return result;
+  } finally {
+    dispose();
+  }
+}
+function sanitizeForFilePath(s) {
+  const sanitize = (s2) => s2.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, "-");
+  const separator = s.lastIndexOf(".");
+  if (separator === -1)
+    return sanitize(s);
+  return sanitize(s.substring(0, separator)) + "." + sanitize(s.substring(separator + 1));
+}
+async function generateLocator(locator) {
+  try {
+    return await locator._generateLocatorString();
+  } catch (e) {
+    if (e instanceof Error && /locator._generateLocatorString: No element matching locator/.test(e.message))
+      throw new Error("Ref not found, likely because element was removed. Use browser_snapshot to see what elements are currently on the page.");
+    throw e;
+  }
+}
+async function callOnPageNoTrace(page, callback) {
+  return await page._wrapApiCall(() => callback(page), { internal: true });
+}
+
+exports.callOnPageNoTrace = callOnPageNoTrace;
+exports.generateLocator = generateLocator;
+exports.sanitizeForFilePath = sanitizeForFilePath;
+exports.waitForCompletion = waitForCompletion;

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

@@ -0,0 +1,181 @@
+'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 elementSchema = zod.z.object({
+  element: zod.z.string().describe("Human-readable element description used to obtain permission to interact with the element")
+});
+const screenshot = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_screen_capture",
+    title: "Take a screenshot",
+    description: "Take a screenshot of the current page",
+    inputSchema: zod.z.object({}),
+    type: "readOnly"
+  },
+  handle: async (context) => {
+    const tab = await context.ensureTab();
+    const options = { type: "jpeg", quality: 50, scale: "css" };
+    const code = [
+      `// Take a screenshot of the current page`,
+      `await page.screenshot(${javascript.formatObject(options)});`
+    ];
+    const action = () => tab.page.screenshot(options).then((buffer) => {
+      return {
+        content: [{ type: "image", data: buffer.toString("base64"), mimeType: "image/jpeg" }]
+      };
+    });
+    return {
+      code,
+      action,
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const moveMouse = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_screen_move_mouse",
+    title: "Move mouse",
+    description: "Move mouse to a given position",
+    inputSchema: elementSchema.extend({
+      x: zod.z.coerce.number().describe("X coordinate"),
+      y: zod.z.coerce.number().describe("Y coordinate")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Move mouse to (${params.x}, ${params.y})`,
+      `await page.mouse.move(${params.x}, ${params.y});`
+    ];
+    const action = () => tab.page.mouse.move(params.x, params.y);
+    return {
+      code,
+      action,
+      captureSnapshot: false,
+      waitForNetwork: false
+    };
+  }
+});
+const click = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_screen_click",
+    title: "Click",
+    description: "Click left mouse button",
+    inputSchema: elementSchema.extend({
+      x: zod.z.coerce.number().describe("X coordinate"),
+      y: zod.z.coerce.number().describe("Y coordinate")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Click mouse at coordinates (${params.x}, ${params.y})`,
+      `await page.mouse.move(${params.x}, ${params.y});`,
+      `await page.mouse.down();`,
+      `await page.mouse.up();`
+    ];
+    const action = async () => {
+      await tab.page.mouse.move(params.x, params.y);
+      await tab.page.mouse.down();
+      await tab.page.mouse.up();
+    };
+    return {
+      code,
+      action,
+      captureSnapshot: false,
+      waitForNetwork: true
+    };
+  }
+});
+const drag = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_screen_drag",
+    title: "Drag mouse",
+    description: "Drag left mouse button",
+    inputSchema: elementSchema.extend({
+      startX: zod.z.coerce.number().describe("Start X coordinate"),
+      startY: zod.z.coerce.number().describe("Start Y coordinate"),
+      endX: zod.z.coerce.number().describe("End X coordinate"),
+      endY: zod.z.coerce.number().describe("End Y coordinate")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Drag mouse from (${params.startX}, ${params.startY}) to (${params.endX}, ${params.endY})`,
+      `await page.mouse.move(${params.startX}, ${params.startY});`,
+      `await page.mouse.down();`,
+      `await page.mouse.move(${params.endX}, ${params.endY});`,
+      `await page.mouse.up();`
+    ];
+    const action = async () => {
+      await tab.page.mouse.move(params.startX, params.startY);
+      await tab.page.mouse.down();
+      await tab.page.mouse.move(params.endX, params.endY);
+      await tab.page.mouse.up();
+    };
+    return {
+      code,
+      action,
+      captureSnapshot: false,
+      waitForNetwork: true
+    };
+  }
+});
+const type = tool.defineTool({
+  capability: "core",
+  schema: {
+    name: "browser_screen_type",
+    title: "Type text",
+    description: "Type text",
+    inputSchema: zod.z.object({
+      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)")
+    }),
+    type: "destructive"
+  },
+  handle: async (context, params) => {
+    const tab = context.currentTabOrDie();
+    const code = [
+      `// Type ${params.text}`,
+      `await page.keyboard.type('${params.text}');`
+    ];
+    const action = async () => {
+      await tab.page.keyboard.type(params.text);
+      if (params.submit)
+        await tab.page.keyboard.press("Enter");
+    };
+    if (params.submit) {
+      code.push(`// Submit text`);
+      code.push(`await page.keyboard.press('Enter');`);
+    }
+    return {
+      code,
+      action,
+      captureSnapshot: false,
+      waitForNetwork: true
+    };
+  }
+});
+const vision = [
+  screenshot,
+  moveMouse,
+  click,
+  drag,
+  type
+];
+
+exports.default = vision;

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const zod = require('zod');
+const tool = require('./tool.js');
+
+const wait = (captureSnapshot) => tool.defineTool({
+  capability: "wait",
+  schema: {
+    name: "browser_wait_for",
+    title: "Wait for",
+    description: "Wait for text to appear or disappear or a specified time to pass",
+    inputSchema: zod.z.object({
+      time: zod.z.coerce.number().optional().describe("The time to wait in seconds"),
+      text: zod.z.string().optional().describe("The text to wait for"),
+      textGone: zod.z.string().optional().describe("The text to wait for to disappear")
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params) => {
+    if (!params.text && !params.textGone && !params.time)
+      throw new Error("Either time, text or textGone must be provided");
+    const code = [];
+    if (params.time) {
+      code.push(`await new Promise(f => setTimeout(f, ${params.time} * 1000));`);
+      await new Promise((f) => setTimeout(f, Math.min(1e4, params.time * 1e3)));
+    }
+    const tab = context.currentTabOrDie();
+    const locator = params.text ? tab.page.getByText(params.text).first() : void 0;
+    const goneLocator = params.textGone ? tab.page.getByText(params.textGone).first() : void 0;
+    if (goneLocator) {
+      code.push(`await page.getByText(${JSON.stringify(params.textGone)}).first().waitFor({ state: 'hidden' });`);
+      await goneLocator.waitFor({ state: "hidden" });
+    }
+    if (locator) {
+      code.push(`await page.getByText(${JSON.stringify(params.text)}).first().waitFor({ state: 'visible' });`);
+      await locator.waitFor({ state: "visible" });
+    }
+    return {
+      code,
+      captureSnapshot,
+      waitForNetwork: false
+    };
+  }
+});
+const wait$1 = (captureSnapshot) => [
+  wait(captureSnapshot)
+];
+
+exports.default = wait$1;

package/lib/cjs/src/tools.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const common = require('./tools/common.js');
+const console = require('./tools/console.js');
+const dialogs = require('./tools/dialogs.js');
+const files = require('./tools/files.js');
+const install = require('./tools/install.js');
+const keyboard = require('./tools/keyboard.js');
+const navigate = require('./tools/navigate.js');
+const network = require('./tools/network.js');
+const pdf = require('./tools/pdf.js');
+const snapshot = require('./tools/snapshot.js');
+const tabs = require('./tools/tabs.js');
+const screenshot = require('./tools/screenshot.js');
+const testing = require('./tools/testing.js');
+const vision = require('./tools/vision.js');
+const wait = require('./tools/wait.js');
+
+const snapshotTools = [
+  ...common.default(true),
+  ...console.default,
+  ...dialogs.default(true),
+  ...files.default(true),
+  ...install.default,
+  ...keyboard.default(true),
+  ...navigate.default(true),
+  ...network.default,
+  ...pdf.default,
+  ...screenshot.default,
+  ...snapshot.default,
+  ...tabs.default(true),
+  ...testing.default,
+  ...wait.default(true)
+];
+const visionTools = [
+  ...common.default(false),
+  ...console.default,
+  ...dialogs.default(false),
+  ...files.default(false),
+  ...install.default,
+  ...keyboard.default(false),
+  ...navigate.default(false),
+  ...network.default,
+  ...pdf.default,
+  ...tabs.default(false),
+  ...testing.default,
+  ...vision.default,
+  ...wait.default(false)
+];
+
+exports.snapshotTools = snapshotTools;
+exports.visionTools = visionTools;

package/lib/esm/_virtual/_commonjsHelpers.js

@@ -0,0 +1,5 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/lib/esm/_virtual/browser.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireBrowser } from '../node_modules/debug/src/browser.js';
+
+var browserExports = requireBrowser();
+const debug = /*@__PURE__*/getDefaultExportFromCjs(browserExports);
+
+export { debug as default };

package/lib/esm/_virtual/browser2.js

@@ -0,0 +1,3 @@
+var browser = {exports: {}};
+
+export { browser as __module };

package/lib/esm/cloudflare/package.json.js

@@ -0,0 +1,5 @@
+const version = "0.0.4";
+const json = {
+  version};
+
+export { json as default, version };

package/lib/esm/index.js

@@ -0,0 +1,24 @@
+import { McpAgent } from 'agents/mcp';
+import { endpointURLString } from '@szymonrybczak/patchright';
+import { createConnection } from './src/index.js';
+
+function createMcpAgent(endpoint, options) {
+  const cdpEndpoint = typeof endpoint === "string" ? endpoint : endpoint instanceof URL ? endpoint.toString() : endpointURLString(endpoint);
+  const connection = createConnection({
+    capabilities: ["core", "tabs", "pdf", "history", "wait", "files", "testing"],
+    browser: {
+      cdpEndpoint
+    },
+    ...options
+  });
+  return class PlaywrightMcpAgent extends McpAgent {
+    constructor() {
+      super(...arguments);
+      this.server = connection.then((server) => server.server);
+    }
+    async init() {
+    }
+  };
+}
+
+export { createMcpAgent };