# webdriverio-boilerplate

> boilerplate framework for e2e testing using node and webdriverio

Latest version **1.0.0** (published 2017-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install webdriverio-boilerplate
pnpm add webdriverio-boilerplate
yarn add webdriverio-boilerplate
bun add webdriverio-boilerplate
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-01-03 |
| First published | 2017-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Jonathan Terry |
| Maintainers | npmatl |

## Links

- npm: https://www.npmjs.com/package/webdriverio-boilerplate
- Repository: https://github.com/jonyet/webdriverio-boilerplate
- Homepage: https://github.com/jonyet/webdriverio-boilerplate#readme
- Issues: https://github.com/jonyet/webdriverio-boilerplate/issues
- npm.io page: https://npm.io/package/webdriverio-boilerplate

## Dependencies (10)

- [chai](https://npm.io/package/chai.md) 3.5.0
- [mocha](https://npm.io/package/mocha.md) 2.4.4
- [mssql](https://npm.io/package/mssql.md) ^3.1.2
- [yargs](https://npm.io/package/yargs.md) ^4.7.1
- [cheerio](https://npm.io/package/cheerio.md) ^0.20.0
- [winston](https://npm.io/package/winston.md) ^2.2.0
- [easyimage](https://npm.io/package/easyimage.md) ^2.1.0
- [underscore](https://npm.io/package/underscore.md) ^1.8.3
- [webdrivercss](https://npm.io/package/webdrivercss.md) github:kevinlambert/webdrivercss#wdio4-compatible
- [node-resemble-js](https://npm.io/package/node-resemble-js.md) 0.0.5

## Recent versions

- 1.0.0 (latest) — 2017-01-03

## README

## gulp-webriver-boilerplate

a simple qa automation framework using gulp with webdriverio and mocha

**Prerequisites**
* Java Development Kit 1.8 or greater:  [http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html]
* ImageMagick (Assuming you have Homebrew installed):
```
brew install imagemagick
```

**Get started**

install git & nodejs/npm (i suggest via nvm [https://github.com/creationix/nvm/blob/master/README.markdown], using node 6.3.0 & npm 3.10.3)

install your local dependencies

```
npm install
```

last, use the `.envschema` file, create a `.env` file with the appropriate environmental settings (mobile/tablet viewports, authentication for browserstack/saucelabs, and sumologic collector info). only the viewport settings are required to run. contact jterry@hugeinc.com if you are in need of valid credentials for browserstack or sumologic.

and you should be all set!

```
node_modules/.bin/gulp amazon:demo
```

## Custom Modules

- Resembler.js
- logger.js

**Resembler.js**

Webdrivercss is a plugin that allows you to take screenshots of a single element
and store it as a baseline `.png` file. the next time the test runs, it will take a new screenshot
and assert that the changes made to it are within reason (default is 0.05% mismatch).

unfortunately, webdrivercss has been deprecated since wdio v2. this Resembler class i've added
is a workaround for said deprecated plugin. it uses similiar (if not the same) modules in
order to effectively accomplish the same visual regression task. currently recommended to be used with firefox, as the chromedriver v2+ team refuses to acknowledge the need to fix a broken feature (full document screenshots).

Usage:

```
assertElementLayout(path, parentScreenshot, filename, selector);
```
| Param    | Type          | Details                                                                                |
|----------|---------------|----------------------------------------------------------------------------------------|
| path     | String        | path to screenshot landing.                                       |
| parentScreenshot     | String        | filename for full document screenshot.                                       |
| filename | String        | name for your screenshot.                                       |
| selector | String or Key | you can either pass a selector string straight in, or call it from your page object.   |
| threshold | Integer | determines the mismatch percentage threshold |

example provided in `specs_css/amazonvisualregression.js`

**logger.js**

Leveraging the winston module to set log objects and loglevel. currently only utilized for debugging/refactoring the Resembler. sets a nice foundation for logging anything locally as well as to Splunk.

---
_Source: https://npm.io/package/webdriverio-boilerplate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._