WebDriverCSS + BrowserStack + local server

.gitignore

# Avoid saving full screenshots and failed comparisons, but always save selector-based references.
visual/failed/*
visual/reference/*
!visual/reference/*baseline*

selector_win7-ie9.js

'use strict';

// We'll fill this in later on
var options = {};

// Script assumes your BrowserStack creds are listed in JSON somewhere in your system.
// Convenient if you want to avoid storing keys in VCS. If storing in VCS is ok, just make
// config the object literal:
//
// {
//   "browserstack": {
//     "user": "MY_USER",
//     "key": "MY_KEY"
//   }
// }
var config = require('credentials.json');

// Node deps
var assert = require('assert');

// NPM packages
var webdriverio = require('webdriverio');
var compare = require('webdrivercss');

// Configure webdriverio
var client = webdriverio.remote({
  desiredCapabilities: {
    'browserstack.debug': 'true',
    'browserstack.local': 'true',
    os: 'Windows',
    os_version: '7',
    browser: 'ie',
    browser_version: '9.0'
  },
  host: 'hub.browserstack.com',
  port: 80,
  user: config.browserstack.user,
  key: config.browserstack.key
}).init();

// Configure webdrivercss
options.test = {
  title: 'My-Component_win7-ie9',
  name: 'overlay',
  url: 'http://localhost:3000/my/sample/page',
  selector: '.my-component',
};

// Initialize webdrivercss
compare.init(client, {
  screenshotRoot: 'visual/reference',
  failedComparisonsRoot: 'visual/failed',
  misMatchTolerance: 0.05,
  screenWidth: [1024]
});

// Run the test
describe('Win7 / IE9: My Component', function () {
  this.timeout(600000);

  it('should look the same', function (done) {
    client
      .url(options.test.url)
      .webdrivercss(options.test.title, {
        name: options.test.name,
        elem: options.test.selector
      }, function(err, res) {
        assert.strictEqual(res.roles[0].isWithinMisMatchTolerance, true);
      })
      .end()
      .call(done);
  });
});