Screenstory NPM

Screenstory

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('Google.com', function () {
    var chai = require('chai');
    var client;

    before(function () {
        client = newClient();
        // set the story name for all further screenshots
        client.setStory('Google');
    });

    after(function (done) {
        client.end(done);
    });

    it('should be accessible', function (done) {
        client
            .url('https://google.fr')
            .screenstory('lading')
            .call(done)
    });

    it('should have a search form', function (done) {
        client
            .sendKeys('screenstory', 'form[action="/search"] .q')
            .screenstory('instant-search')
            .call(done);
    });
});

Extensions

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) {
        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) {
            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.