Browser-agnostic color verification using WebAii & Automation Design Canvas

Color style verification in WebAii and Automation Design Canvas is one of those nice-to-have features that saves testers some cycles especially when trying to make an automated test run cross browser (specifically in IE and Firefox). If the application you are testing uses style sheets - which most of today's rich web applications do – there is a good chance you might have to verify a style on a specific tag or that a specific tag has changed color based on its cascaded style sheet. WebAii and Automation Design Canvas offer specific functionality to help address the color formatting for computed styles.

Let's first take at look at why computed styles for color verification causes problems for testers:

The issue is related to how IE and Firefox return colors when it comes to computed styles:

In IE, computed styles accessed using (element.currentStyle) return color (i.e. backgroundColor, foreColor) using the following format : #xxyyzz

FireFox on the other hand always returns the color in the following format: rgb(x,y,x)

Typically , when writing automated tests for such a scenario (that you wish to run on both IE and Firefox), you end-up having to fork your code based on each browser type and do the validation using the specified format.

Well not anymore…., let's take a look at what WebAii 1.1 offers in terms of support in this scenario:

WebAii 1.1 Framework

There are several built-in features in WebAii framework that address this scenario:

1. HtmlStyle object:
   

   If you notice, our HtmlControl.GetComputedStyle() returns an HtmlStyle object, not a string value. The GetComputedStyle() function retrieves the style from the browser DOM and places it in the HtmlStyle object for further processing. If you wish to get the value immediately, you always call the HtmlControl.GetComputedStyleValue() which gets the actual style value as a string.
   

   The HtmlStyle object offers the following facilities to make style validation simple and more straigh-forward for colors:
   

• HtmlStyle.IsColor(): This call checks to see if the style returned is a color or not. If for any reason you have code that generically processes styles, you can use this to distinguish between color styles and other styles
  
• HtmlStyle.ToColor(): This method is very powerful and is where we abstract out the formatting between IE and Firefox. This method simple parses the value out for you and returns a System.Drawing.Color object that you can then use to validate against another System.Drawing.Color you might want to check against.
  

For example:

The following line of code can be used to validate that the background computed style color for a div is red. This line of code works for both IE and Firefox:

Assert.AreEqual<Color>(Color.Red, myDiv.GetComputedStyle("backgroundColor").ToColor());

1. AssertStyle() extensions.
   

   In WebAii 1.1, we introduced verification extensions to help facilitate HTML specific validation. The AssertStyle() class takes advantage of the above functionality to abstract out the browser formatting specifics and make color verification completely seamless.
    

   For example:
    

   The following validation will assert that the backgroundColor style on the Div tag is red regardless of the browser used.
    

   myDiv.AssertStyle().ColorAndBackground(HtmlStyleColorAndBackground.BackgroundColor, "Red");
   

Automation Design Canvas 1.0

In Automation Design Canvas 1.0 (ADC), we consume the above functionality inside the style verification sentences and we make it completely straight forward to craft and execute color verification. In ADC, we internally persist colors in #XXYYXX format and always covert (named/rgb/#xxyyzz) colors to the #XXYYZZ format. Using that format comparisons are done. Here is how a color style verification looks like in ADC 1.0:

For example, if you invoke verification to validate the forecolor of the following text on msn.com home page:

The verification sentence builder will automatically resolve the color to its #XXYYZZ format as shown below.

Definietly a craft and forget color validation. J.