Validate Styling of Web Application using Telerik Test Studio

Apart from Functional, User Interface layout verifications, Test Studio can be used for validating the Styles of a web page which is under test.

I came across this feature, while evaluating an approach to test the web application which has multiple themes. Your automated tests should even run when the styling of your web page has changed. To ensure that styling did not impact any User Interface layout and caused functionality issues.

Let's see how to do it.

1. Start recording your web page.
2. Highlight the element that you want to validate for CSS.
3. In the DOM explorer, Select the element and click on Style in Verifications. (as shown in below image).

There are two Primary in the Styles that you need to choose depending on the web page under test. Basically, you should know, whether your application under test styling comes from a CSS file or from a web page itself.  
a. Computed Style - A inherited or cascading styles
b. Inline Style

Mostly, the modern web applications use CSS file from where the styles are used.

There are many options in Style, which lets you validate almost all variations of a web page styling.

You could also use regular expressions in case the web page styling changes dynamically.
For e.g. Themes.

4. Once you have selected to use a specific criteria, Select Add step. This will create a step in the Test.

In this way you can test the Style's of a web application.