screenshot_compare
Capture web page screenshots at multiple viewport widths to compare responsive layouts across mobile, tablet, and desktop devices.
Instructions
Take screenshots at multiple viewport widths to compare responsive layouts. Returns file paths for mobile (375px), tablet (768px), and desktop (1440px) by default.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL to screenshot | |
| widths | No | Viewport widths to capture (default: [375, 768, 1440]) |
Implementation Reference
- src/index.js:166-179 (handler)The core implementation of the compareScreenshots function.
async function compareScreenshots({ url, widths = [375, 768, 1440] }) { const results = []; for (const w of widths) { const label = w <= 480 ? "mobile" : w <= 1024 ? "tablet" : "desktop"; const filepath = await takeScreenshot({ url, width: w, height: w <= 480 ? 812 : w <= 1024 ? 1024 : 900, deviceScaleFactor: w <= 480 ? 3 : 2, }); results.push({ label, width: w, path: filepath }); } return results; } - src/index.js:246-267 (registration)The tool registration and schema definition for screenshot_compare.
{ name: "screenshot_compare", description: "Take screenshots at multiple viewport widths to compare responsive layouts. " + "Returns file paths for mobile (375px), tablet (768px), and desktop (1440px) by default.", inputSchema: { type: "object", properties: { url: { type: "string", description: "URL to screenshot", }, widths: { type: "array", items: { type: "number" }, description: "Viewport widths to capture (default: [375, 768, 1440])", default: [375, 768, 1440], }, }, required: ["url"], }, }, - src/index.js:312-328 (handler)The request handler logic that invokes compareScreenshots and formats the output.
case "screenshot_compare": { const results = await compareScreenshots(args); const content = []; for (const r of results) { const imageData = readFileSync(r.path); content.push({ type: "image", data: imageData.toString("base64"), mimeType: "image/png", }); content.push({ type: "text", text: `${r.label} (${r.width}px): ${r.path}`, }); } return { content }; }