Cypress ESLint Plugin

An ESLint plugin for your Cypress tests.

Note: If you installed ESLint globally then you must also install eslint-plugin-cypress globally.

Installation

Prerequisites: ESLint v9. Lower versions are no longer supported.

1npm install eslint eslint-plugin-cypress --save-dev

or

1yarn add eslint eslint-plugin-cypress --dev

Usage

ESLint v9 uses a Flat config file format with filename eslint.config.*js by default. This plugin no longer supports the use of a deprecated eslintrc-type config file from previous ESLint versions.

To set up a configuration, add a file eslint.config.mjs to the root directory of your Cypress project and include the following instructions to import the available configurations using:

1import pluginCypress from 'eslint-plugin-cypress'

For backwards compatibility with previous plugin versions 3.3.0 - 4.3.0, the following equivalent deprecated form is also supported. This is planned to be removed in a future major version:

1import pluginCypress from 'eslint-plugin-cypress/flat' # deprecated

Configurations

There are two specific configurations available:

Configuration	Content
configs.globals	defines globals cy, Cypress, expect, assert and chai used in Cypress test specs as well as globals.browser and globals.mocha from globals. There are no default rules enabled in this configuration.
configs.recommended	enables recommended Rules. It includes also configs.global (see above).

Rules

These rules enforce some of the best practices recommended for using Cypress.

💼 Configurations enabled in.
✅ Set in the recommended configuration.

Name	Description	💼
assertion-before-screenshot	require screenshots to be preceded by an assertion
no-assigning-return-values	disallow assigning return values of cy calls	✅
no-async-before	disallow using async/await in Cypress before methods
no-async-tests	disallow using async/await in Cypress test cases	✅
no-chained-get	disallow chain of cy.get() calls
no-debug	disallow using cy.debug() calls
no-force	disallow using force: true with action commands
no-pause	disallow using cy.pause() calls
no-unnecessary-waiting	disallow waiting for arbitrary time periods	✅
no-xpath	disallow using cy.xpath() calls
require-data-selectors	require data-* attribute selectors
unsafe-to-chain-command	disallow actions within chains	✅

Usage examples

In the following sections, different examples of possible configuration file contents are given, together with some brief explanations. Adapt these examples according to your needs.

Cypress

All rules are available by importing from eslint-plugin-cypress and can be individually activated.

• cypress/unsafe-to-chain-command is activated and set to error

1import pluginCypress from 'eslint-plugin-cypress'
2export default [
3  {
4    plugins: {
5      cypress: pluginCypress
6    },
7    rules: {
8      'cypress/unsafe-to-chain-command': 'error'
9    }
10  }
11]

Cypress recommended

The eslint-plugin-cypress recommended rules configs.recommended are activated, except for

• cypress/no-unnecessary-waiting which is set to off

1import pluginCypress from 'eslint-plugin-cypress'
2export default [
3  pluginCypress.configs.recommended,
4  {
5    rules: {
6      'cypress/no-unnecessary-waiting': 'off'
7    }
8  }
9]

Cypress globals

The configs.globals are activated.

1import pluginCypress from 'eslint-plugin-cypress'
2export default [
3  pluginCypress.configs.globals
4]

Disable rules

You can disable specific rules per file, for a portion of a file, or for a single line. See the ESLint rules documentation. For example ...

Disable the cypress/no-unnecessary-waiting rule for the entire file by placing this at the start of the file:

1/* eslint-disable cypress/no-unnecessary-waiting */

Disable the cypress/no-unnecessary-waiting rule for only a portion of the file:

1it('waits for a second', () => {
2  ...
3  /* eslint-disable cypress/no-unnecessary-waiting */
4  cy.wait(1000)
5  /* eslint-enable cypress/no-unnecessary-waiting */
6  ...
7})

Disable the cypress/no-unnecessary-waiting rule for a specific line:

1it('waits for a second', () => {
2  ...
3  cy.wait(1000) // eslint-disable-line cypress/no-unnecessary-waiting
4  ...
5})

You can also disable a rule for the next line:

1it('waits for a second', () => {
2  ...
3  // eslint-disable-next-line cypress/no-unnecessary-waiting
4  cy.wait(1000)
5  ...
6})

Mocha and Chai

Cypress is built on top of Mocha and Chai. See the following sections for information on using ESLint plugins eslint-plugin-mocha and eslint-plugin-chai-friendly together with eslint-plugin-cypress.

Mocha .only and .skip

During test spec development, Mocha exclusive tests .only or Mocha inclusive tests .skip may be used to control which tests are executed, as described in the Cypress documentation Excluding and Including Tests. To apply corresponding rules, you can install and use eslint-plugin-mocha@^11 plugin version or above. The rule mocha/no-exclusive-tests detects the use of .only and the mocha/no-pending-tests rule detects the use of .skip.

Cypress and Mocha recommended

eslint-plugin-mocha@^11 is added to the example Cypress recommended. This version of the plugin supports only flat file configurations with the option configs.recommended.

The settings for individual mocha rules from the configs.recommended option are changed.

• mocha/no-exclusive-tests and mocha/no-pending-tests are set to error instead of warn
• mocha/no-mocha-arrows is set to off instead of error

1npm install eslint-plugin-mocha@^11 --save-dev

1import pluginMocha from 'eslint-plugin-mocha'
2import pluginCypress from 'eslint-plugin-cypress'
3export default [
4  pluginMocha.configs.recommended,
5  pluginCypress.configs.recommended,
6  {
7    rules: {
8      'mocha/no-exclusive-tests': 'error',
9      'mocha/no-pending-tests': 'error',
10      'mocha/no-mocha-arrows': 'off',
11      'cypress/no-unnecessary-waiting': 'off'
12    }
13  }
14]

Cypress and Chai recommended

Using an assertion such as expect(value).to.be.true can fail the ESLint rule no-unused-expressions even though it's not an error in this case. To fix this, you can install and use eslint-plugin-chai-friendly.

eslint-plugin-chai-friendly is combined with the Cypress plugin eslint-plugin-cypress.

The recommended rules for both plugins are used: pluginCypress.configs.recommended and pluginChaiFriendly.configs.recommendedFlat:

1npm install eslint-plugin-chai-friendly@^1.0.1 --save-dev

1import pluginCypress from 'eslint-plugin-cypress'
2import pluginChaiFriendly from 'eslint-plugin-chai-friendly'
3export default [
4  pluginCypress.configs.recommended,
5  pluginChaiFriendly.configs.recommendedFlat,
6  {
7    rules: {
8      'cypress/no-unnecessary-waiting': 'off',
9    },
10  }
11]

Contributing

Please see our Contributing Guideline which explains how to contribute rules or other fixes and features to the repo.