How to verify CSS attribute in Katalon Recorder?

Is it possible to verify a CSS attribute like text color in Katalon recorder?

Hi Jonathan

Using this very post to create an example script with, I put together the following line of code that will do what you have said:

Command: assertEval
Target: window.document.defaultView.getComputedStyle(window.document.getElementsByClassName(‘title_header_detail_discussion’)[0]).getPropertyValue(‘color’)
Value: rgb(105, 105, 105)

In this case, as the CSS colour attribute is not being applied directly to the element (the post header/title in this case), the attribute is an inherited one, so it is important that we work out what value the browser has calculated for the font colour CSS attribute (which is what the browser calls the “Computed Style”).

In this example it is using an RGB colour of “105, 105, 105”, so we are telling Katalon this is the colour it needs to verify for (if you want to know what colour the browser is using, use Inspect (Element) for the text and view the Computed Style tab, then look at the RGB value specified for the “color” attribute.

We use assertEval as we are comparing values (what value is defined for the DOM element and what is the value we are expecting).

The target is asking the browser to return the computed CSS style for the DOM element we want, but via “getPropertyValue(‘color’)”, it is narrowing down the value it is looking for to just be the one for the colour of the CSS attribute.

If you then adapt the above example to what you are using on your site, then it should in theory work.

1 Like