Targeting the element by tag, class or id is very volatile and highly subject to
change. We may swap out the element, refactor CSS and update IDs, or add or remove classes that affect the style of the element.
Instead, adding the data-cy attribute to the element gives us a targeted
selector that's only used for testing.
The data-cy attribute will not change any CSS style or a JavaScript behavior, meaning
it's not coupled to the behavior or styling of an element.
Additionally, it makes it clear to everyone that this element is used directly
by the test code.
Conventions for adding data-cy
There are no particular conventions for adding data-cy, but here in BigBinary
we have set our own conventions for better code readability.
data-cy must be added in a particular format
Pass data-cy as a prop
When we use cy as an attribute we use hyphen i.e. data-cy. But, in a react
application we need to pass it as a prop to another component. In some cases,
data-cy might not work, in that case we can use dataCy:
Use lowercase
Everything should be in lowercase while adding data-cy. e.g. Consider we
want to add data-cy to the application's icon, say AceInvoiceIcon:
Adding data-cy for different elements
data-cy for labels e.g. Adding data-cy to a label, say "Email" label:
data-cy for links e.g. Adding data-cy to any link, say signup link:
data-cy for text fields e.g. Adding data-cy for email text field on login
page:
data-cy for checkboxes e.g. Adding data-cy for 'remember me' checkbox on
login page:
data-cy for radio buttons e.g Adding data-cy for the radio button for the
role of a member:
data-cy for dropdown lists e.g. Adding data-cy for dropdown lists of
countries:
data-cy for buttons e.g. Adding data-cy for submit details button on login
page:
e.g. Adding data-cy for delete button to delete a team member:
Handling special case
Sometimes the element is very common throughout the whole application, in
such cases data-cy values for these elements can be kept in
selectors/common. e.g. In neeto products, the heading selector is very
common part for different pages in the application. Hence, the data-cy
value for this element can be generic.
Using data-cy with neetoUI library elements
In neeto applications, we are using neetoUI component library.
In neetoUI, data-cy can be added or already added to most of the elements.
However, it uses some external libraries as well. In such cases, we can't add
data-cy to those elements and we can use the selectors available for that
element. e.g. The dropdowns in the neeto are custom dropdowns and data-cy
cannot be added to such elements.
We should try to use data-cy whenever possible.