---
title: Administration interface UI tests
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

UI tests, or user interface tests, are a type of software testing that checks whether the user interface of an application or system behaves as expected.

UI tests can be performed manually or automated. Manual testing involves a human tester going through individual scenarios in the application's user interface, and interacting with the controls and elements to verify their behavior. Automated testing, on the other hand, involves using software tools to automate the testing process.

This page focuses on the automated aspect of UI testing in Xperience, specifically in the administration interface. Writing UI tests is a good practice when introducing customizations or changes to the administration UI. Failing tests can help discover incorrect behavior early in development and mitigate regression in existing functionality.

## UI test support in the admin UI

To facilitate the creation of UI tests, HTML elements in the admin UI have a `data-testid` attribute that contains a static identifier of the component. This identifier is identical for each instance of the same component on a page. For example:

![Example of the data-testid attribute](https://docs.kentico.com/docsassets/documentation/administration-interface-ui-tests/UItests_testid.png "Example of the data-testid attribute")

As you can see, all of the application tile components have identical `data-testid` attribute values. This allows UI tests to select desired elements that could otherwise only be identified via a random string generated by React.

> **Note:** While the use of the `data-testid` attribute is supported in the admin UI for testing purposes, we do not guarantee its stability across releases. These attributes may change without notice based on internal development needs.

The `data-testid` attribute is generated via a `dataTestId` prop on Xperience components. Using the `Input` component from `\@kentico/xperience\-admin\-components` as an example:

```js title="Populating data-testid"
import { Input } from '@kentico/xperience-admin-components';

...

<Input markAsRequired={props.required}
                    invalid={props.invalid}
                    label={props.label}
                    value={name}
                    onChange={onNameChange}
                    disabled={props.disabled}
                    dataTestId="cool-input" />
```

The `Input` component when used as shown above, renders with `data-testid="cool-input"`.

### Supported testing flows

The admin UI currently supports only end-to-end (E2E) testing. Other testing strategies, such as _Component testing_, are not officially supported or documented at this time.

## Recommended testing frameworks

We recommend using [Cypress](#cypress) or [Playwright](#playwright)  to UI test the Xperience administration interface.

### Cypress

Cypress is a modern, open-source, JavaScript-based testing framework designed for E2E testing of web applications. See the [Cypress documentation](https://docs.cypress.io/) for a general introduction and overview of the framework.

You can find detailed instructions for [installing Cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) and [writing your first E2E test](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) in their official guides.

### Playwright

Playwright is a modern, open-source framework developed by Microsoft for E2E testing of web applications across multiple browsers. See the [Playwright documentation](https://playwright.dev/) for a general introduction and overview of the framework.

You can find detailed instructions for [installing Playwright](https://playwright.dev/docs/intro) and [writing your first E2E test](https://playwright.dev/docs/writing-tests) in the official documentation.