Apply Button xpath not different when clickable and not clickable

Robot Framework
1

Hi,
when the apply button is clickable and not clickable, they both have the same xpath. I will like to know how this can be handled. An example of code for the both of them is down below i removed some of it for privacy reasons
uc
c

//*[@id="button-content"]
2

Hi @yebubu ,

To answer your problem you’ll have to look at the html for that button (and maybe the surrounding elements) to figure out what is triggering the state change from not clickable to clickable, it can vary depending on your application’s developers, here are some common methods used:

  • the button has a “disabled” attribute in the button html tag
  • the button is a input html tag with a type button has a “disabled” attribute in the input html tag
  • the button (input/div/span/link styled as a button) has a class that gets removed when the button becomes active
  • the button (input/div/span/link styled as a button) parent/grandparent element has a class that gets removed when the button becomes active

Given you didn’t show the html of the button in both states we have no way of knowing what the app developer did, hopefully i’ve given you the necessary clues to figure it out :crossed_fingers:t2:

Dave.

1 Like
3 
<button id="button-38-button" role="button" class="Widgets button datagrid-row-actions button--call-to-action" tabindex="0" aria-disabled="false" data-test="button"><span class="button__ripple" style="display: inline-block; position: absolute; overflow: hidden; min-width: 100%; min-height: 100%; top: 0px; left: 0px;"><span style="opacity: 0; width: 131.482px; height: 131.482px; transform: translate(-50%, -50%); transition: opacity 900ms cubic-bezier(0, 0, 0.2, 0) 0s; position: absolute; border-radius: 50%; pointer-events: none; top: 23.6666px; left: 2.66666px; background-color: rgb(15, 57, 127);"></span></span><div id="button-38-content" class="button__content"><span class="button__text">apply</span></div></button>

<button id="button-38-button" role="button" class="Widgets button datagrid-row-actions button--call-to-action button--disabled" tabindex="undefined" aria-disabled="true" data-test="ccfk-button" disabled=""><div id="button-38-content" class="button__content"><span class="button__text">apply</span></div></button>
4

This looks like the class you need to watch out for:

So an xpath something like this will identify that the button is disabled:

//button[contains(@class, "button--disabled")]/div[@class="button-content"]

So you could reverse this with something like:

//button[not(contains(@class, "button--disabled"))]/div[@class="button-content"]

to detect that the button is enabled.

You could also use the aria-disabled attribute:

Or the disabled attribute:

Looks like you have lots of options to play with.

Dave.

1 Like