Is there a keyword that I could use (WebElement is Disabled)

Product Forums Katalon Studio
,
#1

Hi there,
I have a Month picker widget, where all the months until the current months are disabled and only the months from the current month are enabled or rather clickable.

I tried to use WebUI.verifyElementClickable() and tried to get the Attribute value for a element that is disabled
but the attribute value is showing as ‘true’ even when the element is disabled.

So I wanted to see If i could use isDisabled() method instead. But looks like Katalot does not have that implemented yet.

Please guide me the best approach.
Scenario :- Parse through the month picker and click on the first encountered month that is active (Clickable).

Thanks
Rahul

#2

Then that is broken HTML. The disabled attribute is a boolean - if it is present, regardless of its value, the element is disabled. If it is not present, the element is not disabled.

These are some possible values ALL of which mean “this element is disabled”:

  1. disabled=“disabled”
  2. disabled=“DISABLED”
  3. disabled=""
  4. disabled

These values not allowed on boolean attributes

  1. disabled=“true”
  2. disabled=“false”

See https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute

Now to your problem…

Can you post the HTML for the calendar and a screenshot?

1 Like
#3

Agreed, we need to see the HTML. You will likely need to check for the presence/absence of some other attribute to check interactability.

#4
Jul Aug Sep
#5

<tr class="mtz-monthpicker"><td class="ui-state-default mtz-monthpicker mtz-monthpicker-month ui-state-disabled" style="padding:5px;cursor:default;" data-month="7">Jul</td><td class="ui-state-default mtz-monthpicker mtz-monthpicker-month ui-state-disabled" style="padding:5px;cursor:default;" data-month="8">Aug</td><td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="9">Sep</td></tr>

#6

image

#7

You can use the CSS :not() pseudo-class selector. Based on the HTML you provided:

td.mtz-monthpicker-month:not(.ui-state-disabled)

You can try using that as the foundation of a TestObject definition but I think it might return you a collection of objects (a list or array). You could also use it in a call to JavaScript where you might gain more control:

String js = '''
  // get all the elements that are not ui-state-disabled
  var td = document.querySelectorAll("td.mtz-monthpicker-month:not(.ui-state-disabled)");
  // click the first one
  td[0].click();
'''
#8

Thank you Russ & Brandon, I will give that a try and update you if successful. :slight_smile:

#9

Using xpath, this is really really easy as well. Try putting this xpath in your Test Object:

//tr[@class='mtz-monthpicker']//td[not(contains(@class, 'ui-state-disabled'))]

Then you would just click on that test object using the WebUI.click() method.

@Russ_Thomas The click() method just invokes the Se findElement() method (as opposed to the findElements() method), so even if there are multiple matching elements, it will click the first one.

1 Like
#10

Hi Brandon,
Thank you!
Q: Is this the complete x-path ?
//tr[@class=‘mtz-monthpicker’]//td[not(contains(@class, ‘ui-state-disabled’))]
or are they two x-paths here?
//tr[@class=‘mtz-monthpicker’]
//td[not(contains(@class, ‘ui-state-disabled’))]

#11

It’s all one xpath.