WebDriverCSS + BrowserStack + local server
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Avoid saving full screenshots and failed comparisons, but always save selector-based references. | |
visual/failed/* | |
visual/reference/* | |
!visual/reference/*baseline* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment