browsercat_screenshot

Capture web page screenshots or specific elements using BrowserCat's cloud browser service. Specify dimensions and CSS selectors to document web content for testing or analysis.

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
`width`	No	Width in pixels (default: 800)
`height`	No	Height in pixels (default: 600)

Implementation Reference

index.ts:181-219 (handler)

The main handler for the 'browsercat_screenshot' tool. Sets viewport, takes screenshot of page or selected element using Puppeteer, stores base64 image in screenshots map, notifies resource change, and returns text confirmation and image content.

case "browsercat_screenshot": {
  const width = args.width ?? 800;
  const height = args.height ?? 600;
  await page.setViewport({ width, height });
  
  const screenshot = await (args.selector ?
    (await page.$(args.selector))?.screenshot({ encoding: "base64" }) :
    page.screenshot({ encoding: "base64", fullPage: false }));

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

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

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

index.ts:40-53 (schema)

Input schema definition for the 'browsercat_screenshot' tool, specifying required 'name' and optional 'selector', 'width', 'height' parameters.

{
  name: "browsercat_screenshot",
  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" },
      width: { type: "number", description: "Width in pixels (default: 800)" },
      height: { type: "number", description: "Height in pixels (default: 600)" },
    },
    required: ["name"],
  },
},

index.ts:421-423 (registration)
Registers the list of available tools including 'browsercat_screenshot' by returning the TOOLS array in response to ListToolsRequestSchema.
```
server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: TOOLS,
}));
```

BrowserCat MCP Server