get_computed_styles

Instructions

Implementation Reference

• src/tools/browser/inspection/get_computed_styles.ts:52-164 (handler)

  The execute() method that performs the tool logic: parses properties, selects the element via locator, evaluates computed CSS styles in the browser, groups them by category (Layout, Visibility, Spacing, Typography, Other), and returns the formatted text response.

    async execute(args: { selector: string; properties?: string }, context: ToolContext): Promise<ToolResponse> {
      return this.safeExecute(context, async (page) => {
        // Parse properties parameter
        const properties = args.properties
          ? args.properties.split(',').map(p => p.trim())
          : this.DEFAULT_PROPERTIES;
  
        // Use standard element selection with visibility preference
        const locator = await this.createScopedLocator(page, args.selector);
        const { element, elementIndex, totalCount } = await this.selectPreferredLocator(locator, {
          originalSelector: args.selector,
        });
  
        // Format selection warning if multiple elements matched
        const warning = await this.formatElementSelectionInfo(
          args.selector,
          elementIndex,
          totalCount
        );
  
        // Get element tag and selector info
        const elementInfo = await element.evaluate((el) => {
          const attrs: string[] = [];
          const tag = el.tagName.toLowerCase();
          if (el.id) attrs.push(`#${el.id}`);
          if (el.className && typeof el.className === 'string') {
            const classes = el.className.split(' ').filter(c => c).slice(0, 2);
            if (classes.length) attrs.push(`.${classes.join('.')}`);
          }
          const testId = el.getAttribute('data-testid') || el.getAttribute('data-test') || el.getAttribute('data-cy');
          if (testId) attrs.push(`data-testid="${testId}"`);
  
          return {
            tag,
            display: attrs.length ? `<${tag} ${attrs.join(' ')}>` : `<${tag}>`
          };
        });
  
        // Get computed styles
        const styles = await element.evaluate((el, props) => {
          const computed = window.getComputedStyle(el);
          const result: Record<string, string> = {};
          props.forEach((prop: string) => {
            result[prop] = computed.getPropertyValue(prop);
          });
          return result;
        }, properties);
  
        // Group styles by category
        const layout: string[] = [];
        const visibility: string[] = [];
        const spacing: string[] = [];
        const typography: string[] = [];
        const other: string[] = [];
  
        const layoutProps = ['display', 'position', 'width', 'height', 'top', 'left', 'right', 'bottom'];
        const visibilityProps = ['opacity', 'visibility', 'z-index', 'overflow', 'overflow-x', 'overflow-y'];
        const spacingProps = ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
                              'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
        const typographyProps = ['font-size', 'font-weight', 'font-family', 'color', 'line-height', 'text-align'];
  
        Object.entries(styles).forEach(([prop, value]) => {
          const line = `  ${prop}: ${value}`;
          if (layoutProps.includes(prop)) {
            layout.push(line);
          } else if (visibilityProps.includes(prop)) {
            visibility.push(line);
          } else if (spacingProps.includes(prop)) {
            spacing.push(line);
          } else if (typographyProps.includes(prop)) {
            typography.push(line);
          } else {
            other.push(line);
          }
        });
  
        // Build output
        const sections: string[] = [];
  
        if (warning) {
          sections.push(warning.trim());
        }
  
        sections.push(`Computed Styles: ${elementInfo.display}\n`);
  
        if (layout.length) {
          sections.push('Layout:\n' + layout.join('\n'));
        }
        if (visibility.length) {
          sections.push('Visibility:\n' + visibility.join('\n'));
        }
        if (spacing.length) {
          sections.push('Spacing:\n' + spacing.join('\n'));
        }
        if (typography.length) {
          sections.push('Typography:\n' + typography.join('\n'));
        }
        if (other.length) {
          sections.push('Other:\n' + other.join('\n'));
        }
  
        return {
          content: [
            {
              type: 'text',
              text: sections.join('\n\n')
            }
          ],
          isError: false
        };
      });
    }
  }

• src/tools/browser/inspection/get_computed_styles.ts:28-43 (schema)

  Input schema for the tool: accepts 'selector' (required string) and 'properties' (optional comma-separated string of CSS properties).

      inputSchema: {
        type: "object",
        properties: {
          selector: {
            type: "string",
            description: "CSS selector, text selector, or testid shorthand (e.g., 'testid:submit-button', '#main')"
          },
          properties: {
            type: "string",
            description: "Comma-separated list of CSS properties to retrieve (e.g., 'display,width,color'). If not specified, returns common layout properties: display, position, width, height, opacity, visibility, z-index, overflow, margin, padding, font-size, font-weight, color, background-color"
          }
        },
        required: ["selector"],
      },
    };
  }

• src/tools/browser/register.ts:53-104 (registration)

  Tool registration: GetComputedStylesTool is listed in the BROWSER_TOOL_CLASSES array (line 88) which registers it as an available browser tool.

  export const BROWSER_TOOL_CLASSES: ToolClass[] = [
    // Navigation (5)
    NavigateTool,
    GoHistoryTool,
    ScrollToElementTool,
    ScrollByTool,
  
    // Lifecycle (2)
    CloseTool,
    SetColorSchemeTool,
  
    // Interaction (7)
    ClickTool,
    FillTool,
    SelectTool,
    HoverTool,
    UploadFileTool,
    DragTool,
    PressKeyTool,
  
    // Content (3)
    ScreenshotTool,
    GetTextTool,
    GetHtmlTool,
  
    // Inspection (10)
    InspectDomTool,
    GetTestIdsTool,
    QuerySelectorTool,
    FindByTextTool,
    CheckVisibilityTool,
    CompareElementAlignmentTool,
    InspectAncestorsTool,
    ElementExistsTool,
    MeasureElementTool,
    GetComputedStylesTool,
  
    // Evaluation (1)
    EvaluateTool,
  
    // Console (2)
    GetConsoleLogsTool,
    ClearConsoleLogsTool,
  
    // Network (2)
    ListNetworkRequestsTool,
    GetRequestDetailsTool,
  
    // Waiting (2)
    WaitForElementTool,
    WaitForNetworkIdleTool,
  ];

• src/tools/browser/register.ts:37-37 (registration)

  Import statement that brings GetComputedStylesTool into the registration module.

  import { GetComputedStylesTool } from './inspection/get_computed_styles.js';

• src/tools/browser/inspection/get_computed_styles.ts:45-50 (helper)

  Default list of CSS properties used when the user does not specify custom properties.

  private readonly DEFAULT_PROPERTIES = [
    'display', 'position', 'width', 'height',
    'opacity', 'visibility', 'z-index', 'overflow',
    'margin', 'padding',
    'font-size', 'font-weight', 'color', 'background-color'
  ];