How to handle Javascript dropdown menu in Selenium?

Question

I'm trying to select a drop&down menu, select an option but I can't do it and I don't know how

The code is:

<div class="jqx-menu-popup jqx-menu-popup jqx-menu-popup-officeWFM2" style="border: medium none; background-color: transparent; z-index: 17000; padding: 0px; margin: 0px; position: absolute; top: 39.3333px; left: 1086.5px; display: none; visibility: visible; width: 159px; height: 124px;">
<div style="background-color: transparent; border: none; position:absolute; overflow:hidden; left: 0; top: 0; right: 0; width: 100%; height: 100%;">
<ul id="jqxWidget60bb7a98" class="jqx-widget-content jqx-widget-content-officeWFM2 jqx-menu-dropdown jqx-menu-dropdown-officeWFM2 jqx-popup jqx-popup-officeWFM2 jqx-rc-l jqx-rc-l-officeWFM2 jqx-rc-b jqx-rc-b-officeWFM2" role="menu" style="overflow: hidden; position: absolute; left: 0px; display: block; top: -119px; margin-left: 0px; margin-right: 0px; padding-left: 2px; padding-right: 2px;">
<li id="0" class="jqx-rtl jqx-rtl-officeWFM2 jqx-item jqx-item-officeWFM2 jqx-menu-item jqx-menu-item-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2" role="menuitem">
<span style="position: relative; left: 3px; top: -2px;">Perfiles</span>
</li>
<li id="1" class="jqx-rtl jqx-rtl-officeWFM2 jqx-item jqx-item-officeWFM2 jqx-menu-item jqx-menu-item-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2" role="menuitem">
<span style="position: relative; left: 3px; top: -2px;">Usuarios</span>
</li>
<li id="2" class="jqx-rtl jqx-rtl-officeWFM2 jqx-item jqx-item-officeWFM2 jqx-menu-item jqx-menu-item-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2" role="menuitem">
<span style="position: relative; left: 3px; top: -2px;">Parámetros</span>
</li>
<li id="3" class="jqx-rtl jqx-rtl-officeWFM2 jqx-item jqx-item-officeWFM2 jqx-menu-item jqx-menu-item-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2" role="menuitem">
<span style="position: relative; left: 3px; top: -2px;">Datos entidades</span>
</li>
</ul>
</div>
</div>

I need to select the option, for example, `"Usuarios"':

This is the code for the menu, but it comes from a click button with this code

<div id="wfm-header-config" class="header-cell jqx-widget jqx-widget-officeWFM2 jqx-menu jqx-menu-officeWFM2 jqx-rtl jqx-rtl-officeWFM2 jqx-widget-header jqx-widget-header-officeWFM2 jqx-menu-horizontal jqx-menu-horizontal-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2 dis_jqxMenu" role="menubar" style="outline: medium none; height: auto; background-color: transparent; background-image: none; border: medium none;" tabindex="0">
<ul class="jqx-menu-ul">
<li id="-1" class="jqx-rtl jqx-rtl-officeWFM2 jqx-item jqx-item-officeWFM2 jqx-menu-item-top jqx-menu-item-top-officeWFM2 jqx-rc-all jqx-rc-all-officeWFM2" style="float: right; background-color: transparent; background-image: none; padding: 2px;" role="menuitem">
<img src="resources/images/ic_settings_24.png" title="Configuración ">
</li>
</ul>
</div>

To understand the code I paste two screenshot from the upper codes

The Screenshot from the button

Button menu

The Screenshot from next window (popup) for the option selected

Second window

Sorry for the possible mistakes but I'm newer on this platform.

Answer 1

First, you need to open up the dropdown menu, then select the desired menu item.

The markup is not the easiest to work with because of absence of data-oriented id, name or class attributes. But, we can approach the problem locating elements by text and title:

// open the menu
driver.findElement(By.xpath("//div[@id='wfm-header-config']/ul/li[starts-with(span/@title, 'Configuración')]")).click();
// select Usuarios from the menu
driver.findElement(By.xpath("//div[contains(@class, 'menu-popup')]//li[span = 'Usuarios']")).click();

• Paula Livingstone: What if the item to be clicked needs a scroll to make it visible?
• Sean: Worked like a charm. For some reason, I couldn't find a single documentation to something as simple as this. Thanks a lot!

Answer 2

Here's a possible solution in C#. Note that both Java and Javascript should have this same ability using query filters (for Language Integrated Queries)

wd.FindElements(By.Tagname("li").Where(i=>i.text=='Configuración').First().Click;

• Amias: With selenium it is possible to find elements that are not clickable or are not fully loaded yet, therefore its best practice to find the element and then in a try/catch block check it to ensure its clickable and then click it if is.