title: Vue: How do you add E2E tests after not including them in initial webpack template?
body: <p>To start my project, I ran <code>vue init webpack my-project</code>, but I excluded E2E tests. Now I changed my mind and <em>do</em> want to include E2E tests. How can I add them to my project?</p>
  
  <p>Note to readers: <a href="https://stackoverflow.com/a/49870159/1927876">Tarun Lalwani's answer</a> worked great for me. However you may want to consider using TestCafe, as it works without any configuration.</p>
  
  <hr>
  
  <p>I've tried creating a dummy project using the command <code>vue init webpack my--project</code> so that I could copy-paste the test/e2e directory and then try to work from there, but it hasn't worked. I copy-pasted the npm script too, tried running <code>npm run e2e</code> and then updated my code based on the error messages I got.</p>
  
  <p>I've reached a point where I've gotten a <code>TypeError: webpack.optimize.ModuleConcatenationPlugin is not a constructor</code> error. <code>const webpack = require('webpack')</code>, and I've ran <code>npm update</code> to make sure that the <code>webpack</code> node module is up to date, so I don't know why I'm getting that error.</p>
  
  <p>Regardless, this approach of trying to run <code>npm run e2e</code> and then update my code based on the error messages seems somewhat unlikely to succeed.</p>
  
  <hr>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "premium-poker-tools",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "Adam Zerner &lt;azerner3@gmail.com&gt;",
    "private": true,
    "scripts": {
      "dev": "node build/dev-server.js",
      "start": "node build/dev-server.js",
      "build": "node build/build.js",
      "test": "BABEL_ENV=test karma start test/unit/karma.conf.js",
      "deploy": "git subtree push --prefix dist heroku master"
    },
    "dependencies": {
      "bootstrap": "^3.3.7",
      "bootstrap-sass": "^3.3.7",
      "chart.js": "^2.5.0",
      "express-sslify": "^1.2.0",
      "jquery": "^3.2.1",
      "lodash": "^4.17.4",
      "vue": "^2.4.2",
      "vue-analytics": "^5.1.1",
      "vue-chartjs": "^2.8.7",
      "vue-router": "^2.7.0",
      "vue-slider-component": "^2.5.8",
      "vuex": "^3.0.0"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1",
      "babel-loader": "^7.1.1",
      "babel-plugin-istanbul": "^4.1.1",
      "babel-plugin-transform-runtime": "^6.22.0",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.3.2",
      "babel-preset-stage-2": "^6.22.0",
      "babel-register": "^6.22.0",
      "chai": "^3.5.0",
      "chalk": "^2.0.1",
      "connect-history-api-fallback": "^1.3.0",
      "copy-webpack-plugin": "^4.0.1",
      "cross-env": "^5.0.1",
      "css-loader": "^0.28.0",
      "cssnano": "^3.10.0",
      "eventsource-polyfill": "^0.9.6",
      "express": "^4.14.1",
      "extract-text-webpack-plugin": "^2.0.0",
      "file-loader": "^0.11.1",
      "friendly-errors-webpack-plugin": "^1.1.3",
      "html-webpack-plugin": "^2.28.0",
      "http-proxy-middleware": "^0.17.3",
      "inject-loader": "^3.0.0",
      "karma": "^1.4.1",
      "karma-coverage": "^1.1.1",
      "karma-mocha": "^1.3.0",
      "karma-phantomjs-launcher": "^1.0.2",
      "karma-phantomjs-shim": "^1.4.0",
      "karma-sinon-chai": "^1.3.1",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-spec-reporter": "0.0.31",
      "karma-webpack": "^2.0.2",
      "mocha": "^3.2.0",
      "node-sass": "^4.5.3",
      "opn": "^5.1.0",
      "optimize-css-assets-webpack-plugin": "^2.0.0",
      "ora": "^1.2.0",
      "phantomjs-prebuilt": "^2.1.14",
      "rimraf": "^2.6.0",
      "sass-loader": "^6.0.6",
      "semver": "^5.3.0",
      "shelljs": "^0.7.6",
      "sinon": "^2.1.0",
      "sinon-chai": "^2.8.0",
      "url-loader": "^0.5.8",
      "vue-loader": "^13.0.4",
      "vue-style-loader": "^3.0.1",
      "vue-template-compiler": "^2.4.2",
      "webpack": "^2.6.1",
      "webpack-bundle-analyzer": "^2.2.1",
      "webpack-dev-middleware": "^1.10.0",
      "webpack-hot-middleware": "^2.18.0",
      "webpack-merge": "^4.1.0",
      "worker-loader": "^1.1.1"
    },
    "engines": {
      "node": "&gt;= 4.0.0",
      "npm": "&gt;= 3.0.0"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>