Skip to main content
Glama
devskido

Playwright MCP Server

by devskido

playwright_screenshot

Capture web page screenshots or specific elements for documentation, testing, or content capture using browser automation.

Instructions

Take a screenshot of the current page or a specific element

Input Schema

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

Implementation Reference

  • ScreenshotTool class with execute method that performs the screenshot using Playwright's page.screenshot, saves to file and optionally stores base64
    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;
      }
    } 
  • Tool definition including name, description, and input schema for 'playwright_screenshot'
      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"],
      },
    },
  • Dispatch in handleToolCall switch statement that calls the screenshot tool handler
    case "playwright_screenshot":
      return await screenshotTool.execute(args, context);
  • Instantiation of ScreenshotTool instance
    if (!screenshotTool) screenshotTool = new ScreenshotTool(server);
  • Inclusion in BROWSER_TOOLS array to trigger browser initialization
    "playwright_screenshot",

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure but only states the basic action without details on permissions, side effects, output format (e.g., file vs. base64), or error handling. It mentions 'take a screenshot' but doesn't clarify if this is a read-only operation or has other behavioral traits like rate limits or dependencies.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose without unnecessary words. Every part earns its place by specifying the action and scope, making it appropriately sized for the tool's complexity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (8 parameters, no output schema, no annotations), the description is incomplete. It lacks information on output format, behavioral context, and usage guidelines, which are crucial for an AI agent to invoke it correctly without structured support from annotations or output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing detailed descriptions for all 8 parameters. The description adds no parameter-specific information beyond implying a 'selector' for element targeting, which is already covered in the schema. This meets the baseline of 3 since the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('take a screenshot') and the target ('current page or a specific element'), which provides a specific verb+resource combination. However, it doesn't distinguish this tool from potential screenshot alternatives among its siblings (like playwright_save_as_pdf), though no direct screenshot sibling exists in the provided list.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, prerequisites, or context for invocation. It lacks explicit when/when-not statements or references to sibling tools, leaving usage entirely implicit based on the action described.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.