Docs

Docs

UI Snapshots

Failure snapshot extension behavior and the format of server-side component tree output.

TreeOnFailureExtension prints a text representation of the server-side UI component tree when a test fails. Snapshots are disabled by default and enabled with @ExtendWith(TreeOnFailureExtension.class). The output appears alongside the test failure message. It represents Java component state and element attributes, not a browser screenshot or rendered layout.

Reading a Snapshot

A snapshot is a tree showing every component currently in the UI, with its properties and attributes:

Source code
└── UI[]
    └── HelloWorldView[@theme='margin spacing']
        ├── TextField[label='Your name', value='', @style='align-self:flex-end']
        └── Button[caption='Say hello', @style='align-self:flex-end']

Each line represents a component. The information in brackets tells you about its state:

  • Component type — the class name at the start of each line (e.g., TextField, Button).

  • Properties — server-side values like label, value, caption, and opened. These reflect the component’s Java API state.

  • Attributes — prefixed with @ (e.g., @class, @style, @theme). These are the HTML element attributes set on the component.

  • Nesting — the tree structure shows parent-child relationships, matching how components are added to layouts in your code.

For a worked example, see Debug a Failing Browserless Test.

For the procedures previously covered here, see the Building Apps guide.

99487CB3-54AB-4C0A-8A46-926A527EB381

Updated –