Implementation:Microsoft Playwright AriaSnapshot

Knowledge Sources	Microsoft_Playwright
Domains	Accessibility, ARIA Testing
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for capturing and comparing ARIA accessibility tree snapshots provided by the Playwright library.

Description

The `ariaSnapshot.ts` module provides types and utilities for working with ARIA (Accessible Rich Internet Applications) tree snapshots. It defines comprehensive type definitions including `AriaRole` (covering all WAI-ARIA 1.2 role definitions), `AriaProps` (checked, disabled, expanded, active, level, pressed, selected), `AriaBox` (visibility and layout information), and `AriaNode` (the full tree node combining role, name, children, properties, and pointer event reception). The module provides comparison functions (`ariaNodesEqual`, `ariaPropsEqual`) for testing whether two ARIA tree snapshots are equivalent, serialization/rendering functions for converting ARIA trees to YAML-like text representations, and parsing functions for reading ARIA snapshot templates. This is an isomorphic module that works in both Node.js and browser environments.

Usage

Use this module when implementing or testing accessibility-related features in Playwright, including the `expect(locator).toMatchAriaSnapshot()` assertion, ARIA tree inspection, and accessibility auditing.

Code Reference

Source Location

• Repository: Microsoft_Playwright
• File: packages/playwright-core/src/utils/isomorphic/ariaSnapshot.ts

Signature

export type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | /* ... all WAI-ARIA roles */ | 'treeitem';

export type AriaProps = {
  checked?: boolean | 'mixed';
  disabled?: boolean;
  expanded?: boolean;
  active?: boolean;
  level?: number;
  pressed?: boolean | 'mixed';
  selected?: boolean;
};

export type AriaNode = AriaProps & {
  role: AriaRole | 'fragment' | 'iframe';
  name: string;
  ref?: string;
  children: (AriaNode | string)[];
  box: AriaBox;
  receivesPointerEvents: boolean;
  props: Record<string, string>;
};

export function ariaNodesEqual(a: AriaNode, b: AriaNode): boolean;
export function ariaPropsEqual(a: AriaProps, b: AriaProps): boolean;

Import

import { AriaNode, AriaRole, AriaProps, ariaNodesEqual } from '../utils/isomorphic/ariaSnapshot';

I/O Contract

Inputs

Name	Type	Required	Description
a	AriaNode	Yes	First ARIA node tree for comparison
b	AriaNode	Yes	Second ARIA node tree for comparison
snapshot text	string	Yes	YAML-like text representation for parsing

Outputs

Name	Type	Description
equal	boolean	Whether two ARIA nodes/trees are structurally equal
AriaNode	AriaNode	Parsed ARIA tree from text representation
snapshot text	string	Serialized ARIA tree as YAML-like text

Usage Examples

import { ariaNodesEqual, AriaNode } from 'playwright-core/lib/utils/isomorphic/ariaSnapshot';

const nodeA: AriaNode = {
  role: 'button',
  name: 'Submit',
  children: [],
  box: { visible: true, inline: false },
  receivesPointerEvents: true,
  props: {},
};

const nodeB: AriaNode = {
  role: 'button',
  name: 'Submit',
  children: [],
  box: { visible: true, inline: false },
  receivesPointerEvents: true,
  props: {},
};

const isEqual = ariaNodesEqual(nodeA, nodeB); // true

Related Pages

• Environment:Microsoft_Playwright_Node_Runtime_Environment