WebdriverJS and drop down menus

Question

WebdriverJS and drop down menus

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?

javascript
node.js
testing
automation
selenium-webdriver

Answer 1

This is new to me as well but I would chain function calls of Click on the drop down then click the drop down item you want.

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