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

Technology specific object identification, supported applications, web technologies, and 3rd party controls.
mrt
Posts: 49
Joined: Mon Mar 16, 2020 11:31 am

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

Post by mrt » Tue Nov 10, 2020 12:34 pm

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

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 6360
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

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

Post by odklizec » Tue Nov 10, 2020 12:38 pm

Hi,

Could you please upload a Ranorex snapshot (not screenshot), eventually, post a link to sample HTML page with such checkbox?
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

mrt
Posts: 49
Joined: Mon Mar 16, 2020 11:31 am

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

Post by mrt » Tue Nov 10, 2020 12:56 pm

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_46 -DevTools - vizbox.avl.com_usage_controls_avl-checkbox_samples.png (15.2 KiB) Viewed 73 times
2020-11-10 12_54_33 -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 (16.38 KiB) Viewed 73 times
thanks
Attachments
checkbox-snapshot.rxsnp
(341.62 KiB) Downloaded 3 times

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 6360
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

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

Post by odklizec » Tue Nov 10, 2020 1:20 pm

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
mat-checkbox.png (31.17 KiB) Viewed 72 times
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 6360
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

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

Post by odklizec » Tue Nov 10, 2020 1:38 pm

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.
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

mrt
Posts: 49
Joined: Mon Mar 16, 2020 11:31 am

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

Post by mrt » Tue Nov 10, 2020 4:33 pm

Thanks for your answer - although I hoped to hear something other. ;)
odklizec wrote:
Tue Nov 10, 2020 1:20 pm
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.
odklizec wrote: 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
Posts: 49
Joined: Mon Mar 16, 2020 11:31 am

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

Post by mrt » Fri Nov 13, 2020 11:50 am

here is the snapshot of some chips input, where I do not see any way to distinguish between "checked" and "unchecked"
any idea?
Attachments
Filter_chips.rxsnp
(578.71 KiB) Downloaded 2 times

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 6360
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

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

Post by odklizec » Fri Nov 13, 2020 12:57 pm

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?
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

mrt
Posts: 49
Joined: Mon Mar 16, 2020 11:31 am

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

Post by mrt » Fri Nov 13, 2020 3:12 pm

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;
        }
    }
}

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 6360
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

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

Post by odklizec » Mon Nov 16, 2020 8:25 am

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 ;)
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration