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

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:

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 ?

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

Hi @amadese

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

A relevant StackOverflow answer:

I don’t do a storeEval.

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

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 ?

Hi there, did you try the one I suggested?