Skip to content

Commit

Permalink
feat(cli-service): add WebdriverIO plugin for e2e testing
Browse files Browse the repository at this point in the history
  • Loading branch information
christian-bromann committed May 14, 2020
1 parent a91649e commit 6f58920
Show file tree
Hide file tree
Showing 15 changed files with 5,246 additions and 1 deletion.
2 changes: 2 additions & 0 deletions packages/@vue/cli-plugin-e2e-webdriverio/.npmignore
@@ -0,0 +1,2 @@
__tests__
__mocks__
79 changes: 79 additions & 0 deletions 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/
```
12 changes: 12 additions & 0 deletions 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'
}
})
}
Empty file.
@@ -0,0 +1,12 @@
<%_ if (hasESLint) { _%>
module.exports = {
plugins: ['wdio'],
extends: 'plugin:wdio/recommended',
env: {
mocha: true
},
rules: {
strict: 'off'
}
}
<%_ } _%>
@@ -0,0 +1,15 @@
class App {
/**
* elements
*/
get heading () { return $('h1') }

/**
* methods
*/
open (path = '/') {
browser.url(path)
}
}

module.exports = new App()
@@ -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')
})
})
@@ -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);
@@ -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}`
}
}]
}

0 comments on commit 6f58920

Please sign in to comment.