vue-cli-plugin-e2e-webdriverio
e2e-webdriver plugin for vue-cli
Injected Commands
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
Additionally, all WebdriverIO CLI options are supported.
The task may also be run via vue ui
.
Dependencies
Compatibility
1.x
only supportswebdriverio@4.x
2.x
only supportswebdriverio@5.x
Configuration
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 = capabilities capabilities capabilities
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 exportsconfig = 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 = const resizeViewport isDebug = util const Chrome = capabilities const base = config exportsconfig = ...base // your overrides here... capabilities: browserName: 'chrome' chromeOptions: args: '--headless' // etc... viewportSize: width: 1024 height: 768 // etc... beforeSuite: resizeViewport anotherFunction afterTest: { if && !testpassed } // ... // OR { // 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
API
WDIOConfigDefault() : object
Returns the plugin's internal WebdriverIO
configuration.
capabilities.Chrome
new(options)
Constructor prepares ChromeDriver
options from given input.
viewportSize { width: number, height: number }
userAgent : string
chromeOptions : object
capabilities.find(names: string | string[]) : Array<object>
Returns a list of registered capabilities matching given name(s). Accepts a comma delimited list or Array.
capabilities.register(name: string, capability: object)
Adds the named capability to the capabilities container.
capabilities.desktop(options: object) : capabilities.Chrome
Returns the predefined capability.
capabilities.iphone(options: object) : capabilities.Chrome
Returns the predefined capability.
capabilities.ipad(options: object) : capabilities.Chrome
Returns the predefined capability.
capabilities.android(options: object) : capabilities.Chrome
Returns the predefined capability.
util.resizeViewport() : void
If current capability has property viewportSize
this function will issue WebdriverIO
command to resize the current browser window so that inner dimensions match viewportSize
.
util.saveScreenshot(test: object, path: string) : void
Saves screenshot to given path
or tmp directory and logs error info to stdout.
util.printBrowserConsole() : void
Log all browser output to stdout.
Installing in an Already Created Project
Commit your project and run vue add vue-cli-plugin-e2e-webdriver