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-strictSetup – 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"