WebdriverJS和下拉菜单

Question

我在nodeJS上运行WebdriverJS来测试网站的用户界面。我想要选择并单击下拉菜单栏中的子菜单项。子菜单项由CSS隐藏。菜单栏如下所示：

<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>

如果我尝试运行此方法：

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

下拉列表向下滑动，但在显示后直接隐藏。在控制台上，我从Webdriver得到一个错误：

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

有什么想法吗？

Answer 1

这对我来说也是新的，但我会将Click的函数调用链接到下拉列表中，然后单击所需的下拉项。

Answer 2

试试这个：

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

正如James所说，它是关于链条的。在上面的代码片段中，链接是隐式的( findElement和click方法都会向webdriver.controlFlow()添加一个框架。