Automating Front End Layout Testing

While working on improvements to the front end of our Developer Dashboard and Calendar Sandbox we found out that our development speed was hindered by a lack of tooling, such as automated testing, and the need to manually test multiple pages after making style changes.

Automation to the rescue

It is common for an application to have automated unit tests testing discrete bits of code, or end-to-end tests to ensure visiting a page will perform and render the expected results. However, what is less common is a mechanism for automatically testing front-end styles and layout.

Automatically testing front-end styles and layout is especially tricky because there are many more unknown variables governing how a web page will render. Variables like the device, the browser and the resolution. As a result, this is a problem often discussed but rarely solved.

Keep it simple

In order to streamline the testing process we decided to set up a basic, single device and single browser front-end testing mechanism using the JavaScript tool PhantomJS.

We accepted automated testing shouldn’t be relied upon in and of itself – a degree of manual testing should still be performed. However there’s a lot of comfort in knowing a safety net is there to spot and identify issues that may have been introduced via a recent update.

How the layout testing tool works

To work our PhantomJS tool into our workflow we set up a Git pre-push hook. When a member of the Cronofy team attempts to push a set of changes to a Cronofy web application, the filenames involved in that change are checked to see if they involve any amendments to CSS or HTML files. If CSS or HTML files are changed, then our tool is fired up, and it follows this logic flow:

‍

The script generates webpage screenshots for the files which have changed and asks the user to verify that they are correct.

No silver bullet

This isn’t whole answer to avoiding any unintentional layout changes or collateral damages when working on the presentation of our web applications. It is also not a replacement for manual testing, but it can help catch those embarrassing unintentional mistakes before they are pushed live. You can check out the code behind this tool on GitHub.

Offering a consistent and seamless user experience is something we pride ourselves in and our new automated testing tool helps us ensure that we maintain it.

Future plans

As a future potential expansion of this project, PhantomJS has the functionality to interact with web pages as a user would in their browser. This means it would be possible to test that forms post as expected, and even test out interactive JavaScript sections to websites for greater ease of mind when submitting work.

In just a few weeks this tool has already helped prevent a number of issues going to QA, such as unexpected layout changes and pages not rendering. It has helped to save valuable development time and I would highly recommend investing the time in making one for your own system and websites.

If you are already using an automated testing solution or if you are planning on building one in-house don’t hesitate to hit us up on Twitter to share your best practices!