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 | Default |
|---|---|---|---|
| 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 ?? {}) );