ESLint Plugin Playwright

ESLint plugin for Playwright.

Installation

npm

 npm install -D eslint-plugin-playwright

Yarn

 yarn add -D eslint-plugin-playwright

pnpm

 pnpm add -D eslint-plugin-playwright

Usage

This plugin bundles two configurations to work with both @playwright/test or
jest-playwright. The recommended setup is to use the files field to target
only Playwright test files. In the examples below, this is done by targeting
files in the tests directory and only applying the Playwright rules to those
files. In your project, you may need to change the files field to match your
Playwright test file patterns.

With Playwright test runner

Flat config
(eslint.config.js)

 import playwright from 'eslint-plugin-playwright'

export default [
  {
    ...playwright.configs['flat/playwright'],
    files: ['tests/**'],
  },
  {
    files: ['tests/**'],
    rules: {
      // Customize Playwright rules
      // ...
    },
  },
]

Legacy config
(.eslintrc)

 {
  "overrides": [
    {
      "files": "tests/**",
      "extends": "plugin:playwright/recommended"
    }
  ]
}

With Jest Playwright

Flat config
(eslint.config.js)

 import playwright from 'eslint-plugin-playwright'
import jest from 'eslint-plugin-jest'

export default [
  {
    ...playwright.configs['flat/jest-playwright'],
    files: ['tests/**'],
  },
  {
    files: ['tests/**'],
    plugins: { jest },
    rules: {
      // Customize Playwright rules
      // ...
    },
  },
]

Legacy config
(.eslintrc)

 {
  "overrides": [
    {
      "files": "tests/**",
      "extends": "plugin:playwright/jest-playwright"
    }
  ]
}

Settings

Aliased Playwright Globals

If you import Playwright globals (e.g. test, expect) with a custom name, you
can configure this plugin to be aware of these additional names.

 {
  "settings": {
    "playwright": {
      "globalAliases": {
        "test": ["myTest"],
        "expect": ["myExpect"]
      }
    }
  }
}

Custom Messages

You can customize the error messages for rules using the
settings.playwright.messages property. This is useful if you would like to
increase the verbosity of error messages or provide additional context.

Only the message ids you define in this setting will be overridden, so any other
messages will use the default message defined by the plugin.

 {
  "settings": {
    "playwright": {
      "messages": {
        "conditionalExpect": "Avoid conditional expects as they can lead to false positives"
      }
    }
  }
}

Rules

✅ Set in the recommended configuration
🔧 Automatically fixable by the --fix
CLI option
💡 Manually fixable by
editor suggestions