为了开始我的项目，我运行了vue init webpack my-project，但是我排除了E2E测试。现在，我改变了主意，并想加入E2E测试。如何将它们添加到我的项目中？
读者注意:Tarun Lalwani's answer对我来说很棒。但是，您可能需要考虑使用TestCafe，因为它无需任何配置即可工作。
我尝试使用vue init webpack my--project命令创建一个虚拟项目，以便可以复制粘贴test/e2e目录，然后尝试从那里工作，但没有成功。我也复制粘贴了npm脚本，尝试运行npm run e2e，然后根据收到的错误消息更新了代码。
我到了TypeError: webpack.optimize.ModuleConcatenationPlugin is not a constructor错误的地步。 const webpack = require('webpack')，我已经运行npm update来确保webpack节点模块是最新的，所以我不知道为什么会收到该错误。
无论如何，这种尝试运行npm run e2e然后根据错误消息更新我的代码的方法似乎不太可能成功。
package.json
{
"name": "premium-poker-tools",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Adam Zerner <[email protected]>",
"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": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
最佳答案
因此，没有可用于修复和添加e2e的命令，您需要手动对其进行修复。
编辑
所以看来您创建的项目是模板1.1.0
https://github.com/vuejs-templates/webpack/tree/1.1.0/template
快跑
npm add chromedriver cross-spawn@^5.0.1 nightwatch@^0.9.12 selenium-server
我已删除
chromedriver和selenium-server，因为最新版本不会受到影响。并下载该文件夹的内容
https://github.com/vuejs-templates/webpack/tree/1.1.0/template/test/e2e
还添加/更新
package.json中的“脚本”"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
原始答案
但是最简单的方法是创建两个新项目
project1，project2，将它们都命名为project1，并在一个而不是第二个中添加e2e。然后，您可以在两者之间生成一个git diff补丁。按照最新的模板，补丁文件位于下面e2e.patch
diff --git a/README.md b/README.md
index 500b31c..5960190 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,9 @@ npm run build --report
# run unit tests
npm run unit
+# run e2e tests
+npm run e2e
+
# run all tests
npm test
```
diff --git a/package.json b/package.json
index a4e8741..09d6452 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,9 @@
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
- "test": "npm run unit",
- "lint": "eslint --ext .js,.vue src test/unit",
+ "e2e": "node test/e2e/runner.js",
+ "test": "npm run unit && npm run e2e",
+ "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
@@ -28,10 +29,13 @@
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
+ "babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
+ "chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
+ "cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
@@ -57,6 +61,7 @@
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
+ "nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
@@ -66,6 +71,7 @@
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
+ "selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
diff --git a/test/e2e/custom-assertions/elementCount.js b/test/e2e/custom-assertions/elementCount.js
new file mode 100644
index 0000000..818e602
--- /dev/null
+++ b/test/e2e/custom-assertions/elementCount.js
@@ -0,0 +1,27 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+// browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+ this.message = 'Testing if element <' + selector + '> has count: ' + count
+ this.expected = count
+ this.pass = function (val) {
+ return val === this.expected
+ }
+ this.value = function (res) {
+ return res.value
+ }
+ this.command = function (cb) {
+ var self = this
+ return this.api.execute(function (selector) {
+ return document.querySelectorAll(selector).length
+ }, [selector], function (res) {
+ cb.call(self, res)
+ })
+ }
+}
diff --git a/test/e2e/nightwatch.conf.js b/test/e2e/nightwatch.conf.js
new file mode 100644
index 0000000..f019c0a
--- /dev/null
+++ b/test/e2e/nightwatch.conf.js
@@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+ src_folders: ['test/e2e/specs'],
+ output_folder: 'test/e2e/reports',
+ custom_assertions_path: ['test/e2e/custom-assertions'],
+
+ selenium: {
+ start_process: true,
+ server_path: require('selenium-server').path,
+ host: '127.0.0.1',
+ port: 4444,
+ cli_args: {
+ 'webdriver.chrome.driver': require('chromedriver').path
+ }
+ },
+
+ test_settings: {
+ default: {
+ selenium_port: 4444,
+ selenium_host: 'localhost',
+ silent: true,
+ globals: {
+ devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+ }
+ },
+
+ chrome: {
+ desiredCapabilities: {
+ browserName: 'chrome',
+ javascriptEnabled: true,
+ acceptSslCerts: true
+ }
+ },
+
+ firefox: {
+ desiredCapabilities: {
+ browserName: 'firefox',
+ javascriptEnabled: true,
+ acceptSslCerts: true
+ }
+ }
+ }
+}
diff --git a/test/e2e/runner.js b/test/e2e/runner.js
new file mode 100644
index 0000000..2722032
--- /dev/null
+++ b/test/e2e/runner.js
@@ -0,0 +1,48 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+ const devServerOptions = devConfig.devServer
+ const compiler = webpack(webpackConfig)
+ server = new DevServer(compiler, devServerOptions)
+ const port = devServerOptions.port
+ const host = devServerOptions.host
+ return server.listen(port, host)
+})
+.then(() => {
+ // 2. run the nightwatch test suite against it
+ // to run in additional browsers:
+ // 1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+ // 2. add it to the --env flag below
+ // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+ // For more information on Nightwatch's config file, see
+ // http://nightwatchjs.org/guide#settings-file
+ let opts = process.argv.slice(2)
+ if (opts.indexOf('--config') === -1) {
+ opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+ }
+ if (opts.indexOf('--env') === -1) {
+ opts = opts.concat(['--env', 'chrome'])
+ }
+
+ const spawn = require('cross-spawn')
+ const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+ runner.on('exit', function (code) {
+ server.close()
+ process.exit(code)
+ })
+
+ runner.on('error', function (err) {
+ server.close()
+ throw err
+ })
+})
diff --git a/test/e2e/specs/test.js b/test/e2e/specs/test.js
new file mode 100644
index 0000000..a7b1bd9
--- /dev/null
+++ b/test/e2e/specs/test.js
@@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+ 'default e2e tests': function (browser) {
+ // automatically uses dev Server port from /config.index.js
+ // default: http://localhost:8080
+ // see nightwatch.conf.js
+ const devServer = browser.globals.devServerURL
+
+ browser
+ .url(devServer)
+ .waitForElementVisible('#app', 5000)
+ .assert.elementPresent('.hello')
+ .assert.containsText('h1', 'Welcome to Your Vue.js App')
+ .assert.elementCount('img', 1)
+ .end()
+ }
+}
将此文件另存为
e2e.patch到您的项目中。确保您通过以下运行在项目中制作了git repogit init
git add .
git commit -m "first version"
然后应用补丁添加
e2egit apply < e2e.patch
git add .
git commit -m "Added e2e"
关于vue.js - Vue : How do you add E2E tests after not including them in initial webpack template?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48361246/