playwright_capture_screenshots
Capture screenshots across multiple browsers and viewports for visual testing and UI/UX development workflows.
Instructions
Capture screenshots across browsers and viewports
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | ||
| viewports | No | ||
| fullPage | No |
Implementation Reference
- src/tools/playwright.ts:105-175 (handler)The main handler function that implements the playwright_capture_screenshots tool. It validates input with Zod schema, launches Chromium browser, navigates to the URL, captures screenshots for specified or default viewports, collects metadata, and returns results.async captureScreenshots(args: any) { const params = PlaywrightScreenshotSchema.parse(args); const defaultViewports = [ { width: 1920, height: 1080, deviceScaleFactor: 1 }, // Desktop { width: 768, height: 1024, deviceScaleFactor: 2 }, // Tablet { width: 375, height: 812, deviceScaleFactor: 3 } // Mobile ]; const viewports = params.viewports || defaultViewports; const screenshots: any[] = []; try { const browser = await this.getBrowser('chromium'); for (const viewport of viewports) { const context = await browser.newContext({ viewport: { width: viewport.width, height: viewport.height }, deviceScaleFactor: viewport.deviceScaleFactor || 1 }); const page = await context.newPage(); try { await page.goto(params.url, { waitUntil: 'networkidle' }); const screenshotBuffer = await page.screenshot({ fullPage: params.fullPage }); screenshots.push({ viewport: `${viewport.width}x${viewport.height}`, deviceScaleFactor: viewport.deviceScaleFactor || 1, size: `${(screenshotBuffer.length / 1024).toFixed(2)}KB`, fullPage: params.fullPage, timestamp: new Date().toISOString() }); } finally { await context.close(); } } return { content: [ { type: 'text', text: JSON.stringify({ url: params.url, screenshots, message: `Captured ${screenshots.length} screenshots across different viewports` }, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error capturing screenshots: ${error.message}` } ], isError: true }; } finally { await this.closeBrowsers(); } }
- src/tools/playwright.ts:14-22 (schema)Zod schema used for input validation in the captureScreenshots handler.const PlaywrightScreenshotSchema = z.object({ url: z.string().url(), viewports: z.array(z.object({ width: z.number(), height: z.number(), deviceScaleFactor: z.number().optional() })).optional(), fullPage: z.boolean().default(false) });
- src/index.ts:196-217 (registration)Tool registration in the ListToolsRequestSchema handler, defining the tool name, description, and input schema.name: 'playwright_capture_screenshots', description: 'Capture screenshots across browsers and viewports', inputSchema: { type: 'object', properties: { url: { type: 'string' }, viewports: { type: 'array', items: { type: 'object', properties: { width: { type: 'number' }, height: { type: 'number' }, deviceScaleFactor: { type: 'number' } } } }, fullPage: { type: 'boolean', default: false } }, required: ['url'] } },
- src/index.ts:322-323 (registration)Switch case in CallToolRequestSchema handler that routes execution to the PlaywrightTools.captureScreenshots method.case 'playwright_capture_screenshots': return await this.playwrightTools.captureScreenshots(args);