> Markdown version of [UI Snapshots](https://vaadin.com/docs/next/flow/testing/browserless/snapshots). Section index: [llms.txt](https://vaadin.com/docs/next/flow/llms.txt)

# UI Snapshots

`TreeOnFailureExtension` publishes 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 tree is published as a JUnit report entry, which tools such as the JUnit console launcher show with the failure; Maven Surefire doesn’t display report entries. A failed component query includes the same tree in its error message, with or without the extension. It represents Java component state and element attributes, not a browser screenshot or rendered layout.

## <a id="reading-a-snapshot"></a>Reading a Snapshot

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

```
└── MockedUI[]
    └── HelloWorldView[@theme='spacing']
        ├── TextField[label='Your name', value='', manualValidation='true']
        └── Button[caption='Say hello']
            └── Text[text='Say hello']
```

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](https://vaadin.com/docs/next/building-apps/testing/browserless/debug-tests.md).

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