HTML unary attributes: How to identify attribute without a value?

[mrt]

Dear all,

as I learned today there are some so-called unary attributes in HTML, which means attributes without a value.

So instead of

Code: Select all

<my-checkbox checked=true>
<my-checkbox checked=false>

it reports

Code: Select all

<my-checkbox checked>
<my-checkbox>

So the attribute has no value which is toggled between true/false,
but the attribute is present when true, and is unavailable when false.

How to cope with that in Ranorex?

When I use Spy, it does not report the checked property at all when not set (which is as expected),
but reports checked=false when set (most likely because there is no value and this maps to false per default?)

thanks

[odklizec]

Hi,

Could you please upload a Ranorex snapshot (not screenshot), eventually, post a link to sample HTML page with such checkbox?

[mrt]

This is a custom checkbox control, but this is not only relevant to checkboxes, I see that in other components too (like chips inputs).

These are custom controls, but I have been told unary attributes are standard HTML functionality.

I attached a snapshot, although I think you cannot reach the URL because it is internal, I don't know if that helps too?

Here are the screenshots:

2020-11-10 12_54_46 -DevTools - vizbox.avl.com_usage_controls_avl-checkbox_samples.png

2020-11-10 12_54_33 -DevTools - vizbox.avl.com_usage_controls_avl-checkbox_samples.png

thanks

[odklizec]

Hi,

I'm afraid, you are out of luck here? This kind of custom element is apparently not supported by Ranorex? In case of angular-based (or similar) elements, Ranorex reads all kinds of things (including input states) stored in class/safe-class property. Sadly, it does not appear to be a case of your custom control. Your best hope is to ask developers of this control to make the control more "standardized"?

Here is an example of material design checkbox, which shows number of usable properties in Class property. Nothing of this is unfortunately shown in your checkbox.

mat-checkbox.png

[odklizec]

Hi again,

There indeed is an option to detect if the checkbox is checked or not. You will just have to validate/read ID of div under span icon tag...
If checked, ID of given div is checkedIcon if unchecked it says outlineIcon...
/dom[@domain='vizbox.avl.com']/body[@class='avl-body']//iframe//tag[@innertext~'checkbox']//label/span[@id='icon']//div[@id='checkedIcon']
/dom[@domain='vizbox.avl.com']/body[@class='avl-body']//iframe//tag[@innertext~'checkbox']//label/span[@id='icon']//div[@id='outlineIcon']
So this way you validate if the checkbox if checked or not.

[mrt]

Thanks for your answer - although I hoped to hear something other.

Your best hope is to ask developers of this control to make the control more "standardized"?

That was my first guess, and my developers tell me this is standard
and point me to protractor or jasmine for using this angular components.

You will just have to validate/read ID of div under span icon tag...

That's exactly what I do for checkboxes,
but now I face other elements like chips, which do not have this underlying span-tag so I have no idea how to cope with that.

[mrt]

here is the snapshot of some chips input, where I do not see any way to distinguish between "checked" and "unchecked"
any idea?

[odklizec]

Hi,

It seems that in case of 'chips', you need to find the tag with class 'checkIcon' and evaluate its visibility. Visible=true means that the chip is checked

This xpath returns all checked chips. In your particular case, just the first one.
/dom[@domain='vizbox.avl.com']/body[@class='avl-body']//div[@class='sideNavAndContent']//iframe//tag[#'filterChip']/div[@class='container']/?/?/div[@class='text']/preceding-sibling::tag[@class='checkIcon'][@visible='true']

As for Angular checkbox standardization, well, I'm not an expert, but it seems that Angular checkboxes looks (internally) somewhat differently? So I would say that your custom ones are customized and not quite following Angular standard?

[mrt]

sounds like a plan, thank you.

may you lead me to a short command on how to get the childs visible attribute, when the whole chips element is passed to the user code function?

thanks buddy

this is how I get around, but obtaining all children and iterating through list seems unnecessarily complicated to me

Code: Select all

bool isChecked = false;
WebElement chips = webElementInfo.CreateAdapter<WebElement>(true);
						
foreach (var child in chips.Children)
{
    if (child.Element.GetAttributeValueText("TagName").Equals("avl-icon"))
    {
        if (child.Element.GetAttributeValueText("class").Equals("checkIcon"))
        {
            isChecked = child.Element.Visible;
        }
    }
}

[odklizec]

Hi,

I'm afraid, I'm not aware or I can't think of shorter way to get only checked items? Well, the xpath I provided should return only checked items...
/dom[@domain='vizbox.avl.com']/body[@class='avl-body']//div[@class='sideNavAndContent']//iframe//tag[#'filterChip']/div[@class='container']/?/?/div[@class='text']/preceding-sibling::tag[@class='checkIcon'][@visible='true']
So if you would like to do an action over only checked chips, you will still have to use some kind of foreach loop? But the above xpath should make the loop shorter, because it should return only checked chips and not all of them. Of course, if there is checked only one chip, it should return only one chip and end here

[mrt]

Ok, now it happened what I was afraid of:
The internals of the elements changed, now I face several implementations where the internals are different, so this approach is not useable anymore.

So back to my initial question:
How can I check, if an element has an attribute?
(the attribute itself, not its value)?

I can't believe that there isn't anything like element.hasAttribute?

Edit: something weird happens:
Browser console shows me for unchecked:

Code: Select all

<my-checkbox checked> ... // checked
<my-checkbox>         ... // unchecked

but in Ranorex Code, when I run

Code: Select all

checkbox.Element.GetAttributeValue("asdf")

I receive null, which is great, this way I could tell if this attribute is there.
But

Code: Select all

checkbox.Element.GetAttributeValue("checked")

returns False, on checked as well as unchecked where this attribute does not appear anywhere in browser console or in Spy.

What is going on here?

thanks, greets

[mrt]

For others who run into the same issue:

Main reason seems to be that Ranorex does not recognize all attributes on custom, non-standard HTML elements.

Code: Select all

GetAttributeValue()
GetAttributeValueText()

does not work in this case, because according to documentation:

Return Value
Type: T
The attribute value of the specified type or the default type value if the attribute was not available.

and the default value for a boolean is False.

If the element is checked, Spy recognizes it as

Code: Select all

checked = False

and if the element is unchecked, the attribute is not available and also results to False.

Solution for me is to get the list of all dynamic attributes and see if the "checked" attribute is in there.

Code: Select all

bool currentState = myItem.Element.DynamicCapability.Attributes.ContainsKey("checked");