The Issue

The variables that make up our CSS styles inform what we are seeing on screen for your HTML elements. Header colors, button widths, text alignment; almost any stylistic choice will fall under the CSS umbrella. Making sure your applications looks as intended is just as important as testing the functionality – lets take a look at how we can validate our CSS elements.

The Answer

By appending .style(‘background’) to the end of a Watir Webdriver command, we can have text returned that reflects the CSS property of our given element. The ‘background’ can be replaced with whatever we are checking – color, alignment, etc:

Running any of these commands will produce an output in our command line – this will inherently not be validating anything. However, if we add some basic if logic, we can turn these steps into a validation:

The above code will check if the output (font size) is equal to 11 px, and if not, it will fail the script at this step. Lets see how we can implement all of this in a real script.

We’ll use FFCRM, a simple CRM application. We will be validating CSS elements for our turquoise email button under the My Tasks header. We go to into inspect element within Chrome, as we would trying to find other elements, and look under the Styles section in the bottom right. From here, we’ll choose a few elements to validate – width, text align, font size.

 

Screen Shot 2017-12-29 at 11.16.12 AM

Now that we know what we’re testing for, we can implement the CSS validation code into our Waitr Webdriver script:

This script will open our browser, navigate to our FFCRM, login, and proceed to cycle through checking that we are seeing the correct UI for our given user access.

123123123

Takeaway

We can see how simple implementing CSS tests can be using Watir Webdriver. Again, making sure your website is visually sound makes for a more holistic testing process – purely covering functionality just won’t cut it. Additionally, you can look further into UI test automation with the Galen Framework, which allows you to construct test automation for responsive testing.