We started using Cypress.io in one of our modern application built in React, and the journey with Cypress is incredible so far.
I’m working on a series of posts on my journey with Cypress and how I’m using it for end-to-end testing.
Last week, I saw this awesome open-source sample repository shared by Cypress.io team. This repo contains a test app and example tests using lots of recommended practices. I liked using The custom command for element selection as one of the recommended practices implemented in this repository https://github.com/upgundecha/cypress-realworld-app/blob/develop/cypress/support/commands.ts

We’re using a data-testid
attribute to select elements and perform actions on them:

The above code works great, but making a shorthand command like getBySelLike
reads better than using cy.get()
. I refactored the tests and implemented a custom command from the example and named as getByDataTestSel
to select elements as shown in below code snippet:

This custom command makes tests more readable and offers specific API to select an element which have data-test*
attribute. You can find more details in Cypress documentation on how to implement custom commands.
More on Cypress.io soon.
Happy Testing!