browser_screenshot

Capture web page screenshots or specific elements using CSS selectors for documentation, testing, or visual verification in browser automation workflows.

Instructions

Take a screenshot of the current page or a specific element

Input Schema

TableJSON Schema

Name	Required	Description
`name`	Yes	Name for the screenshot
`selector`	No	CSS selector for element to screenshot
`fullPage`	No	Take a full page screenshot (default: false)

Implementation Reference

index.ts:194-231 (handler)

Handler function for the 'browser_screenshot' tool. Captures screenshot of page or element using Playwright, converts to base64, stores it, notifies resource change, and returns success message with image content.

case ToolName.BrowserScreenshot: {
  const fullPage = (args.fullPage === 'true');

  const screenshot = await (args.selector ?
    page.locator(args.selector).screenshot() :
    page.screenshot({ fullPage }));
  const base64Screenshot = screenshot.toString('base64');

  if (!base64Screenshot) {
    return {
      content: [{
        type: "text",
        text: args.selector ? `Element not found: ${args.selector}` : "Screenshot failed",
      }],
      isError: true,
    };
  }

  screenshots.set(args.name, base64Screenshot);
  server.notification({
    method: "notifications/resources/list_changed",
  });

  return {
    content: [
      {
        type: "text",
        text: `Screenshot '${args.name}' taken`,
      } as TextContent,
      {
        type: "image",
          data: base64Screenshot,
          mimeType: "image/png",
        } as ImageContent,
      ],
    isError: false,
  };
}

index.ts:48-60 (registration)

Tool registration object for 'browser_screenshot' added to the TOOLS array, which is served via ListToolsRequestSchema. Includes name, description, and input schema.

{
  name: ToolName.BrowserScreenshot,
  description: "Take a screenshot of the current page or a specific element",
  inputSchema: {
    type: "object",
    properties: {
      name: { type: "string", description: "Name for the screenshot" },
      selector: { type: "string", description: "CSS selector for element to screenshot" },
      fullPage: { type: "boolean", description: "Take a full page screenshot (default: false)", default: false },
    },
    required: ["name"],
  },
},

index.ts:51-59 (schema)

Input schema defining parameters for browser_screenshot: name (required), selector (optional), fullPage (optional boolean).

inputSchema: {
  type: "object",
  properties: {
    name: { type: "string", description: "Name for the screenshot" },
    selector: { type: "string", description: "CSS selector for element to screenshot" },
    fullPage: { type: "boolean", description: "Take a full page screenshot (default: false)", default: false },
  },
  required: ["name"],
},

index.ts:24-24 (helper)
Enum definition mapping ToolName.BrowserScreenshot to the string 'browser_screenshot' used throughout the code.
```
BrowserScreenshot = "browser_screenshot",
```

index.ts:640-646 (registration)

MCP server request handlers for listing tools (via TOOLS array) and calling tools (routes to handleToolCall switch).

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: TOOLS,
}));

server.setRequestHandler(CallToolRequestSchema, async (request) =>
  handleToolCall(request.params.name as ToolName, request.params.arguments ?? {})
);

MCP-Server-Playwright