Cypress ESLint Plugin
An ESLint plugin for your Cypress tests.
Note: If you installed ESLint globally then you must also install eslint-plugin-cypress-best-practices
globally.
Installation
npm install eslint-plugin-cypress-best-practices --save-dev
or
yarn add eslint-plugin-cypress-best-practices --dev
Usage
Add an .eslintrc.json
file to your cypress
directory with the following:
{
"plugins": [
"cypress-best-practices"
]
}
You can add rules:
{
"rules": {
"cypress-best-practices/enforce-page-object-model": "error",
"cypress-best-practices/no-duplicate-selectors": "error",
"cypress-best-practices/no-simple-selectors": "warn",
}
}
enforce-page-object-model
The cy.get command should be limited to page object files, any cy.get with a string literal will be detected with some minor exclusions.
it('use literal string in cy.get', () => {
...
cy.get('#form > button:nth-child(1)').click()
...
})
no-duplicate-selectors
This applies to the page object model, when a return expression contains a cy.get() action, it will compared with other return expressions to avoid duplicates.
class HomePage {
get loginButton() {
return cy.get('#form > .actions > nth-child(1)');
}
get loginBtn() {
return cy.get('#form > .actions > nth-child(1)');
}
}
no-simple-selectors
Any literal string selector that is only alphanumeric will be flagged.
class HomePage {
get loginButton() {
return cy.get('#form > .actions > nth-child(1)');
}
get productImage() {
return cy.get('img');
}
}
Contribution Guide
To add a new rule:
- Fork and clone this repository
- Generate a new rule
- Write test scenarios then implement logic
- Add the rule to this README
- Create a PR
Use the following commit message conventions: https://github.com/semantic-release/semantic-release#commit-message-format