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!
