Selenium automation - Dropdown on hover does not work

Question

I am developing an automation script and a part of it requires me to hover over a navigation bar to display a dropdown menu. The script is written using NodeJS and the browser used is Internet Explorer.

Navigation source code

...

    <ul class=navigation " data-dojo-attach-point="nonmMenu ">
        <li class= "dropdown ">
        <a href="javascript:void(0) "><i class="fa fa-clipboard nav-icon " aria-hidden="true "></i><span>Accounts</span></a>
        <div class='fulldrop i3">..</div>
        </li>
    </ul>

...

NodeJS code:

let xPathButton = "//span[text()='Accounts']";

//Find button to hover over
let buttonWithDropDown = driver.findElement(By.xpath(xPathButton));
//Hover
driver.actions().mouseMove(buttonWithDropDown).perform();

However, this does not work. The end goal is to click a link once the dropdown menu appears, which I have tried doing but as the element is not visible I get the exception ElementNotInteractableError: Cannot click on element . I would appreciate some pointers in the right direction to sort this out.

Update: Been looking at this a bit more; Could the aria-hidden attribute in the anchor tag be causing the selenium driver to not detect the element?

Please note that changing the browser is not an option.

Answer 1

Try to hover over an a or li element. Also you can try click:

By.xpath("//a[span[.='Accounts']]")
By.xpath("//li[.//span[.='Accounts']]")

You can try open menu without opening menu with javascript:

executeJavaScript("arguments[0].click();", yourDropdownMenuElement);