The Idea of visual testing of your website has been around for a while. This can range from someone manually checking a web page or more for visual defects or automating the process of detecting visual changes. The cause for unwanted visual changes usually comes from CSS stylesheet changes.

For developers, it is important to understand how to incorporate the visual testing into your existing workflow. As usual there are multiple options out there and we will be listing them below. from the easiest to the most complex.

Single Environment (Shared Hosting)

If you website is hosted on a shared hosting environment (i.e. godaddy, bluehost, etc) and that you make changes directly on that environment, you could create visual snapshots of your website before you make the changes. After the changes has been made you could create snapshot and compare it to your previous snapshot.

Multiple environments

If you are hosting on Acquia, Pantheon, Platform.sh or other providers that provide development and staging environment you could leverage them. The main idea is to compare your environments. So the best you can do is to do release to staging environment (including pulling in fresh database from production) and then compare your production and staging environments. Because of having same database your content related changes should be minimal so you will be in much better shape to identify visual changes caused by release.

Local development

You could also create “snapshots” of your own development environment locally. In this way any moment you can check what visually has changed on your site. You could even keep your reference set of screenshots and compare each of your change against it. In this way you will be 100% sure what pages got affected by your css changes.

CI workflow

If you are using Continuous Integration development workflow where you have environment per your pull request (if you are using github or similar workflow), you could run your visual tests per your build. Because this is most flexible workflow you could compare your builds either against your local set of screenshots or against your development / staging environment.

Tools

There are multiple tools you could use for each of workflows described above. There are plenty open source solutions like wraith, galen framework and others.

I would like to share the platform we are actively developing and using -- http://backtrac.io. This is SaaS platform that keeps all your screenshots in the cloud and has APIs for CI integration (http://backtrac.io/documentation/rest-api). All you need to get started is to have list of your site’s URLs ready. Meanwhile tool can build the list by crawling the site on its own.

Some of advanced features of the platform are:

• compare environments
• exclude specific elements form the page (i.e. banners)
• extract element from the page (if you want to test only specific part of the page)
• scrolling the page and delay before making screenshot
• automated monitoring set up

For more information about features please visit http://backtrac.io/documentation

You are more than welcome to give this tool a try. We would be very happy to hear your feedback about the service and happy to talk about it.

Tags: drupal planet