cypress-data-selectors

cypress-data-selectors

Adds support for shorthand data-* selectors.

npm i -D cypress-data-selectors

Configuration

// in support/commands.(js|tsx)
import registerDataSelectors from 'cypress-data-selectors'
// register the plugin by providing the key used for your data-* selectors
// (people usually use "cy", "e2e" or "test")
registerDataSelectors('test')

Usage

cy.get('[data-cy="Foo-Bar--Baz"]')  // normal way
  .get('=Foo-Bar--Baz')             // shortened
  .get('^=Foo')                     // starts with
  .get('*=Bar')                     // contains
  .get('$=Baz')                     // ends with