Check the Button bacgroundColor based on a part of the class name

Product Forums Katalon Recorder
1

Hi,

I have a button containing a span whose the attribute class contains the word “edit”:

<button class="ux-button ux-button--primary ux-button--with-label" type="button" tabindex="0" aria-disabled="false" data-e2e="ux-button">
<span class="eui-icon eui-icon-edit ux-button__icon ng-star-inserted"></span>
<span class="ux-button__content">Edit</span>
</button>

I would like to check the background color of this span element.

I do that:

image
image847×156 13.7 KB

But I don’t know if there is a better solution to identify the element based on the property class.
Thus I don’t know which command to use for checking the property backgroundColor on the element whose the attribute class contains the word “edit” (in order to identify this button).

Could you help me to do that ?

2

I don’t quite understand what you mean, but I think it can be solved with storeelementpresent

3

Hi @amadese

Please try the locator div[class*='edit']

A relevant StackOverflow answer:

4

I don’t do a storeEval.

You could try assertEval | getComputedStyle(document.getElementsByClassName(‘ux-button_content’)).getPropertyValue(‘background-color’) | rgb(0, 68,148)

1 Like
5

Hi @dennis.hohn I already used that. It’s working usually. But If I have 2 buttons: one for edit, and another for Cancel on the same page, only a part of the class name changes:

Edit:

<button class="ux-button ux-button--primary ux-button--with-label" type="button" tabindex="0" aria-disabled="false" data-e2e="ux-button">
<span class="eui-icon eui-icon-edit ux-button__icon ng-star-inserted"></span>
<span class="ux-button__content">Edit</span>
</button>

Cancel:

<button class="ux-button ux-button--danger ux-button--with-label" type="button" tabindex="0" aria-disabled="false" data-e2e="ux-button">
<span class="eui-icon eui-icon-close ux-button__icon ng-star-inserted"></span>
<span class="ux-button__content">Cancel</span>
</button>

As you can see, the attribute class can change a little bit: “eui-icon eui-icon-edit” or “eui-icon eui-icon-close”.
That’s why I asked you how to identify better the button when only a part of the class name changes.
How I can do that ?

6

Hi there, did you try the one I suggested?

1 Like
7

@amadese in the case of having multiple elements, you will need to specify the location of the button you are trying to read. Note the added [1] below. You’ll need to determine what the location is and adjust that number locate the element you are looking to find.

assertEval | getComputedStyle(document.getElementsByClassName(‘ux-button_content’)[1]).getPropertyValue(‘background-color’) | rgb(0, 68,148)

Also, @ThanhTo 's suggestion may work for you. It seems a little wide open if you are looking for a specific element.