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

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

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();

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;