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

Product Forums Katalon Recorder
1

Hi,

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>
</ux-badge>

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

2

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:

3

@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 ?

4

@amadese

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

verify-button-color.html (1.9 KB)

image
image1434×272 29.1 KB

5

@ThanhTo thanks
I’m sorry but what I have to do exactly for the test on the page https://www.w3schools.com/css/css3_buttons.asp: 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

6

@amadese

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

image
image1656×578 38 KB

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.

image
image804×664 153 KB