So what’s your method to test responsive layouts? Obviously, manual testing of these responsive layouts is really cumbersome. Visual regression is a way that allow you to visually compare your baseline versions of the project with the version in development. It includes taking the screenshots of the original design and comparing them with the new ones. It looks for pixel differences, different dimensions and various other elements on your web page.
This visual regression comes in many flavors that make use of various technologies and workflows. Some of them are mentioned below. Let’s have a look!
BackstopJS is the best in class config-driven automated screenshot test application to test responsive websites and web applications. Just specify a set of DOM elements along with some other viewport sizes and BackstopJS then will work like an addition eye on your workflow. The operational workflow of BackstopJS is given below:
- This tool creates various screenshots of your web application/web UI in multiple sizes.
- Once you are completed with your CSS editing, add BackstopJS to find any unwanted CSS regressions.
- It uses resemble.js, CasperJS, PhantomJS and slimerJs to report on visual changes.
This is another fantastic screenshot comparison tool which is developed by the employees of BBC News. It uses a faceless browser to capture screenshots of a web page on different environments and different times and then shows us the difference between two images. The areas which are different, highlighted in blue.
This is used with PhantomJs and SlimerJS as a navigation scripting and testing utility. This technology makes it easy to define a full navigation scenario and offers high level functions and methods to do most of the common tasks for example:
- It helps you to define and order navigation steps.
- Filling forms
- Clicking links
- Captures screenshots of a webpage.
- Catch errors and react accordingly
And many more such things.
So these are some visual regression tools that tops the list when it comes to UI testing. Help me to grow this list and drop your suggestions in the comments below.