Dropdowns rendered with chosen.jquery.js

Class library usage, coding and language questions.
gwaller
Posts: 4
Joined: Wed Jun 28, 2017 7:55 pm

Dropdowns rendered with chosen.jquery.js

Post by gwaller » Wed Jun 28, 2017 8:09 pm

Hello,

I'm having an issue automating a specific aspect of our application and I have exhausted every other resource that I know of (in addition to searching these forums extensively).

Our application uses a popular jquery library to render our dropdowns called "chosen.js".

My hope is that someone out there has both heard of, and uses chosen enough to provide some insight or advice.

I've tried several approaches, but the closest I can get is something like this:
/** ddlOrderDueOptionDefault is a RepoInfoItem 
    whose xpath points at the <select> element that needs to be automated
*/
DivTag ddl = ddlOrderDueOptionDefault.FindAdapter<SelectTag>().NextSibling.Element;
IList<LiTag> options = ddl.Find<LiTag>(".//li");
foreach(LiTag option in options) { 
     ddl.Click();
     option.Focus();
     option.Click();
}
This is correctly finding the <li> elements that represent options within the <div>, but it seems like the options are going out of scope (most likely thanks to the javascript driving the control destroying and re-creating these elements every time the controls are interacted with in the browser (ie. hover, click, etc.)).

In my previous interactions with the Ranorex support staff, there was some suggestion that Ranorex doesn't play nice with dynamic elements, and it seems like this might've been what Mubin was talking about.

If there's anyone out there that has encountered this and knows of a work-around or solution: Please Help!

Thanks,
G.W.
Last edited by gwaller on Thu Jun 29, 2017 2:53 pm, edited 1 time in total.

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

Re: Dropdowns rendered with chosen.jquery.js

Post by odklizec » Thu Jun 29, 2017 11:48 am

Hi,

Please upload a Ranorex snapshot of the problematic dropdown. Without (at least) snapshot, it's next to impossible to provide a reasonable suggestion. You see, we need to see the actual structure of the dropdown and its elements.
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

gwaller
Posts: 4
Joined: Wed Jun 28, 2017 7:55 pm

Re: Dropdowns rendered with chosen.jquery.js

Post by gwaller » Thu Jun 29, 2017 2:36 pm

Thanks for the reply.

For future reference, for anyone researching this issue, I've hacked together a solution.
I expect this to be useful in at least 90% of the cases where chosen replaces a <select> in your application. There may be outliers and edge cases, so those will need to be dealt with individually.
/** as an extension method to SelectTags */
public static void SelectIndex(this SelectTag sel, int idx)
{
     // chosen.jquery.js will inject the <div><ul>...</ul></div> 
     // as a sibling immediately following the target <select />
     DivTag ddl = sel.NextSibling.Element;  
     ddl.Click();
     // need to find the <li /> after 
     // the click, as the required elements will not be in scope until now 
     LiTag li = ddl.Find<LiTag>(".//li")[idx];  
     li.Click();
}
Consuming the extension method:
SelectTag ddl = "/dom[@domain='your.domain.url']//select[@id='yourelementid']";
ddl.SelectIndex(0);