node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »




A cli to run webdriverio tests on several browsers.

screenstory tests/wd
# show help
screenstory -h

Write tests

Up to now, only mocha runner is available. In the future, other runner might be supported (PRs welcome).

describe('', function () {
    var chai = require('chai');
    var client;
    before(function () {
        client = newClient();
        // set the story name for all further screenshots 
    after(function (done) {
    it('should be accessible', function (done) {
    it('should have a search form', function (done) {
            .sendKeys('screenstory', 'form[action="/search"] .q')


Simply add your own webdriverio methods using the --extension flag:

screenstory --extension foo/bar --extension foo/baz tests/wd

An extension is a simple json object or a function.

module.exports = {
    foo: function (cb) {

Declare an extension that will be executed once at load time

module.exports = function (runner, options) {
    // runner is the screenstory runner instance 
    // options are the one provided to cli 
    runner.on('setup', function doSomething(next) { });
    runner.on('done', function doSomething(failures, next) { });
    return {
        bar: function (cb) {

Bundled Extensions

  • Chai: a chaijs based extension to add some assertions
  • Screenstory: the default screenstory extension

Runner events

  • "configure": function (fileOptions, runnerOptions) {}
  • "setup": function (next) {}
  • "new client": function (client, next) {}
  • "report": function (failures, next) {next(err, ['report/file/path'])}
  • "done": function (next) {}

Template Data

Following variables are available when generating report template:

  • browserId: unique id for given capabilities
  • regressionPath: the path to full document screenshot file
  • baselinePath: the path to original screenshot file
  • diffPath: the path to new screenshot file
  • isNewImage: is it a new screenshot for those capabilities
  • isWithinMisMatchTolerance: is it a new screenshot for those capabilities
  • isSameDimensions: does images have same dimensions
  • isExactSameImage: does images match perfectly
  • misMatchPercentage: webdrivercss response
  • capabilities: the current client capabilities ("client.desiredCapabilities")
  • title: the image human readable title
  • story: the story human readable title
  • id: the image unique id. Maybe best to keep it generated by screenstory.
  • storyId: the story unique id. Maybe best to keep it generated by screenstory.


This project is released under the MIT Licence.

See LICENSE file for more information