How to Check that the color of an element is the color expected


I would like to check that the color of a button is the expected color. I don’t know exactly which command I have to use in Katalon Recorder.

Here my element:

<ux-badge typeclass="success" class="ng-star-inserted">
<span class="ux-badge ux-badge--success ux-badge--pill ux-badge--small" data-e2e="ux-badge">Open</span>

Here my css style:

ux-badge--success {
    background-color: rgb(70, 122, 57);

Could you please help me with that ?

Thanks in advance for your help

Katalon Recorder commands are similar to Selenium, here’s a StackOverflow answer for Selenium IDE that may be applicable:

You may want to check out the sample project for more examples:

@ThanhTo Thanks for your help. I tried to do the same example than the webpage StackOverflow. Nevertheless it seems that the Katalon recorder is a little bit different: the Command Execute and assert are not present in the Katalon Recorder tool.

Could you help me please with that ?


Please download the following sample and see if you can adapt it to your own case.

verify-button-color.html (1.9 KB)

@ThanhTo thanks
I’m sorry but what I have to do exactly for the test on the page is it correct ?

Command: storeEval
Target: getComputedStyle(document.querySelector("#main > button:nth-child(13)")).backgroundColor

But I don’t know which value I have to do for the Value field

Thank you


Yes, that’s correct. I am verifying the color of the Blue button.

To adapt the sample to your case. First, change the URL. Then you need to replace #main > button:nth-child(13) with your own locator.

If you open your website with Chrome, right-click on an element, and chooses to Inspect element, you will see Chrome Dev Tool open. You can then right-click on the element in the Chrome Dev Tool, and select Copy > Copy Selector.

For the blue button, its locator is #main > button:nth-child(13), but for your element it will be different.