Get attribute style from an element

[amadese]

Hi,

I have an element on my page:

<div cdktrapfocus="" role="dialog" tabindex="-1" class="eui-u-anim ux-message-box ux-message-box--danger ux-modal ux-modal--small eui-u-anim--flipInY eui-u-anim--medium" style="display: none;" id=my-message-box" aria-hidden="true" data-e2e="ux-modal"> Bla Bla </div>

I would like to check if the element is displayed or not (value of the property display)

I have tried that :
Command: storeAttribute
Target: Xpath=//*[@id="commitment-numbering-message-box"]@display
Value: myModal

But I obtained this response:
[info] Store ';' into 'myModal'

The value “display” could change when an action is done on the page, but there is still the “display” attribute in the tag.

I don’t know why I don’t get ‘display: none;’ into myModal
So I cannot check the value of the attribute “display”.

Could you please help me?

@ThanhTo Do you any idea how to proceed for checking the display css property of the element ?

[ThanhTo]

Try assertAttribute with the normal Target (I see @display at the end of your target so not sure if it’s normal) and the Value being "display: none;"

[amadese]

@amadese

Xpath=//*[@id="commitment-numbering-message-box"]@display

@ThanhTo
Thanks,
I retrieve the Xpath by a right click on the element in the Developer Console tool of Chrome and I do that:

command: assertAttribute
Target: xPath=//*[@id="commitment-numbering-message-box"]
Value: display: none;

I otain this result:
[info] Executing: | assertAttribute | xPath=//[@id=“commitment-numbering-message-box”] | display: none; |
[error] Invalid xpath [2]: //[

[ThanhTo]

Try removing the xPath= prefix

[amadese]

Same issue

[ThanhTo]

You can right-click on the element and choose Copy Selector instead and in the target use css= plus the copied text.

[amadese]

Now I obtain that:

[info] Executing: | assertAttribute | css=.ux-message-box | display: none; |
[error] Element css=.ux-message-bo not found

[ThanhTo]

@amadese

This is a problem of incorrect locators, you can click on the button next to the Target field, click on the element on the page, and the Target field will be set to a locator for that element.

[amadese]

I tried that and it’s the same issue

command: assertAttribute
Target: xPath=//*[@id="commitment-numbering-message-box"]
Value: display: none;

[info] Executing: | assertAttribute | //div[@id=‘commitment-numbering-message-box’] | |
[error] Invalid xpath [2]: //div[

Here my html code:

in the DOM the tag is still visible. Same for the

The value of the diqplay attribute change with the action. I would like to catch this value. Perhaps I could use the relative path ?

[amadese]

@ThanhTo

I think that it’s due to the command assertAttribute. I do that:

Command: assertElementPresent
Target: //*[@id=“commitment-numbering-message-box”]

And no error appears.

No I would like just to retrieve the attribute/or css property of the element inserted into the tag. Could you just help me with that ?

[ThanhTo]

assert-attribute.html (926 Bytes)

Please download and see the sample test suite and see if you can adapt to your own case.

[amadese]

@amadese

: display: none;

I put a relative path defined by:

Command: assertAttribute
Target: xpath=/html/body/app-root/ux-layout-app-shell/div/div/div/commitment-numbering-home/div/div/commitment-numbering-modal/ux-modal/div[2]/div/div/div[2]/uxmodalbody/commitment-numbering-form/form/ux-message-box/ux-modal/div[2]@style
Value: display: none;

It’s now working

Thanks for your help

[Igor]

Hello! I have a similar problem. But in my case the attribute has no name. I asked the developers, they said that this is normal. How can I compare an attribute without a name? In your example there is a name. Here is an example of my element and how I wrote the command according to your example:

[system]

Hi there,

Thank you very much for your topic! It may take a little while before Katalon team member or others forum members respond to you.

In the meantime, you can double-check your post to see if you can add any extra information i.e. error logs, HTML codes, screenshots, etc. Check out this posting guide to help us help you better!

Thanks!
Katalon Community team

[kazurayam]

<button disabled>

is effectively equal to

<button disabled="true">

The attribute has a name disabled with a value true.

[kazurayam]

Now you have this xpath:

xpath=//button[contains(@class,'Button-module__button__zKUo0')]@disabled

Here is a slight syntax error. You would rather want

xpath=//button[contains(@class,'Button-module__button__zKUo0')]/@disabled

You want a single slash character / before the attribute name. The / character separates a node of Element button and a node of Attribute disabled.

The @ is not a separator between nodes. The @ modifies the string “disabled” to be an attribute name. Without @, the string disabled will be interpreted to be an Element name, which is wrong in this context.

[kazurayam]

Since the button element has a unique id attribute, you can also write:

xpath=//button[@id='sagest-add-button']/@disabled

[Igor]

Thank you! This solution works! I left the value field empty. The test passed. If the button does not have this attribute, then the test fails. This is enough for me.

[Igor]

what value should I write in the value field in the recorder?

[kazurayam]

I don’t know.

I think that the W3C does not specifically define the value of disabled attribute.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-disabled

So the value returned by browsers will be implementation-dependent.

When I checked Chrome on mac, it returned a string “true”. Firefox, and others could return something different.