Overriding cy.get with a custom command to default to using data-cy?

Question

I'm trying to use data-cy as much as I can in my code.

It's slightly tedious having to write cy.get('[data-cy=name]') all the time.

Is it possible to create a custom command that would by default try and find a data-cy first.

So if I wrote cy.get('name') it would try and find data-cy="name" on the page, if I used cy.get('.class') it would try and find a class with class on the page, if I used cy.get('#id') it would try and find an id with 'id` on the page?

Basically, I just want cy.get() to default to trying to find data-cy first and then work as it originally does if I pass in anything else to it.

Answer 1

It's a nifty idea, but you are leaning towards conditional testing if you try to do all-in-one.

I would have a custom command for data-cy and stick with cy.get() for the other selectors

Cypress.Commands.add('attr', { prevSubject: false }, (attr) => {
  return cy.get(`[data-cy="${attr}"]`)
})

cy.attr('name')

Answer 2

Selecting UI elements based on an attribute, such as data-cy, is even described in the Cypress best practices section here.

There is also an example on how to create a custom command to have a common way for selecting the elements here.

The examples look like:

// cypress/support/commands.ts

Cypress.Commands.add('getBySel', (selector, ...args) => {
  return cy.get(`[data-cy=${selector}]`, ...args)
})

Cypress.Commands.add('getBySelLike', (selector, ...args) => {
  return cy.get(`[data-cy*=${selector}]`, ...args)
})

The first command looks for an exact data-cy attribute match. The second one looks for elements containing a data-cy like the provided argument.

Answer 3

If you add Cypress Testing Library to your project you get a bunch of commands around the data-testid attribute

ByTestId - find by data-testid attribute

• getByTestId
• queryByTestId
• getAllByTestId
• queryAllByTestId
• findByTestId
• findAllByTestId

See Cheatsheet for differences.

If you are tired of typing cy.get('[data-cy=name]'), then this profusion of selection methods may vex you even more.

The interesting part is the discussion about what selection methods are best for testing.

See Priority

Based on the Guiding Principles, your test should resemble how users interact with your code (component, page, etc.) as much as possible.

Interestingly, they place *ByTestId at the bottom of the list

The user cannot see (or hear) these, so this is only recommended for cases where you can't match by role or text or it doesn't make sense (e.g. the text is dynamic).