data attributes

Naming

We use data attributes to identify elements in a webpage (independent of UI styling/CSS classes/...). These data attributes are prefixed with uie (for UI element). There are different types: data-uie-name, data-uie-value and data-uie-uid.

• The data-uie-name is mandatory for each element
• The data-uie-value is optional and represents the current value of an element
• The data-uie-status is optional and represents the current status of an element (e.g. Sent, Unsent, Incoming, Connected, etc.)
• The data-uie-uid is also optional and shows the unique ID for an element (like conversation ID, user ID, ...)

Note: If the selection by data-uie-name needs considerably more time than a selection by ID, then we go for an ID.

Info: We always strive to have short selection patterns for UI elements. A perfect selection pattern is short, does not include the element type (like div, input or li) and uses just the data-uie-name (or id). If QA notices that it is not possible to access an item via this manner, then they can contact the web team to get an unique identifier (data-attribute) for that particular element.

Deployment

The data attributes will only be present in the staging enviroment. The data-ui-* delcarations will be removed from the HTML code in production (there will be an approach to do this automatically).

tl;dr

banner: banner-call
click: do-sign-in
input: enter-email
label: label-call-outgoing
list: list-participants
list item: item-conversation
modal: modal-about
navigation: go-password-reset
visual: status-silenced

Explanation

• All elements which can be clicked are named after actions, like do-sign-in.
• Everything where information can be filled in, starts with enter-.
• Elements (multiple) in lists start with item-
• Elements that are used to navigate are named by the target 'go-password-reset'
• Elements which are not clickable and just represent a visual state, start with status-
• If a data-uie attribute is only used to locate an element, then its prefix is element-

Examples

Conversation in conversation list

data-uie-name="item-conversation"
data-uie-uid="96e1ad0d-23fc-478c-aba2-e8d5107e9956"
data-uie-value="ω Club Wire"

Message in conversation

data-uie-name="item-message"
data-uie-uid="1c0a.800122000a54004c"
data-uie-status="unsent"
data-uie-value="The new ping sound would be wayyyy to bright for that IMO"

Sign In button

data-uie-name="do-sign-in"
data-uie-uid="" # not present
data-uie-value="" # not present

Wishlist for data-uie elements

• Google Sheet (wire.com)