JSFoo 2015

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?

Outline

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.

Speaker bio

I have been making web applications and tools using Javascript for the last few years on my own side projects, at Zomato a year ago and now at Razorpay. I believe all programmers hate grunt work and automation is the key to success. And to avoid boredom.

So far I have used Javascript on web, mobile, Intel Galileo boards, Beaglebones and even with AR Drone.

Links

• https://shashankmehta.in
• https://twitter.com/leostatic
• https://github.com/shashankmehta

Slides

https://workflowy.com/s/6Y6JFk0hpv