Skip to main content
Glama

playwright_screenshot

Capture screenshots of web pages or specific elements using CSS selectors. Customize dimensions, save as PNG, or store in base64 format, with optional directory path settings for saved files.

Instructions

Take a screenshot of the current page or a specific element

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
downloadsDirNoCustom downloads directory path (default: user's Downloads folder)
heightNoHeight in pixels (default: 600)
nameYesName for the screenshot
savePngNoSave screenshot as PNG file (default: false)
selectorNoCSS selector for element to screenshot
storeBase64NoStore screenshot in base64 format (default: true)
widthNoWidth in pixels (default: 800)

Implementation Reference

  • This is the main handler implementation for the 'playwright_screenshot' tool. It captures a screenshot of the current page or a specific element using Playwright's screenshot method. Supports options like fullPage, selector, mask, and handles saving to PNG file and storing base64 for MCP resources.
    case "playwright_screenshot": { try { 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; } if (args.mask) { screenshotOptions.mask = await Promise.all( args.mask.map(async (selector: string) => await page!.$(selector)) ); } const screenshot = await page!.screenshot(screenshotOptions); const base64Screenshot = screenshot.toString('base64'); const responseContent: (TextContent | ImageContent)[] = []; // Handle PNG file saving if (args.savePng !== false) { const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `${args.name}-${timestamp}.png`; const downloadsDir = args.downloadsDir || defaultDownloadsPath; // Create downloads directory if it doesn't exist if (!fs.existsSync(downloadsDir)) { fs.mkdirSync(downloadsDir, { recursive: true }); } const filePath = path.join(downloadsDir, filename); await fs.promises.writeFile(filePath, screenshot); responseContent.push({ type: "text", text: `Screenshot saved to: ${filePath}`, } as TextContent); } // Handle base64 storage if (args.storeBase64 !== false && !process.argv.includes('--no-storebase64')) { screenshots.set(args.name, base64Screenshot); server.notification({ method: "notifications/resources/list_changed", }); responseContent.push({ type: "image", data: base64Screenshot, mimeType: "image/png", } as ImageContent); } return { content: responseContent, isError: false, }; } catch (error) { return { content: [{ type: "text", text: `Screenshot failed: ${(error as Error).message}`, }], isError: true, }; } }

Other Tools

Related Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lars-hagen/mcp-playwright-cdp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server