Testing is an essential part of every software development task. A software developer will use different tools depending on what he/she is working on. There are functional test tools, such as Karma, Jasmine, Selenium and SoapUi; loading test tools, such as JMeter and FunkLoad; and there are browser screenshot tools like BrowserStack. We are in agreement that the ideal scenario is a combination of tools, usually run by the CI (Continuous Integration) platform. However, even though the testing process is automated, there is always a need for a human eye at the front-end side.
We’ve seen Web Designers’ horrified faces when functionality that has been thoroughly tested, signed off and deployed unexpectedly breaks unrelated parts of the website. Thankfully today we have strategies like BEM and the Angular2’s Components and View Encapsulation, but we can’t simply release the new code without a pair of eyes performing regression tests on the entire system – a time-consuming, boring and expensive task.
We tried BackstopJS to “catch CSS curve balls” and we loved it.
BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.
- Simulate user interactions with CasperJS scripts.
- Fast inline-CLI reports.
- Detailed in-browser reports.
- CI Integration with JUnit reports.
- Test html5 elements like webfonts and flexbox.
- Use as a standalone global app, a standalone local npm script or import right into your node app.
- Also plays nicely with source control — share your gold master with your team.
We showed it to one of our clients and he came up with the natural question: “Can I have it”? “Of course,” we answered, “You need to run it in command line”. That put him off.
We then decided to invest and develop a proper web application based on BackstopJS, where the user can set up projects, scenarios and run tests with the click of a button. Cutting it short, we created the UI part of BackstopJS; and we named it Sharon.