eslint-plugin-cypress-strict

🤘 Opinionated ESLint rules for writing Cypress.io tests 🤘

Installation & Setup

Install

# with NPM
npm i -D eslint-plugin-cypress-strict

# or Yarn
yarn add -D eslint-plugin-cypress-strict

Setup – adjust your .eslintrc

Option A: Via extends – this will add the plugin and use all the rules automatically

"extends": [ "plugin:cypress-strict/recommended" ]

Option B: Add the plugin and list individual rules manually

plugins: [ "cypress-strict" ]
rules: {
  "cypress-strict/»rule name«": "error"
}

Supported Rules

CSS selectors over commands cypress-strict/selectors-over-commands

Prefer whole selectors directly inside cy.get(»selector«) instead of using Cypress commands.

Why? When whole selector is in one string, it's easier to copy-paste it and debug it in Cypress playground / Dev Tools.

😐	🤩
cy.get("button").first()	cy.get("button:first")
cy.get("button").eq(3)	cy.get("button:eq(3)")
cy.get("button").not(".unwanted")	cy.get("button:not(.unwanted)")
cy.get("»modal«").find(»close btn«)	cy.get("»modal« »close btn«")
cy.get("tr").filter(".odd")	cy.get("tr.odd")

Subject-less commands chained directly on cy cypress-strict/subjectless-commands-directly-on-cy

Why? Chained commands can cause impression that they are working with previous results.

cy.get(".parent").get(".child") – Looks like it's selecting .child inside .parent

cy.get("…").wait(5000) - Looks like it's waiting 5s for the element...

"Should be" instead of "should to be" cypress-strict/no-should-to-be

Why? Should to be is incorrect

---

Contributing

🙏 🙏 🙏 Issues/PRs/gratitude is welcome 🙏 🙏 🙏

Development tips

Publish

npx pack publish

Link locally

In this project

npx pack build
cd pkg
yarn link 
cd ..
# after changes
npx pack build

In dependant projects

yarn link "eslint-plugin-cypress-strict"