feat(cli-service): add WebdriverIO plugin for e2e testing

Author: christian-bromann

packages/@vue/cli-plugin-e2e-webdriverio/.npmignore

@@ -0,0 +1,2 @@
+__tests__
+__mocks__

packages/@vue/cli-plugin-e2e-webdriverio/README.md

@@ -0,0 +1,79 @@
+# @vue/cli-plugin-e2e-webdriverio
+
+> e2e-webdriverio plugin for vue-cli
+
+## Injected Commands
+
+- **`vue-cli-service test:e2e`**
+
+  Run end-to-end tests with [WebdriverIO](https://webdriver.io/).
+
+  Options:
+
+  ```
+  --remote          Run tests remotely on SauceLabs
+
+  All WebdriverIO CLI options are also supported.
+
+  ```
+
+  Additionally, all [WebdriverIO CLI options](https://webdriver.io/docs/clioptions.html) are also supported.
+  E.g.: `--baseUrl`, `--bail` etc.
+
+
+## Project Structure
+
+The following structure will be generated when installing this plugin:
+
+```
+tests/e2e/
+  ├── pageobjects/
+  |   └── app.js
+  ├── specs/
+  |   ├── app.spec.js
+  └── globals.js
+```
+
+In addition to that there will be 3 configuration files generated:
+
+- `wdio.shared.conf.js`: a shared configuration with all options defined for all environments
+- `wdio.local.conf.js`: a local configuration for local testing
+- `wdio.sauce.conf.js`: a remote configuration for testing on a cloud provider like [Sauce Labs](https://saucelabs.com/)
+
+The directories contain:
+
+#### `pageobjects`
+Contains an example for an page object. Read more on using [PageObjects](https://webdriver.io/docs/pageobjects.html) with WebdriverIO.
+
+#### `specs`
+Your e2e tests.
+
+## Installing in an Already Created Project
+
+``` sh
+vue add e2e-nightwatch
+```
+
+## Running Tests
+
+By default, all tests inside the `specs` folder will be run using Chrome. If you'd like to run end-to-end tests against Chrome (or Firefox) in headless mode, simply pass the `--headless` argument. Tests will be automatically run in parallel when executed in the cloud.
+
+```sh
+$ vue-cli-service test:e2e
+```
+
+**Running a single test**
+
+To run a single test supply the filename path. E.g.:
+
+```sh
+$ vue-cli-service test:e2e --spec tests/e2e/specs/test.js
+```
+
+**Skip Dev server auto-start**
+
+If the development server is already running and you want to skip starting it automatically, pass the `--url` argument:
+
+```sh
+$ vue-cli-service test:e2e --baseUrl=http://localhost:8080/
+```

packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js

@@ -0,0 +1,12 @@
+module.exports = api => {
+  api.render('./template', {
+    hasTS: api.hasPlugin('typescript'),
+    hasESLint: api.hasPlugin('eslint')
+  })
+
+  api.extendPackage({
+    scripts: {
+      'test:e2e': 'vue-cli-service test:e2e'
+    }
+  })
+}

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/logs/.gitkeep

@@ -0,0 +1,12 @@
+<%_ if (hasESLint) { _%>
+module.exports = {
+  plugins: ['wdio'],
+  extends: 'plugin:wdio/recommended',
+  env: {
+    mocha: true
+  },
+  rules: {
+    strict: 'off'
+  }
+}
+<%_ } _%>

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/_eslintrc.js

@@ -0,0 +1,15 @@
+class App {
+  /**
+   * elements
+   */
+  get heading () { return $('h1') }
+
+  /**
+   * methods
+   */
+  open (path = '/') {
+    browser.url(path)
+  }
+}
+
+module.exports = new App()

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/pageobjects/app.js

@@ -0,0 +1,8 @@
+const App = require('../pageobjects/app')
+
+describe('Vue.js app', () => {
+  it('should open and render', () => {
+    App.open()
+    expect(App.heading).toHaveText('Welcome to Your Vue.js App')
+  })
+})

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/specs/app.spec.js

@@ -0,0 +1,24 @@
+const { config } = require('./wdio.shared.conf')
+
+exports.config = {
+  /**
+   * base config
+   */
+  ...config,
+  /**
+   * config for local testing
+   */
+  maxInstances: 1,
+  services: ['chromedriver'],
+  capabilities: [{
+    browserName: 'chrome',
+    'goog:chromeOptions': {
+      args: process.argv.includes('--headless')
+        ? ['--headless', '--disable-gpu']
+        : []
+    }
+  }]
+}
+
+
+console.log(process.argv);

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/wdio.local.conf.js

@@ -0,0 +1,41 @@
+const { config } = require('./wdio.shared.conf')
+
+const BUILD_ID = Math.ceil(Date.now() / 1000)
+
+exports.config = {
+  /**
+   * base config
+   */
+  ...config,
+  /**
+   * config for testing on Sauce Labs
+   */
+  user: process.env.SAUCE_USERNAME,
+  key: process.env.SAUCE_ACCESS_KEY,
+  region: 'us',
+  headless: process.argv.includes('--headless'),
+
+  services: [
+    ['sauce', {
+      sauceConnect: true,
+      tunnelIdentifier: 'Vue.js Integration tests'
+    }]
+  ],
+
+  maxInstances: 10,
+  capabilities: [{
+    browserName: 'firefox',
+    browserVersion: 'latest',
+    platformName: 'Windows 10',
+    'sauce:options': {
+      build: `Build ${BUILD_ID}`
+    }
+  }, {
+    browserName: 'chrome',
+    browserVersion: 'latest',
+    platformName: 'Windows 10',
+    'sauce:options': {
+      build: `Build ${BUILD_ID}`
+    }
+  }]
+}