[WIP] A small plugin vor vue-cli 3 that adds a compiler plugin to remove data-test attributes when desired
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits behind LinusBorg:develop.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



A plugin for vue-cli that adds a compiler module to vue-loader that can remove predefined data attributes from your SFC templates at build time


When testing your component, you frequently need to select some dom element to check if it is present, has the right properties and so forth.

Using classes and ids for this is not a good idea, as explained in this excellent blog post by the great Kent C. Dodds. While written with React in mind, the same problems apply to Vue components.

The proposed solution: Use data attributes instead, which are not linked to your styles and don't pollute your csss class namespace.

But we don't want these properties to make it into our production code, right? Besides looking amateurish it will increase the size of our render functions.

In React, this can be solved with a babel plugin, but in Vue, we compile our .vue files with webpack & vue-loader. But we can solve this challenge with a compiler module for vue-loader.

This vue-cli-plugin adds such a compiler module to vue-cli's webpack config and exposes a few configuration options in vue.config.js for your convenience.


This library requires @vue/cli >=3

with @vue/cli:

vue add test-attrs

or manually:

npm install -D vue-cli-plugin-test-attrs

yarn add -D vue-cli-plugin-test-attrs


by default, this plugin adds the compiler module to vue-loader's config, so the data-test attributes will be removed and not Bnd up in the bundle that you serve.

It does not add the compiler module (and consequently, it keeps the data- attributes) when:

  • process.env.NODE_ENV === 'test' or
  • !!process.env.VUE_CLI_KEEP_TEST_ATTRS

This means:

  1. For vue-cli-service serve and vue-cli-service build commands, the test attributes will be removed by the compiler module.

  2. For unit tests with jest or mocha (vue-cli-service test:unit), the data-test attributes will be present because NODE_ENV ==== 'test' (and in the case of jest, vue-loader isn'T used at all anyway)

  3. For other environments (e.g. e2e tests), you can use the VUE_CLI_KEEP_TEST_ATTRS environment variable to skipt addind the compiler module so data-test attributes are persisted.


the plugin's options can be configured in vue.config.js:

// vue.config.js
module.exports = {
  pluginOptions: {
    testAttrs: {
      // you can enable and disabvle it yourself,
      // i.e. with an environment variable:
      enabled: process.env.MY_COOL_ENV,
      // you can also define which `data-` attributes should
      // should be removed.
      attrs: ['test'], // default: removes `data-test="..."`


As explained above, the plugin should work out of the box


As explained above, the plugin should work out of the box


E2E tests with Cypress usually run in 'production' mode, so by default this plugin would remove all data-test atributes. To keep them in your code for your e2e tests, you can set the VUE_CLI_KEEP_TEST_ATTRS environment variable:

"test:e2e": "VUE_CLI_KEEP_TEST_ATTRS=true vue-cli-service test:e2e"

However, I would personally suggest to use a custom environment:

# .env.e2e
"test:e2e": "vue-cli-service test:e2e --mode e2e"


I haven't tested this plugin with nightwatch yet, so if you can contribute instructions, please go ahead and open a PR.


to follow.