Search code examples
javascriptchromeless

How to manipulate a dropdown menu made of ul and li elements in Chromeless

I am facing a drop down menu made of ul and li elements:

<ul class="o_dropdown_theme_values">
    <li class="" tabindex="-1">
        <label class="myclass" tabindex="0">Category 1</label>
    </li>
    <li class="" tabindex="-1">
        <label class="myclass" tabindex="0">Category 2</label>
    </li>
    ...
</ul>

I know two ways of modifying a dropdown menu with Chromeless:

.evaluate((dropDownValue) => {
    select = document.querySelector('select#category1')
    select.value = dropDownValue
}, dropDownValue)

and

.click('#id') 
.type("first letters of option", '#id') 
.click('#id option[value="'+dropDownValue+'"]')

but because of the structure of the menu with ul and li, I am unable to use these.

I also tried to click on the menu and then press the tab key as many times as necessary to select the correct option, as if I was navigating the menu with my keyboard. But the Tab keys I am sending are not taken into account. I was able to send ONE (and only one) DOWN key (and not TAB) to the menu, but nothing more.

How can I manipulate this kind of menu? Any workaround based on javascript would be appreciated.

Solution

  • I found a way in the end.

    Use the .focus(#CSSselector) command to highlight the correct option and then valide with .press(13) (Enter key).

    So that's a third way to manipulate dropdown menus in chromeless