Antwerp UI Test Automation Guide

When automating tests, one of the challenges is to keep the test resilient to code changes. Using data attributes can help you with that, by creating unique selectors for your tests.

Using unique data attributes with Antwerp UI

It's not possible to add unique data attributes to the Antwerp UI component library for the simple reason that the attribute won't be unique anymore when you use the component multiple times on the same page.

But in your app you can simply add a data attribute to each individual Antwerp UI component so you can target the component that you want to test.

Example

The following example shows the Antwerp UI datepicker with the unique qa data attribute id-1234.

<aui-datepicker
    [attr.data-qa]="id-1234"
    autocomplete="off"
    formControlName="inputDate"
    id="input-datepicker"
    name="input-datepicker"
    placeholder="dd/mm/jjjj"
    [range]="dateRange">
</aui-datepicker>

Which will result in:

<aui-datepicker data-qa="id-1234" autocomplete="off" formcontrolname="inputDate" ...>
...
</aui-datepicker>

Branding classes

Since you probably want to target a specific element or a subcomponent, selecting the parent component won't be enough. You can however target these elements and subcomponents based on their CSS classes in combination with the unique data attribute of the parent component.

Example

In this example the calendar of the datepicker component can be opened or closed by toggling the <span> tag, which is nested in the datepicker with data attribute data-qa="id-1234" and CSS class aui-flyout-action.

<aui-datepicker ... data-qa="id-1234" ...>
...
    <div ...>
        <input type="text" name="input-datepicker" ...>
        <span class="aui-flyout-action ...">...</span>
    </div>
...
</aui-datepicker>

Overview

To help you locate a specific element of a component, we've made an overview of all Antwerp UI components and the CSS classes they use. When an element doesn't have a class set, you can still target it by selecting the element type or its custom attribute.

Component	Class	Element / Attribute	Description
Autocomplete	aui-flyout-action	input	text input field
	aui-selectable-list	ul	selectable list
	m-selectable-list__item	> li	selectable list item
Datepicker	no classname	input	text input field
	aui-flyout-action	span	open/close toggle
	m-datepicker__nav	div	navigation bar
	fa-angle-left	> button > i	previous
	fa-angle-right	> button > i	next
	m-datepicker__title	> button	view toggle
	m-datepicker__calendar	tbody	calendar field
	no classname	> td > button	calendar element, depending on the selected view: day, month, year
Filter (checkbox)	a-list	ul	filter list
	no classname	> li	filter element
	no classname	> > input	checkbox
Filter (input)	no classname	input	text input field
Filter (select)	no classname	> select	select
Flyout	aui-flyout-action	button	open/close toggle
	m-flyout__content	content	content of the flyout
	no classname	auiflyoutclose	close button in content field
Footer	aui-footer	footer	footer wrapper
	o-footer	> div	subfooter wrapper
Header	o-header	header	header wrapper
	o-header__menu-items	> div	header element wrapper
	o-header__menu-item	> > div	header element
Logo	o-header__logo	a	logo link
Map	o-leaflet	div	map component wrapper
	o-leaflet__content	> div	map pane
	o-leaflet__wrapper	> div	Leaflet map wrapper
	o-leaflet__controls	> > div	Leaflet action buttons wrapper
Modal	m-overlay	aui-modal-overlay	overlay
	m-modal	> div	modal
	m-modal__header	> > div	modal header wrapper
	m-modal__close	> > > button	close button
	m-modal__footer	> > div	modal footer wrapper
	no classname	> > > button	modal action button(s)
Pagination (default)	m-pagination	ul	pagination wrapper
	m-pagination__prev	> li	element to previous page
	m-pagination__next	> li	element to next page
Pagination (items per page)	aui-items-per-page	div	pagination wrapper
	no classname	> select	select
Range slider	m-range-slider__inner	div	range slider selection wrapper
	m-range-slider__bar	> div	range slider selection bar
	m-range-slider__handle	> span	range slider selection button
Search filter	aui-flyout-action	button	open/close toggle
	m-search-filter__search	button	open/close toggle
	no classname	button	open/close toggle
	m-search-filter__results-title	button	open/close toggle
	a-list	> ul	list
	m-search-filter__results-item	> > li	list item
	a-input__checkbox	> > > div	checkbox wrapper
	no classname	> > > > input	checkbox
Selectable list	m-selectable-list	ul	selectable list
	m-selectable-list__item	li	selectable list item
Table	a-table	table	table wrapper
Time picker	m-timepicker	div	select boxes wrapper
	no classname	formcontrolname hours / minutes	hour / minute selection
Upload	m-upload	div	upload input field wrapper
	m-upload__input	> input	input field
	a-upload-queue__wrapper	aui-upload-queue	files to upload and upload button wrapper
	m-upload__files	> ul	list of files to upload
	m-upload__filename	> > span	name of file to upload
	m-upload__error	> > span	error message for faulty file
	a-button	> button	upload button