Menu
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.
647
Step 1: Create and style a div with a class name “dropdown.” First, create a div and add the class dropdown to it. In CSS, set this div's display to inline-block and position to relative. This will allow the dropdown content to appear right below the dropdown button.
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Using Html Form Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the form for making a dropdown menu. This page helps you to understand how to make a dropdown menu in Html document.
Example Explained. HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
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
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
