Playwright MCP Server

Get Accessibility Tree Snapshot

browser_snapshot

Capture accessibility tree snapshots for web elements to enable LLM-friendly identification and interaction during web automation tasks.

Instructions

Get accessibility tree snapshot for LLM-friendly element identification

Input Schema

TableJSON Schema

Name	Required	Description	Default
`selector`	No

Implementation Reference

src/server.ts:337-478 (handler)

Core handler function for 'browser_snapshot' tool. Captures accessibility tree snapshot of the current page or specified element using Playwright's page.evaluate to extract ARIA attributes, roles, names, states, and builds a hierarchical tree structure for LLM-friendly page understanding.

async (params: any) => {
  try {
    const input = z.object({
      selector: z.string().optional()
    }).parse(params);
    await this.playwright.ensureConnected();
    
    const page = this.playwright.getPage();
    
    // Get the accessibility tree
    let snapshot;
    if (input.selector) {
      // Get accessibility snapshot for specific element
      const element = await page.locator(input.selector);
      snapshot = await element.locator('xpath=.').first().evaluate(async (el) => {
        // Use the browser's accessibility API to get semantic information
        const computedRole = el.getAttribute('role') || el.tagName.toLowerCase();
        const computedName = el.getAttribute('aria-label') || 
                           el.getAttribute('aria-labelledby') || 
                           el.getAttribute('title') || 
                           (el as any).innerText?.trim() || 
                           el.getAttribute('alt') || 
                           el.getAttribute('placeholder') || '';
        
        return {
          role: computedRole,
          name: computedName,
          value: (el as any).value || el.getAttribute('aria-valuenow') || '',
          description: el.getAttribute('aria-describedby') || el.getAttribute('title') || '',
          disabled: el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true',
          expanded: el.getAttribute('aria-expanded') === 'true',
          focused: document.activeElement === el,
          selected: el.getAttribute('aria-selected') === 'true',
          checked: el.getAttribute('aria-checked') || (el as any).checked,
          required: el.hasAttribute('required') || el.getAttribute('aria-required') === 'true',
          readonly: el.hasAttribute('readonly') || el.getAttribute('aria-readonly') === 'true',
          invalid: el.getAttribute('aria-invalid') || (el as any).validity?.valid === false ? 'true' : undefined,
          multiline: el.getAttribute('aria-multiline') === 'true',
          autocomplete: el.getAttribute('autocomplete'),
          placeholder: el.getAttribute('placeholder'),
          tagName: el.tagName.toLowerCase(),
          id: el.id,
          className: el.className,
          text: (el as any).innerText?.trim() || '',
          href: (el as any).href,
          src: (el as any).src
        };
      });
    } else {
      // Get accessibility snapshot for entire page
      snapshot = await page.evaluate(() => {
        function getAccessibilityInfo(element: Element): any {
          if (!element || element.nodeType !== Node.ELEMENT_NODE) return null;
          
          const el = element as HTMLElement;
          const computedRole = el.getAttribute('role') || el.tagName.toLowerCase();
          const computedName = el.getAttribute('aria-label') || 
                             el.getAttribute('aria-labelledby') || 
                             el.getAttribute('title') || 
                             el.innerText?.trim().substring(0, 100) || 
                             el.getAttribute('alt') || 
                             el.getAttribute('placeholder') || '';
          
          // Skip elements with no meaningful content unless they're interactive
          const interactiveRoles = ['button', 'link', 'input', 'select', 'textarea', 'checkbox', 'radio'];
          const isInteractive = interactiveRoles.includes(computedRole) || 
                              el.hasAttribute('onclick') || 
                              el.hasAttribute('href') || 
                              el.tabIndex >= 0;
          
          if (!computedName && !isInteractive && !el.getAttribute('aria-label')) {
            return null;
          }
          
          const info: any = {
            role: computedRole,
            name: computedName,
            tagName: el.tagName.toLowerCase()
          };
          
          // Add important attributes
          if (el.id) info.id = el.id;
          if (el.className) info.className = el.className;
          if ((el as any).value) info.value = (el as any).value;
          if (el.getAttribute('aria-describedby')) info.description = el.getAttribute('aria-describedby');
          if (el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true') info.disabled = true;
          if (el.getAttribute('aria-expanded')) info.expanded = el.getAttribute('aria-expanded') === 'true';
          if (document.activeElement === el) info.focused = true;
          if (el.getAttribute('aria-selected')) info.selected = el.getAttribute('aria-selected') === 'true';
          if (el.getAttribute('aria-checked') || (el as any).checked !== undefined) {
            info.checked = el.getAttribute('aria-checked') || (el as any).checked;
          }
          if (el.hasAttribute('required') || el.getAttribute('aria-required') === 'true') info.required = true;
          if (el.hasAttribute('readonly') || el.getAttribute('aria-readonly') === 'true') info.readonly = true;
          if ((el as any).href) info.href = (el as any).href;
          if (el.getAttribute('placeholder')) info.placeholder = el.getAttribute('placeholder');
          
          // Generate a simple CSS selector for this element
          let selector = el.tagName.toLowerCase();
          if (el.id) {
            selector = `#${el.id}`;
          } else if (el.className) {
            const classes = el.className.trim().split(/\s+/).slice(0, 2).join('.');
            selector = `${selector}.${classes}`;
          }
          info.selector = selector;
          
          // Get children recursively, but limit depth to avoid huge trees
          const children: any[] = [];
          for (let child of Array.from(el.children).slice(0, 20)) { // Limit to first 20 children
            const childInfo = getAccessibilityInfo(child);
            if (childInfo) {
              children.push(childInfo);
            }
          }
          if (children.length > 0) {
            info.children = children;
          }
          
          return info;
        }
        
        return getAccessibilityInfo(document.body);
      });
    }
    
    return {
      content: [{
        type: 'text',
        text: `Accessibility tree snapshot:\n${JSON.stringify(snapshot, null, 2)}`
      }]
    };
  } catch (error) {
    return {
      content: [{
        type: 'text',
        text: `Browser snapshot failed: ${error instanceof Error ? error.message : String(error)}`
      }],
      isError: true
    };
  }
}

src/types.ts:45-47 (schema)
Zod input schema for the browser_snapshot tool, defining an optional selector parameter.
```
export const BrowserSnapshotInputSchema = z.object({
  selector: z.string().optional()
});
```

src/server.ts:328-479 (registration)

Registration of the 'browser_snapshot' tool with the MCP server, specifying metadata, input schema, and handler function.

this.server.registerTool(
  'browser_snapshot',
  {
    title: 'Get Accessibility Tree Snapshot',
    description: 'Get accessibility tree snapshot for LLM-friendly element identification',
    inputSchema: {
      selector: z.string().optional()
    }
  },
  async (params: any) => {
    try {
      const input = z.object({
        selector: z.string().optional()
      }).parse(params);
      await this.playwright.ensureConnected();
      
      const page = this.playwright.getPage();
      
      // Get the accessibility tree
      let snapshot;
      if (input.selector) {
        // Get accessibility snapshot for specific element
        const element = await page.locator(input.selector);
        snapshot = await element.locator('xpath=.').first().evaluate(async (el) => {
          // Use the browser's accessibility API to get semantic information
          const computedRole = el.getAttribute('role') || el.tagName.toLowerCase();
          const computedName = el.getAttribute('aria-label') || 
                             el.getAttribute('aria-labelledby') || 
                             el.getAttribute('title') || 
                             (el as any).innerText?.trim() || 
                             el.getAttribute('alt') || 
                             el.getAttribute('placeholder') || '';
          
          return {
            role: computedRole,
            name: computedName,
            value: (el as any).value || el.getAttribute('aria-valuenow') || '',
            description: el.getAttribute('aria-describedby') || el.getAttribute('title') || '',
            disabled: el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true',
            expanded: el.getAttribute('aria-expanded') === 'true',
            focused: document.activeElement === el,
            selected: el.getAttribute('aria-selected') === 'true',
            checked: el.getAttribute('aria-checked') || (el as any).checked,
            required: el.hasAttribute('required') || el.getAttribute('aria-required') === 'true',
            readonly: el.hasAttribute('readonly') || el.getAttribute('aria-readonly') === 'true',
            invalid: el.getAttribute('aria-invalid') || (el as any).validity?.valid === false ? 'true' : undefined,
            multiline: el.getAttribute('aria-multiline') === 'true',
            autocomplete: el.getAttribute('autocomplete'),
            placeholder: el.getAttribute('placeholder'),
            tagName: el.tagName.toLowerCase(),
            id: el.id,
            className: el.className,
            text: (el as any).innerText?.trim() || '',
            href: (el as any).href,
            src: (el as any).src
          };
        });
      } else {
        // Get accessibility snapshot for entire page
        snapshot = await page.evaluate(() => {
          function getAccessibilityInfo(element: Element): any {
            if (!element || element.nodeType !== Node.ELEMENT_NODE) return null;
            
            const el = element as HTMLElement;
            const computedRole = el.getAttribute('role') || el.tagName.toLowerCase();
            const computedName = el.getAttribute('aria-label') || 
                               el.getAttribute('aria-labelledby') || 
                               el.getAttribute('title') || 
                               el.innerText?.trim().substring(0, 100) || 
                               el.getAttribute('alt') || 
                               el.getAttribute('placeholder') || '';
            
            // Skip elements with no meaningful content unless they're interactive
            const interactiveRoles = ['button', 'link', 'input', 'select', 'textarea', 'checkbox', 'radio'];
            const isInteractive = interactiveRoles.includes(computedRole) || 
                                el.hasAttribute('onclick') || 
                                el.hasAttribute('href') || 
                                el.tabIndex >= 0;
            
            if (!computedName && !isInteractive && !el.getAttribute('aria-label')) {
              return null;
            }
            
            const info: any = {
              role: computedRole,
              name: computedName,
              tagName: el.tagName.toLowerCase()
            };
            
            // Add important attributes
            if (el.id) info.id = el.id;
            if (el.className) info.className = el.className;
            if ((el as any).value) info.value = (el as any).value;
            if (el.getAttribute('aria-describedby')) info.description = el.getAttribute('aria-describedby');
            if (el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true') info.disabled = true;
            if (el.getAttribute('aria-expanded')) info.expanded = el.getAttribute('aria-expanded') === 'true';
            if (document.activeElement === el) info.focused = true;
            if (el.getAttribute('aria-selected')) info.selected = el.getAttribute('aria-selected') === 'true';
            if (el.getAttribute('aria-checked') || (el as any).checked !== undefined) {
              info.checked = el.getAttribute('aria-checked') || (el as any).checked;
            }
            if (el.hasAttribute('required') || el.getAttribute('aria-required') === 'true') info.required = true;
            if (el.hasAttribute('readonly') || el.getAttribute('aria-readonly') === 'true') info.readonly = true;
            if ((el as any).href) info.href = (el as any).href;
            if (el.getAttribute('placeholder')) info.placeholder = el.getAttribute('placeholder');
            
            // Generate a simple CSS selector for this element
            let selector = el.tagName.toLowerCase();
            if (el.id) {
              selector = `#${el.id}`;
            } else if (el.className) {
              const classes = el.className.trim().split(/\s+/).slice(0, 2).join('.');
              selector = `${selector}.${classes}`;
            }
            info.selector = selector;
            
            // Get children recursively, but limit depth to avoid huge trees
            const children: any[] = [];
            for (let child of Array.from(el.children).slice(0, 20)) { // Limit to first 20 children
              const childInfo = getAccessibilityInfo(child);
              if (childInfo) {
                children.push(childInfo);
              }
            }
            if (children.length > 0) {
              info.children = children;
            }
            
            return info;
          }
          
          return getAccessibilityInfo(document.body);
        });
      }
      
      return {
        content: [{
          type: 'text',
          text: `Accessibility tree snapshot:\n${JSON.stringify(snapshot, null, 2)}`
        }]
      };
    } catch (error) {
      return {
        content: [{
          type: 'text',
          text: `Browser snapshot failed: ${error instanceof Error ? error.message : String(error)}`
        }],
        isError: true
      };
    }
  }
);

src/types.ts:70-98 (helper)

Type definition for the accessibility node structure used in the browser_snapshot output tree.

export interface AccessibilityNode {
  role: string;
  name?: string;
  value?: string;
  description?: string;
  keyshortcuts?: string;
  roledescription?: string;
  valuetext?: string;
  disabled?: boolean;
  expanded?: boolean;
  focused?: boolean;
  modal?: boolean;
  multiline?: boolean;
  multiselectable?: boolean;
  readonly?: boolean;
  required?: boolean;
  selected?: boolean;
  checked?: boolean | 'mixed';
  pressed?: boolean | 'mixed';
  level?: number;
  valuemin?: number;
  valuemax?: number;
  autocomplete?: string;
  haspopup?: string;
  invalid?: string;
  orientation?: string;
  children?: AccessibilityNode[];
  selector?: string;
}

src/types.ts:66-66 (schema)
TypeScript input type for browser_snapshot derived from the Zod schema.
```
export type BrowserSnapshotInput = z.infer<typeof BrowserSnapshotInputSchema>;
```

Tool Definition Quality

C2.8/5.0

Behavior2/5

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

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the output is 'LLM-friendly' but doesn't specify format, size limits, or whether it's a read-only operation. For a tool that likely interacts with a browser, this leaves critical behavioral traits undocumented.

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 directly states the tool's purpose without unnecessary words. It's appropriately sized and front-loaded, with every part contributing to understanding the tool's function.

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 complexity of browser interactions and the lack of annotations or output schema, the description is insufficient. It doesn't explain what an 'accessibility tree snapshot' entails, how it's structured, or what the agent can expect as a result, leaving significant gaps for effective tool use.

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

Parameters2/5

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

The input schema has 1 parameter with 0% description coverage. The tool description adds no information about the 'selector' parameter—what it selects, its syntax, or examples. This fails to compensate for the schema's lack of documentation, leaving the parameter's purpose unclear.

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 verb ('Get') and resource ('accessibility tree snapshot'), and specifies the purpose ('for LLM-friendly element identification'). However, it doesn't explicitly differentiate from sibling tools like browser_get_html or browser_take_screenshot, which also retrieve page content but in different formats.

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. It doesn't mention when this snapshot is preferable over HTML or screenshot methods, nor does it specify prerequisites or exclusions. The context is implied through the tool name but not articulated.

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

Install Server

Other Tools

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

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/b3nw/playwright-browserless-mcp'

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