e2e-webdriver plugin for vue-cli
Run e2e tests with WebdriverIO
Usage:
yarn run test:e2e [options]
yarn run test:e2e
--baseUrl http://localhost:8080
--capabilities desktop,iphone
--specs spec/**
--headless
--debug
--mode development
yarn run test:e2e --config wdio.conf.js
yarn run test:e2e --suite focus --bail 1
Options:
-b, --baseUrl [STRING<URI>] Run e2e tests against dev server running at given url. Auto starts dev server if absent.
--capabilities [STRING[,STRING]] Specify browser capabilities to run (default: desktop)
--config [STRING<PATH>] Use your own WebdriverIO configuration; overrides plugin defaults (relative to <projectRoot>)
--headless, --no-headless Run e2e tests in headless mode without GUI (default capabilities only)
--debug, --no-debug Enable Node inspector and debugging tools
--mode [STRING] Run the dev server in specified mode (default: production)
--specs [STRING[,STRING]] Glob pattern determines specs to run (relative to <projectRoot>)
Additionally, all WebdriverIO CLI options are supported.
The task may also be run via vue ui.
1.xonly supports[email protected]2.xonly supports[email protected]
Defaults defined on plugin invocation will be stored in vue.config.js.
Defaults will be overriden by command line options on command invocation.
Settings defined within <projectRoot>/wdio.conf.js will be merged with the plugin's defaults.
To override internal configuration entirely use option --config to specify alternate configuration file.
If you haven't already, run ./node_modules/.bin/wdio to configure WebdriverIO.
This plugin provides a number of WebdriverIO capabilities each utilising ChromeDriver. If you wish to run e2e tests with different capabilities, define them within <projectRoot>/wdio.conf.js.
When using --capabilities to run specs against a subset of devices, you must first capabilities.register within <projectRoot>/wdio.conf.js.
// wdio.conf.js
const { capabilities, Chrome } = require('vue-cli-plugin-e2e-webdriverio').capabilities
capabilities.register('device', new Chrome({
// ...options
}))
capabilities.register('other', new Chrome({
// ...options
}))Then you can run a subset of capabilities like so yarn test:e2e --capabilities device
By default, tests are run in interactive mode, to run in headless mode (for CI) use option --headless.
Selenium commands will be executed synchronously by default. To override:
// wdio.conf.js
exports.config = {
sync: false
// ...
}WebdriverIO hooks defined in <projectRoot>/wdio.conf.js will be appended to behaviour provided by plugin defaults unless run with alternate --config.
// wdio.conf.js
const { WDIOConfigDefault, capabilities, util } = require('vue-cli-plugin-e2e-webdriverio')
const { resizeViewport, isDebug } = util
const { Chrome } = capabilities
const base = WDIOConfigDefault().config
exports.config = {
...base,
// your overrides here...
capabilities: [
new Chrome({
browserName: 'chrome',
chromeOptions: {
args: [
'--headless',
// etc...
]
},
viewportSize: {
width: 1024,
height: 768,
},
// etc...
})
],
beforeSuite: [
resizeViewport,
anotherFunction,
]
afterTest: [
(test) => {
if (isDebug() && !test.passed) {
saveScreenshot(test, 'path/to/screenshot.png')
}
},
// ...
}
// OR
beforeSuite: (suite) => {
resizeViewport()
// your behaviour here...
}
}Consult WebdriverIO Configuration for available options and browser configuration.
You may need to set NODE_ENV and VUE_CLI_MODE if running tests in mode other than plugin default, production.
The enviroment variable must be set before Vue CLI Service loadEnv called.
// package.json
{
"scripts": {
"test:e2e": "NODE_ENV=development VUE_CLI_MODE=development vue-cli-service test:e2e"
}
}Refer to Vue CLI Service Plugin defaultModes
Returns the plugin's internal WebdriverIO configuration.
Constructor prepares ChromeDriver options from given input.
Returns a list of registered capabilities matching given name(s). Accepts a comma delimited list or Array.
Adds the named capability to the capabilities container.
Returns the predefined capability.
Returns the predefined capability.
Returns the predefined capability.
Returns the predefined capability.
If current capability has property viewportSize this function will issue WebdriverIO command to resize the current browser window so that inner dimensions match viewportSize.
Saves screenshot to given path or tmp directory and logs error info to stdout.
Log all browser output to stdout.
Commit your project and run vue add vue-cli-plugin-e2e-webdriverio
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent