Automating cross browser + platform perceptual difference testing
You have a webapp. That’s your business. So you need it to be just as you designed it at all times. You may have your unit tests written for the JS, but what about how it actually looks like? One fine day you change some line in CSS and inadvertently make your blue buttons go green. How do you ensure that your platform looks exactly like it should across a myriad of browsers and platform combinations? And the best part, how do you keep this automated?
Razorpay is a payments startup. We have a JS powered Checkout page that is embedded in a merchant’s website. Since this is where the transactions begin for an end user, we just cannot have it broken at any time. So we developed a tool called Bozo in node.js for automated visual regression tests. This is apart from the whole bunch of unit tests we have.
Bozo checks for visual regressions on a page across multiple browser + platform combinations. Using a webhook after every successful deploy, it takes the screenshots of the page using the Browserstack APIs. It then compares each screenshot on a platform browser combo, with the last deploy’s screenshot for this combo. It then reports back the number of matches and no-matches.
It is similar to the work that Google has done on dpxdt.
The tool will be open sourced before the talk on Razorpay’s GitHub.