Page 1 of 1

Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Mon Sep 17, 2018 4:19 pm
by sstowe
I have a <select> tag that is causing me pain.

Code: Select all

<select name="widget-injector">
        <option value="-1">Add Widget</option>
            <option value="SMBACCTLIST">Accounts</option>
            <option value="ALERTS_CENTER_WIDGET">Alerts Center</option>
            <option value="CHECKFREE_SSO">Bill Payment Enrollment</option>
            <option value="DOWNLOAD">Download</option>
            <option value="SMBEMPLIST">Employees</option>
            <option value="QUESTIONS">My Security Questions</option>
            <option value="NOTIFICATIONS">Notifications</option>
            <option value="OUTBOUND_SSO">Outbound SSO</option>
            <option value="PASSCODEMAINT">Passcode Maintenance</option>
            <option value="SMBCONTACTLIST">Payees</option>
            <option value="SMBPAYLIST">Payments</option>
            <option value="REPORTS_MANAGEMENT">Reports Management</option>
            <option value="SMBSTOPLIST">Stop Payments</option>
            <option value="SMBTRANSFERLIST">Transfers</option>
            <option value="USER_MAINT">User Maintenance</option>
    </select>
My test clicks the repo item (saved in attached snapshot) then clicks on the Notifications option.
widgetselect.rxsnp
The test runs without generating an error on Notifications click. I can see the mouse move to the upper right hand corner of the browser document.

How the heck to I select an option from this select? Thanks!

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Tue Sep 18, 2018 8:30 am
by odklizec
Hi,

My guess is, that you are trying to click an option element, without expanding the SelectBox? Basically, if you want to click an option element, you need to expand the selectbox first. And only then you can click the element in expanded selectbox and it should set the element as actually selected. It "should", but there is, unfortunately, a problem in case of Chrome browser. I just realized it last week and reported it to Ranorex support. Sadly, I was told, that there is nothing they can do about it.

If the select box is expanded, its content is displayed in a dropdown container, which is located OUTSIDE the DOM element! It works like that in all modern browsers (IE, Edge, FF and Chrome). This behavior alone (container outside DOM) is not a problem for most browsers, except Chrome. As it looks, Ranorex is not able to track the individual listitem elements, inside the chrome-based select container.
SelectTag_chrome.png
To cut the things short, the only way to select an item in Chrome-based selectbox is using SetValue action, where you need to specify the selectbox in question (you don't have to expand it) and a TagValue you want to select. The major downside of the SetValue action is, that it does not trigger onclick/onchange events that may be associated with selectbox. So this is why I really don't like using SetValue action for web-based elements. But as it looks, there is currently no way to use Click action for selectbox items in Chrome.

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Tue Sep 18, 2018 2:01 pm
by sstowe
"that you are trying to click an option element, without expanding the SelectBox? "

No. The test clicked the <select> .

The latter issue seems to be the issue since the test works in IE. I am not sure what object viewer you are using to expose this in Chrome. It looks like a plain old select to me in both Ranorex Spy and Chrome and IE developer tools.

SetValue gives no joy, obviously.

Is this something Ranorex is planning to fix, and if so, when?

Thanks

Stephanie

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Tue Sep 18, 2018 2:23 pm
by odklizec
Hi Stephanie,

Sadly, the last answer I have from Ranorex support is, that they can't do anything about it. And the only suggestion I got is the one about using SetValue action, which has an obvious flaw, due to its inability to trigger the onmouse/onchange events.

The problem with Chrome select box is easily reproducible with Ranorex Spy (or even MS Inspect tool).
- start Spy
- click Track button
- press and hold F12, to pause tracking
- while holding F12, move mouse over the select element and click it (to expand the combo)
- finally, move mouse over an item in expanded list of items and release F12. Ranorex will track the edge of expanded list, but it will not track the individual items inside it. And this is why it's not possible to click individual combo items in Chrome. The same steps will work fine in other browsers.

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Thu Sep 20, 2018 1:44 pm
by sstowe
Well I learned something anyway. I did not know you could pause tracking.

Thanks!S

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Thu Sep 20, 2018 9:35 pm
by jarrettmk
When you tried a SetValue what value did you set? For our web application I usually have to do SetValue on TagValue to get it to work.

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Thu Oct 11, 2018 5:54 pm
by Support Team
I have sent the below to sstowe directly through a support ticket but wanted to copy it below to help anyone else who stumbles across this thread looking for answers.
The <option> elements technically never exist as graphical elements. They are there to instruct the browser to create an element containing all <option> elements when the parent <select> element is created.

Since the browser is creating the element and not the DOM itself, we require that the browser also adds accessibility attributes to these elements for proper object-based automation. Since each browser handles select box’s in their own way, there is some variance between browsers. Chrome, unfortunately, does not add accessibility to these elements like Internet Explorer, therefore, we cannot get proper object recognition in this particular Chrome container. I understand using a Set-Value action is not ideal, it is the best practice since it will work consistently across all browsers without any modification.

Also, a side note, if the DOM creates the select’s options box, we can easily interact with it like any other element since it is part of the DOM.
https://www.w3schools.com/howto/tryit.a ... tom_select
Cheers,
Ned

Re: Urgent: <select option not reporting error on click but clicking to upper left corner of dom (maybe?)

Posted: Fri Oct 12, 2018 7:27 pm
by krstcs
I would actually encourage the use of keyboard-based actions here as they will work no matter the browser, they will always fire events, and they are relatively robust.

I had to do this in a previous position for several drop-downs in different browsers. You can abstract this out into a library and it will be useful in all of your browser tests.

1. Click the select box so that the drop-down appears.
2. Type the desired value. The drop-down should auto-scroll to the item. You may have to play with keyboard timing here to make sure it doesn't go too fast or too slow.
3. Send the "{Enter}" key to the select box.

The problem with SetValue is that is may or may not fire the proper events for any given element, depending on how the SUT code is written. This makes tests rely on the SUT code directly because you may have to directly fire the events using a JavaScript call into your SUT, which you should not do. This makes your test brittle and prone to issues if the underlying code changes. Whereas, if you use keyboard input, it should always work and is abstracted from the actual SUT.