Playwright MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:59-74 (handler)

  The handler function that executes the browser_click tool. It retrieves the locator from the current tab's snapshot using the provided params and performs the click action via Playwright, while also generating explanatory code and configuring post-action behavior.

  handle: async (context, params) => {
    const tab = context.currentTabOrDie();
    const locator = tab.snapshotOrDie().refLocator(params);
  
    const code = [
      `// Click ${params.element}`,
      `await page.${await generateLocator(locator)}.click();`
    ];
  
    return {
      code,
      action: () => locator.click(),
      captureSnapshot: true,
      waitForNetwork: true,
    };
  },

• src/tools/snapshot.ts:51-57 (schema)

  The schema definition for the browser_click tool, including name, title, description, input schema (elementSchema), and type.

  schema: {
    name: 'browser_click',
    title: 'Click',
    description: 'Perform click on a web page',
    inputSchema: elementSchema,
    type: 'destructive',
  },

• src/tools/snapshot.ts:49-75 (registration)

  The complete tool definition and registration using defineTool, which is then exported for inclusion in the tools registry.

  const click = defineTool({
    capability: 'core',
    schema: {
      name: 'browser_click',
      title: 'Click',
      description: 'Perform click on a web page',
      inputSchema: elementSchema,
      type: 'destructive',
    },
  
    handle: async (context, params) => {
      const tab = context.currentTabOrDie();
      const locator = tab.snapshotOrDie().refLocator(params);
  
      const code = [
        `// Click ${params.element}`,
        `await page.${await generateLocator(locator)}.click();`
      ];
  
      return {
        code,
        action: () => locator.click(),
        captureSnapshot: true,
        waitForNetwork: true,
      };
    },
  });

• src/tools/snapshot.ts:44-47 (schema)

  The Zod schema for the input parameters used by browser_click (and other tools), defining element description and ref.

  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'),
  });

• src/tools/snapshot.ts:219-226 (registration)

  Exports the browser_click tool (as 'click') along with other snapshot-related tools for inclusion in the main tools array.

  export default [
    snapshot,
    click,
    drag,
    hover,
    type,
    selectOption,
  ];