Jan 14, 2014

Testing colors on your website with Galen Framework

In previous articles I have been writing about layout testing in Galen Framework but there is also one field left unexplored – color testing. As of version 0.7.2 Galen Framework has a so called "color scheme" spec which allows you to check the color distribution for a specific element on page. Why would you need this? For example lets say you have a special form and by requirements you have to make it grayed-out for unregistered users. How would you check that with automated tests? With Galen Framework now you can do it by taking a screenshot and then checking color distribution on the form. Of course it is still far away from ideal visual verification but at least it is better than just verifying the CSS classes on the elements. Also for the moment this works best only in Firefox as there are some issues with taking scheenshots in Chrome and IE.

If you have version older than 0.7.2 please download the latest version of Galen Framework here
Lets see how we could use this spec...

How does it work?

Color distribution is calculated by analyzing picture pixel by pixel. So in the end for the selected area you can write something like this:

login-button: color scheme: 45 to 48% black, 2% white, 5% #fa8e06

Galen Framework will pick up given colors from spec and then will compare it with the real usage.

Example

Lets take a look at this page http://samples.galenframework.com/tutorial-color-scheme/tutorial.html. This page has a customer form which is grayed-out. You can toggle the state of the form by clicking "Enable/Disable customer form" link

Now lets implement two tests which would check both states of this form.
First of all we need to make a js script which we will inject once we are about to test the colors for enabled form. Create a file enable-form.js and put down the following:

$(".customer-form").removeClass("disabled");

Now lets make a page spec for disabled form customer-form.spec:

=========================================== customer-form css .customer-form =========================================== customer-form color scheme: 95% white, 1% #777777, 2% #aaaaaa

Now lets write down a different color distribution for enabled form in customer-form-enabled.spec:

=========================================== customer-form css .customer-form =========================================== customer-form color scheme: 95% white, 1% #479C13, 2% black

And now it is time to connect all those scripts and specs in our test suite. Create a file my.test and write down the following:

Customer form test disabled/enabled http://samples.galenframework.com/tutorial-color-scheme/tutorial.html 1024x768 check customer-form.spec inject enable-form.js check customer-form-enabled.spec

Now we can run it with the following command:

galen test . --htmlreport reports

The test will succeed but I have also prepared the example of failing test report so you can see how Galen Framework will spot the wrong colors in case http://samples.galenframework.com/tutorial-color-scheme/reports/report.html

Recap

As you see color testing can become a usefull technique as it checks elements visually instead of checking CSS/HTML code. It is fairly simple to check and easy to play with. Let me know what you think about it in comments.

Posted in Galen, Web, Selenium, Automation
comments powered by Disqus