playwright_screenshot
Capture screenshots of web pages or specific elements using CSS selectors, with customizable dimensions, formats, and storage options for enhanced web automation and testing.
Instructions
Take a screenshot of the current page or a specific element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| downloadsDir | No | Custom downloads directory path (default: user's Downloads folder) | |
| fullPage | No | Store screenshot of the entire page (default: false) | |
| height | No | Height in pixels (default: 600) | |
| name | Yes | Name for the screenshot | |
| savePng | No | Save screenshot as PNG file (default: false) | |
| selector | No | CSS selector for element to screenshot | |
| storeBase64 | No | Store screenshot in base64 format (default: true) | |
| width | No | Width in pixels (default: 800) |
Implementation Reference
- src/tools/browser/screenshot.ts:19-69 (handler)The `execute` method in `ScreenshotTool` class implements the core screenshot functionality: takes screenshot of page or element, saves to file, stores base64 in memory, notifies server.async execute(args: any, context: ToolContext): Promise<ToolResponse> { return this.safeExecute(context, async (page) => { const screenshotOptions: any = { type: args.type || "png", fullPage: !!args.fullPage }; if (args.selector) { const element = await page.$(args.selector); if (!element) { return { content: [{ type: "text", text: `Element not found: ${args.selector}`, }], isError: true }; } screenshotOptions.element = element; } // Generate output path const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `${args.name || 'screenshot'}-${timestamp}.png`; const downloadsDir = args.downloadsDir || defaultDownloadsPath; if (!fs.existsSync(downloadsDir)) { fs.mkdirSync(downloadsDir, { recursive: true }); } const outputPath = path.join(downloadsDir, filename); screenshotOptions.path = outputPath; const screenshot = await page.screenshot(screenshotOptions); const base64Screenshot = screenshot.toString('base64'); const messages = [`Screenshot saved to: ${path.relative(process.cwd(), outputPath)}`]; // Handle base64 storage if (args.storeBase64 !== false) { this.screenshots.set(args.name || 'screenshot', base64Screenshot); this.server.notification({ method: "notifications/resources/list_changed", }); messages.push(`Screenshot also stored in memory with name: '${args.name || 'screenshot'}'`); } return createSuccessResponse(messages); }); }
- src/tools.ts:96-112 (schema)Tool definition including name, description, and JSON input schema for validation.name: "playwright_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)" }, storeBase64: { type: "boolean", description: "Store screenshot in base64 format (default: true)" }, fullPage: { type: "boolean", description: "Store screenshot of the entire page (default: false)" }, savePng: { type: "boolean", description: "Save screenshot as PNG file (default: false)" }, downloadsDir: { type: "string", description: "Custom downloads directory path (default: user's Downloads folder)" }, }, required: ["name"], }, },
- src/toolHandler.ts:475-476 (registration)Switch case in main tool handler that routes calls to the screenshotTool's execute method.case "playwright_screenshot": return await screenshotTool.execute(args, context);
- src/tools.ts:452-452 (registration)Listed in BROWSER_TOOLS array used to conditionally launch browser before execution."playwright_screenshot",
- Full ScreenshotTool class providing screenshot execution and screenshot retrieval methods.export class ScreenshotTool extends BrowserToolBase { private screenshots = new Map<string, string>(); /** * Execute the screenshot tool */ async execute(args: any, context: ToolContext): Promise<ToolResponse> { return this.safeExecute(context, async (page) => { const screenshotOptions: any = { type: args.type || "png", fullPage: !!args.fullPage }; if (args.selector) { const element = await page.$(args.selector); if (!element) { return { content: [{ type: "text", text: `Element not found: ${args.selector}`, }], isError: true }; } screenshotOptions.element = element; } // Generate output path const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `${args.name || 'screenshot'}-${timestamp}.png`; const downloadsDir = args.downloadsDir || defaultDownloadsPath; if (!fs.existsSync(downloadsDir)) { fs.mkdirSync(downloadsDir, { recursive: true }); } const outputPath = path.join(downloadsDir, filename); screenshotOptions.path = outputPath; const screenshot = await page.screenshot(screenshotOptions); const base64Screenshot = screenshot.toString('base64'); const messages = [`Screenshot saved to: ${path.relative(process.cwd(), outputPath)}`]; // Handle base64 storage if (args.storeBase64 !== false) { this.screenshots.set(args.name || 'screenshot', base64Screenshot); this.server.notification({ method: "notifications/resources/list_changed", }); messages.push(`Screenshot also stored in memory with name: '${args.name || 'screenshot'}'`); } return createSuccessResponse(messages); }); } /** * Get all stored screenshots */ getScreenshots(): Map<string, string> { return this.screenshots; } }