Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Snapshots in UI Unit Testing

A failing UIUnitTest can return a text representation of the user interface, a “UI snapshot”. The snapshot represents the state of the UI at the moment the test failed.

└── UI[]
    ├── MainLayout[primarySection='drawer']
    │   ├── Header[@class='view-header', @slot='navbar touch-optimized']
    │   │   ├── DrawerToggle[@aria-label='Menu toggle', @class='view-toggle', @theme='contrast']
    │   │   └── H1[text='Hello World', @class='view-title']
    │   ├── Section[@class='drawer-section', @slot='drawer']
    │   │   ├── H2[text='My App', @class='app-name']
    │   │   ├── Nav[@aria-labelledby='views', @class='menu-item-container']
    │   │   │   └── UnorderedList[@class='navigation-list']
    │   │   │       ├── MenuItemInfo[]
    │   │   │       │   └── RouterLink[@class='menu-item-link']
    │   │   │       │       ├── LineAwesomeIcon[@class='menu-item-icon la la-globe']
    │   │   │       │       └── Span[text='Hello World', @class='menu-item-text']
    │   │   │       └── MenuItemInfo[]
    │   │   │           └── RouterLink[@class='menu-item-link']
    │   │   │               ├── LineAwesomeIcon[@class='menu-item-icon la la-file']
    │   │   │               └── Span[text='About', @class='menu-item-text']
    │   │   └── Footer[@class='footer']
    │   └── HelloWorldView[@theme='margin spacing']
    │       ├── TextField[label='Your name', value='', @style='align-self:flex-end']
    │       └── Button[caption='Say hello', @style='align-self:flex-end']
    └── Notification[duration='5000', opened='true', position='bottom-start']

Enabling UI Snapshots

UI snapshots are not enabled by default. You need to enable them individually for each test.

Add the @ExtendWith(TreeOnFailureExtension.class) to the test class.

@ExtendWith(TreeOnFailureExtension.class)
class HelloWorldViewTest extends UIUnitTest {
    ...
}

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