2.0.1 • Public • Published


    Build Status Downloads

    Enforces that a data-test-id attribute is present on interactive DOM elements to help with UI testing.

    • <button>Download</button>
    • <button data-test-id="download-button">Download</button>

    Example of eslint-plugin-test-selectors running in Visual Studio Code:

    Example of eslint-plugin-test-selectors running in Visual Studio Code


    • 2.0.0 - new onSubmit rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for chalk/ansi-regex
    • 1.3.0 - Add auto-fix capability to onClick (thank you @bkonuwa and @pixelbandito). (#8)
    • 1.1.0
      • elements with disabled and readonly attributes are now ignored by default. See Custom Rules Options to customize this behavior. (fixes #3)
      • plugin:test-selectors/recommended now emits warnings by default instead of errors. For the old stricter behavior which emits errors, folks can use plugin:test-selectors/recommendedWithErrors (fixes #4)
      • Refactoring and cleanup. Readme improvements.
    • 1.0.1 - fix bug with inline functions (fixes #1)
    • 1.0.0 - initial release


    You'll first need to install ESLint, which requires Node.js (note that eslint-plugin-test-selectors requires Node.js 10+):

    $ npm i eslint --save-dev

    Next, install eslint-plugin-test-selectors:

    $ npm install eslint-plugin-test-selectors --save-dev

    Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-test-selectors globally.


    Add test-selectors to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

      "plugins": ["test-selectors"]

    If you want to use all the recommended default rules, you can simply add this line to the extends section of your .eslintrc configuration:

      "extends": ["plugin:test-selectors/recommended"]

    By default, this will run all Supported Rules and emit eslint warnings. If you want to be more strict, you can emit eslint errors by instead using plugin:test-selectors/recommendedWithErrors.

    Another option: you can also selectively enable and disable individual rules in the rules section of your .eslintrc configuration. For instance, if you only want to enable the test-selectors/button rule, skip the extends addition above and simply add the following to the rules section of your .eslintrc configuration:

      "rules": {
        "test-selectors/button": ["warn", "always"]

    If you like most of the recommended rules by adding the extends option above, but find one in particular to be bothersome, you can simply disable it:

      "rules": {
        "test-selectors/anchor": "off"

    Note: see Supported Rules below for a full list.

    Custom rule options

    All tests can be customized individually by passing an object with one or more of the following properties.


    The default test attribute expected is data-test-id, but you can override it with whatever you like. Here is how you would use data-some-custom-attribute instead:

      "rules": {
        "test-selectors/onChange": [
          { "testAttribute": "data-some-custom-attribute" }


    By default all elements with the disabled attribute are ignored, e.g. <input disabled />. If you don't want to ignore this attribute, set ignoreDisabled to false:

      "rules": {
        "test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]


    By default all elements with the readonly attribute are ignored, e.g. <input readonly />. If you don't want to ignore this attribute, set ignoreReadonly to false:

      "rules": {
        "test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]


    Only supported on button rule, this option will exempt React components called Button from the rule.

      "rules": {
        "test-selectors/button": ["warn", "always", { "htmlOnly": true }]

    Supported Rules

    • test-selectors/anchor
    • test-selectors/button
    • test-selectors/input
    • test-selectors/onChange
    • test-selectors/onClick
    • test-selectors/onKeyDown
    • test-selectors/onKeyUp
    • test-selectors/onSubmit

    Further Reading

    If you don't want these test attributes added in production, you can use something like babel-plugin-jsx-remove-data-test-id

    Why data attributes and not id or class? Check out some of the following:


    npm i eslint-plugin-test-selectors

    DownloadsWeekly Downloads






    Unpacked Size

    88.6 kB

    Total Files


    Last publish


    • davidcalhoun