Chrome DevTools MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:38-60 (handler)

  The handler function for the 'wait_for' tool. It waits for an element containing the specified text to appear on the page by creating locators in all frames using text and ARIA selectors, then calls wait() on the locator.

  handler: async (request, response, context) => {
    const page = context.getSelectedPage();
    const frames = page.frames();
  
    const locator = Locator.race(
      frames.flatMap(frame => [
        frame.locator(`aria/${request.params.text}`),
        frame.locator(`text/${request.params.text}`),
      ]),
    );
  
    if (request.params.timeout) {
      locator.setTimeout(request.params.timeout);
    }
  
    await locator.wait();
  
    response.appendResponseLine(
      `Element with text "${request.params.text}" found.`,
    );
  
    response.setIncludeSnapshot(true);
  },

• src/tools/snapshot.ts:34-37 (schema)

  The input schema for the 'wait_for' tool, defining the 'text' parameter and optional 'timeout'.

  schema: {
    text: z.string().describe('Text to appear on the page'),
    ...timeoutSchema,
  },

• src/main.ts:307-320 (registration)

  The tools from snapshotTools (including wait_for) are collected into an array and registered via registerTool, which sets up the MCP server tool handler.

  const tools = [
    ...Object.values(consoleTools),
    ...Object.values(emulationTools),
    ...Object.values(inputTools),
    ...Object.values(networkTools),
    ...Object.values(pagesTools),
    ...Object.values(performanceTools),
    ...Object.values(screenshotTools),
    ...Object.values(scriptTools),
    ...Object.values(snapshotTools),
  ];
  for (const tool of tools) {
    registerTool(tool as unknown as ToolDefinition);
  }

• src/main.ts:38-38 (registration)

  Import of snapshot tools module, which exports the wait_for tool.

  import * as snapshotTools from './tools/snapshot.js';