a simple test automation framework using webdriverio and mocha, designed with high portability as a priority.
brew install imagemagick
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
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 successfully. i also should note that this framework is designed to be most effectively leveraged in CI settings, with a remote service such as Browserstack or Sauce Labs where Jenkins/Travis jobs simply run npm install and npm test upon completion of an upstream trigger. it will work locally but is not designed to scale your automation solution from your laptop ;)
anyway, now you should be all set!
npm run testfun
see the scripts in
package.json for more information on what scripts are available and what they're actually doing.
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. it should be used with very tight control over the platform/browser in which the tests will be conducted (see
wdio.visual.js). mozilla has recently broken full DOM screenshots for versions 48 and higher. use chrome or firefox v47.
assertElementLayout(path, parentScreenshot, filename, selector, threshold);
|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
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 services like Splunk.