Web components styling tests automation, cross-browser solution

It’s been quite some time since my last post concerning the RadControls automation tests developed with Selenium. We still have a lot to share about our Selenium adventure, which could help those, interested in similar solutions.

First of all, I believe you are unable to completely verify the visual appearance of your Web application via automated tests. There is no way you can skip the manual check if the app “looks” good and has no visual glitches anywhere. Still, the client-side styling tests automation can be considered to be the first step for the necessary web page appearance verification.

I would separate the main approaches I follow into two: through the rendered HTML and via JavaScript.

Exploring the page output through element locators is a fundamental task in Selenium. For a styling test one can locate the particular element and perform a check for its style attribute.

Let’s take this demo for example:
http://www.telerik.com/demos/aspnet/Calendar/Examples/DateTimePicker/Templates/DefaultCS.aspx

I like it because of the RadTimePicker template buttons. Each button is colored either in red or blue depending on whether it is declared within the Time or AlternatingTime template. So let’s open the Firebug and inspect a button element:

I would go for a CSS selector to locate the element and simply check its attribute through assertAttribute  command:

<tr>

    <td>assertAttribute</td>

    <td>css=#RadTimePicker1_timeView button:contains('9:00')@style</td>

    <td>width: 80px; color: Red;</td>

</tr>

Perfect! I run the test in Firefox (my default browser) and it verifies the button’s style. Then run it in IE and ... it fails. It simply returns an ‘object’ in IE:

Actual value '[object]' did not match 'width: 80px; color: Red;'

Now let’s see the second approach. The key is the cssText attribute of the DOM element’s ‘style’. The following script test does the trick in Firefox for the ‘red’ button from the above example:

<tr>

    <td>assertExpression</td>

    <td>javascript{this.page().findElement("css=#RadTimePicker1_timeView button:contains('9:00')").style.cssText}</td>

    <td>width: 80px; color: Red;</td>

</tr>

That’s good, but in IE it fails again:

Actual value 'WIDTH: 80px; COLOR: red' did not match 'width: 80px; color: Red;'

You notice the upper case as well as the missing semicolon at the end. To work around that, one can call toLowerCase method reaching the following cross-browser solution:

<tr>

    <td>assertExpression</td>

    <td>javascript{this.page().findElement("css=#RadTimePicker1_timeView button:contains('9:00')").style.cssText.toLowerCase()}</td>

    <td>width: 80px; color: red*</td>

</tr>

That’s it! Looks a bit tricky at a first glance but does a perfect job.

Numerous RadControls tests use the above solution. Hope you like it too!

-Konstantin