feat(rule): add 'require-data-selectors' rule

[sandeepbaldawa]

Goal :- Add best practices rule related to https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements

Testing:- Added few unit tests

npm run test require-data-selectors

> eslint-plugin-cypress@0.0.0-development test /Users/sb/contri_sandeep/eslint-plugin-cypress
> jest "require-data-selectors"

 PASS  tests/lib/rules/require-data-selectors.js
  no-dynamic-id-classes
    valid
      ✓ cy.get('[data-cy=submit]').click() (40ms)
      ✓ cy.get('[data-QA=submit]') (2ms)
      ✓ cy.clock(5000) (1ms)
      ✓ cy.scrollTo(0, 10) (1ms)
      ✓ cy.tick(500) (1ms)
    invalid
      ✓ cy.get('[daedta-cy=submit]').click() (3ms)
      ✓ cy.get('[d-cy=submit]') (1ms)
      ✓ cy.get(".btn-large").click() (2ms)
      ✓ cy.get(".btn-.large").click() (1ms)
      ✓ cy.get(".a") (1ms)

[kuceb]

I think this would be better named no-brittle-selectors, since that is its purpose.

I like how it is not part of the recommended rules, since some projects do have valid use cases for them; however it could be enabled in the default if it's set to warn error level.

[kuceb]

I know this doesn't do anything, but should be false here

[sandeepbaldawa]

Thanks, changed

[chrisbreiding]

@bkucera What about calling it something like require-data-selectors, since that's what it basically doing?

[sandeepbaldawa]

Ready for a re-review 🙇

the author has addressed the comments

[bahmutov]

@bkucera could you review this PR again - the author has addressed your comments I think

stale

[chrisbreiding]

🎉 This PR is included in version 2.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Svish]

This new rule should probably be added to the table in the README as well? 🙂
https://github.com/cypress-io/eslint-plugin-cypress#rules

[kuceb]

@Svish good catch, PRs welcome

[LeoWW]

Hi -- there's no way I know of getting this to work with a helper function:

e.g.

export const getTestId = (id: string) => `[data-testid="${id}"]`;

getTestId('headernav')

will there be functionality to support this?

thanks!