playwright_capture_screenshots
Capture browser screenshots across multiple viewports and devices. Automate visual testing, ensure responsive design consistency, and validate UI/UX elements for web development and design workflows.
Instructions
Capture screenshots across browsers and viewports
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fullPage | No | ||
| url | Yes | ||
| viewports | No |
Implementation Reference
- src/tools/playwright.ts:105-175 (handler)The main handler function that implements the playwright_capture_screenshots tool logic, parsing inputs, launching browser, capturing screenshots across viewports, and returning 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 within the 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-216 (schema)Input schema definition for the tool as registered in the MCP server tool list.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:320-323 (registration)Switch case registration dispatching calls to the PlaywrightTools handler.case 'playwright_test_ui': return await this.playwrightTools.testUI(args); case 'playwright_capture_screenshots': return await this.playwrightTools.captureScreenshots(args);
- src/index.ts:52-52 (registration)Instantiation of the PlaywrightTools class instance used for handling tools.this.playwrightTools = new PlaywrightTools();