How to Assert Background-Color (or other styles) of an element using Virtuoso

Article Overview:

This article will cover how you can achieve the following:

How to assert background colour or other styles of an element using Virtuoso by using an extension.

Problem Statement:

Certain scenarios may require verification of element styles like font color, font size, or background color. 

To assert these properties, there is an extension in Virtuoso called getComputedStyle.

Solution: 

1. Add the following extension into the Project/Organization
   • Use getComputedStyle extension
2. Use this extension in the journey by using the following syntax
   • getComputedStyle("xpath or css selector", "background-color") returning $backgroundColor
   • To get the value of background color and store it in a variable $backgroundColor 
3. Use the following NLP to assert the property using the following syntax
   • Assert $backgroundColor equals "rgb(63, 0, 151)"
   • use the desired value for the RGB

Note: In the extension, first pass xpath as selector. If that doesn’t work, try with css selector.

Using the same extension we can also assert other properties of the element by replacing background-color with any other style property you want to evaluate.

For example: some common cases of styles for an HTML element are:

1. background-color property defines the background color

Test Steps to use it in Journey:

• getComputedStyle(".mark-warning", "background-color") returning $background_color
• assert ${$background_color == "rgb(242, 109, 33)"} equals 'true'

2. color property defines the text color

Test Steps to use it in Journey:

• getComputedStyle(".primary-btn", "color") returning $color
• assert ${$color == "rgb(242, 109, 33)"} equals 'true'

3. font-family property defines the font to be used

Test Steps to use it in Journey:

      getComputedStyle("#gbw > div > div:nth-child(2)", "font-family") returning $fontFamily
4. font-size property defines the text size

Test Steps to use it in Journey:

• getComputedStyle(".primary-btn", "font-size") returning $fontSize

Other examples:

We can also verify the text-align, line-height and padding properties similarly.