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.x only supports [email protected]
• 2.x only 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.

mobileEmulation : object

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