Cross Browser Visual Regression Tests With Shoov

Maintaining visual regression tests can be hard, but the more tests we write for our projects, the more we see the tremendous power it provides in terms of QA and monitoring our sites.

One daunting task each developer hates (and often avoids) is validating their markup on multiple browsers. All of Gizra’s developers use either Mac or Ubuntu on their machines, so the line to the “IE computer” on the far end of the office is getting long. Way too long.

And honestly - after our poor developers validated their work once, if we’d ask them to do it again. And again. And again… we’d probably be left without any.

Developers morale shouldn’t be underestimated!

Shoov means “Again” in Hebrew for this very reason. Go ahead and jump to our example repo which now has cross browser tests. Writing your tests once - but testing on multiple platforms and browsers is a big win.

You can now execute mocha with different options. The simple mocha will still use a default browser (e.g. phantomJs), but you could also do:

# Execute the tests using the ie11 config.
PROVIDER_PREFIX=browserstack SELECTED_CAPS=ie11 mocha

# Execute the tests using the chrome on Mac config.
PROVIDER_PREFIX=saucelabs SELECTED_CAPS=chrome mocha

# Execute the tests using your own provider and config.
PROVIDER_PREFIX=myOwnProvider SELECTED_CAPS=myOwnConfig mocha

Combined with paid services such as BrowserStack or SauceLabs there is no longer a need for a PC in the corner of the office - as they provide you with an instant virtual machine with lots of platforms and browsers.

As we are using those services for testing our projects on multiple platforms and browsers, we are suddenly dealing with lots of images. Since our sites are frequently changing, those baseline images tend to change quite frequently. This is where Shoov really helps us in the tedious task of making sure our visual regression tests are up to date. It does it by allowing us to easily replace the baseline images with the regression ones, either by downloading them with the correct name, or even by creating a pull request for us.