cypress/require-data-selectors

📝 Require data-* attribute selectors.

Require cy.get to use only selectors that target data-* attributes.

Note: If you use this rule, consider only using the warn error level, since using data-* attribute selectors may not always be possible.

Rule Details

This rule checks the first parameter of each cy.get. It supports template literals, variable (re-)assignments and conditional expressions. For conditionals, all branches must conform to this rule.

Cypress aliases (as defined by cy.as) are always allowed.

Examples of incorrect code for this rule:

cy.get('.a')
cy.get('[daedta-cy=submit]').click()
cy.get('[d-cy=submit]')
cy.get('.btn-large').click()
cy.get('.btn-.large').click()
cy.get(condition ? '[data-cy=submit]' : '.btn-large')

const CLASS_SELECTOR = '.my-class'
cy.get(CLASS_SELECTOR)

const TYPE = 'submit'
const SUBMIT_TEMPLATE = `.${TYPE}`
cy.get(SUBMIT_TEMPLATE)

const MY_SUBMIT_TEMPLATE = SUBMIT_TEMPLATE
cy.get(MY_SUBMIT_TEMPLATE)

Examples of correct code for this rule:

cy.get('[data-cy=submit]').click()
cy.get('[data-QA=submit]')
cy.get(`[data-QA=submit]`)
cy.get(condition ? '[data-cy=submit]' : '[data-QA=submit]')

const ASSESSMENT_SUBMIT = '[data-cy=assessment-submit]'
cy.get(ASSESSMENT_SUBMIT).click()

const TYPE = 'submit'
const SUBMIT_TEMPLATE = `[data-QA=${TYPE}]`
cy.get(SUBMIT_TEMPLATE)

const MY_SUBMIT_TEMPLATE = SUBMIT_TEMPLATE
cy.get(MY_SUBMIT_TEMPLATE)

Further Reading

See the Cypress Best Practices guide.