eslint-plugin-ui-testing

ESLint plugin that helps following best practices when writing UI tests. It supports the following automation tools (in alphabetical order):

• Cypress
• Playwright
• Puppeteer
• TestCafe
• WebdriverIO

Usage

Prerequisite:

• ESLint is installed (npm i eslint --save-dev)

1. Install eslint-plugin-ui-testing:

npm i eslint-plugin-ui-testing --save-dev

2. Add the ui-testing plugin to the .eslintrc configuration file.

{
"plugins": ["ui-testing"]
}

3. Configure the rules as follows by using the recommended ruleset per automation tool. Choose one from:

• plugin:ui-testing/cypress
• plugin:ui-testing/playwright
• plugin:ui-testing/puppeteer
• plugin:ui-testing/testcafe
• plugin:ui-testing/webdriverio

Example:

{
"extends": ["plugin:ui-testing/webdriverio"]
}

Customization

You can customize specific rules in the .eslintrc configuration file.

{
"rules": {
"ui-testing/no-disabled-tests": "error", // default = warn
"ui-testing/no-css-page-layout-selector": ["warn", "webdriverio"] // default = error
}
}

• In case you are using a recommended ruleset as described in step 3 (under Usage), then these customized rules will override the default.
• It is also possible to omit the recommended ruleset and just set each rule specifically as above.

Overview rules

Rule	Default	Ruleset
missing-assertion-in-test	error
no-absolute-url	warn
no-assertions-in-hooks	error
no-browser-commands-in-tests	warn
no-css-page-layout-selector	error
no-disabled-tests	warn
no-focused-tests	warn
no-hard-wait	error
no-implicit-wait	error
no-link-text-selector	error
no-tag-name-selector	error
no-wait-in-tests	warn
no-xpath-page-layout-selector	error
no-xpath-selector	warn

Note: All automation tool specific rulesets include the recommended ruleset.