WebdriverJS and drop down menus

Question

I am running WebdriverJS on nodeJS to test the UI of a website. I want select and click on a submenu item in a drop down menubar. The submenu items are hidden by CSS. The menubar looks like this:

<ul class="dropdown" id="mainNavList">
    <li class="active"> 
        <a href="/home"><span>Home</span></a>
    </li>
    <li class="">
        <a href="/MyProducts"><span>My Products</span></a>
        <ul style="visibility: hidden;">
            <li class="">
                <a href="/uiuiu">Product A</a>
            </li>
            <li class="">
                <a href="/jkjkjk">Product B</a>
            </li>
        </ul>
    </li>

    <li>...</li>

</ul>

If I try to run this approach:

mydriver.executeScript("return $(\"a:contains('My Products')\").mouseover();").then(function(){
mydriver.findElement(mywebdriver.By.xpath("//a[contains(text(), 'Product B')]")).click();
        });

the drop down slides down but hides directly after showing it. On the console I get an error from Webdriver:

ElementNotVisibleError: Element must be displayed to click (WARNING: The server did not provide any stacktrace information)

Any ideas?

Answer 1

这对我来说也是新手，但是我会链接“单击”下拉菜单中的函数调用，然后单击所需的下拉菜单项。

Answer 2

try this:

var menu = mydriver.findElement(mywebdriver.By.css('[href="/MyProducts"]'));
menu.click();
menu.findElement(mywebdriver.By.css('[href="/jkjkjk"]')).click();

As James said it's about chaining. In the snippet above the chaining is implicit (both findElement and click methods add a frame to the webdriver.controlFlow() .