使用 selenium-webdriver 和 PjantomJS 等到元素变得可见

Question

我正在使用 selenium-webdriver、phantomJS 和 mocha 编写我的自动化测试脚本。

我的脚本文件本质上是 javascript 文件。

我想等到元素 (<a>) 完全可见。可见后，该元素将被点击。

让我详细解释一下：

有一些菜单和子菜单。菜单本质上是可折叠的。当我点击菜单时，会显示相应的子菜单。

我的以下脚本首先遍历（并单击）菜单，然后遍历并显示子菜单状态。

for(var iMajor = 2; iMajor <= majorLinkLast ; iMajor++)
{   
    majorMenuXPath = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/a";
    if(iMajor != 2)
    {
        driver.findElement(By.xpath(majorMenuXPath)).click();
        driver.manage().timeouts().implicitlyWait(30 * 10000);
    }   
    for(var iMinor = 1; iMinor <= minorSize[iMajor] ; iMinor++)
    {   
        minorMenuXPath = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
        driver.findElement(By.xpath(minorMenuXPath)).isDisplayed().then(function(elem){
        console.log(elem);
    });
}

以上代码显示子菜单的状态，如：

true
true
true
true
true
true
true
false
true
false
true
false
true
false
false
true
true
true
true
true
true
true
true
true
true

我使用隐式方法让驱动程序等待。但仍有一些子菜单显示为 false（意味着它们不可见）。单击父菜单后它们应该可见。

我需要以下方面的帮助：

如何才能等到子菜单可见？在每个子菜单之后变得可见，我需要执行一些操作。
或者，如何让子菜单在特定时间后可见。

这是我的 HTML:

<ul id="side-menu" class="nav">
    <li class="nav-header">
    <img class="logo" alt="Track Revenue" src="/images/3c4939d.png">
    <div class="logo-element"> TR </div>
    </li>
    <li class="">
    <a href="#home">
    <i class="fa fa-bolt"></i>
    <span class="nav-label">Tr Admin Menu</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse" aria-expanded="false" style="height: 0px;">
        <li>
        <a href="/admin/user/">All Users</a>
        </li>
        <li>
        <a href="/admin/company/">All Companies</a>
        </li>
        <li>
        <a href="/admin/device/">Devices</a>
        </li>
        <li>
        <a href="/admin/email/">Send Email</a>
        </li>
        <li>
        <a href="/admin/impersonate">Impersonate User</a>
        </li>
        <li>
        <a href="/admin/encrypttest">Test Encryption</a>
        </li>
    </ul>
    </li>
    <li class="">
    <a href="#home">
    <i class="fa fa-th-large"></i>
    <span class="nav-label">Campaigns</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse" aria-expanded="false" style="height: 0px;">
    <li>
    <a href="http://demotest.com.co/main/account/campaign_overview.php">Overview</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/campaign_update_cpc.php">CPC Update</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/campaign_update_subids.php">SubID Update</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/campaign_v2.php">Add Campaign</a>
        </li>
    </ul>
    </li>
    <li>
    <a href="#home">
    <i class="fa fa-bar-chart-o"></i>
    <span class="nav-label">Stats</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
        <li>
        <a href="http://demotest.com.co/main/account/stats_campaign_v2.php">Campaign Stats</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/stats_week_day_v2.php">Week / Day Parting Stats</a>
        </li>
    </ul>
    </li>
    <li>
    <a href="#home">
    <i class="fa fa-files-o"></i>
    <span class="nav-label">Reports</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
        <li>
        <a href="http://demotest.com.co/main/account/report_custom.php">Custom Data Reports</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/report_subid.php">SubID Analysis Report</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/completed_report.php">Scheduled Reports</a>
        </li>
    </ul>
    </li>
    <li>
    <a href="#home">
    <i class="fa fa-cog"></i>
    <span class="nav-label">Settings</span>
    <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
        <li>
        <a href="/profile/">Account</a>
        </li>
        <li>
        <a href="/plan/">Plan Management</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/settings_groups.php">Campaign Groups</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/settings_network.php">Affiliate Networks</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/settings_sources.php">Traffic Source</a>
        </li>
        <li>
        <a href="/manage/user/">Manage Users</a>
        </li>
        <li>
        <a href="/manage/company/">Manage Company</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/settings_rules.php">Blocking & Filter Rules</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/domains.php">Domains</a>
        </li>
        <li>
        <a href="http://demotest.com.co/main/account/campaign_archive.php">Campaign Maintenance</a>
        </li>
    </ul>
    </li>
</ul>

注：

我是硒的新手。我需要 javascript 程序来解决问题。我不了解 JAVA 或 Python 或 C#

有人可以帮我吗？

Answer 1

它看不见是有原因的，不是吗？自动执行普通用户为使该元素可见所做的任何操作。有时页面的某些部分会被隐藏，因为它在单个页面上有多个 "views"。用户通常可以通过单击某些内容或填写表单来在这些视图之间导航。您必须自动执行与用户相同的交互。

Answer 2

以下代码片段有助于显示元素。

minorMenuXPath = "//ul[contains(@id, 'side-menu')]/li["+iMajor+"]/ul/li["+iMinor+"]/a";
//Following snippet is stated for making the driver wait till the element is visble.
driver.wait(function() 
{
   return driver.isElementPresent(By.xpath(minorMenuXPath));
}, 20*1000);
driver.findElement(By.xpath(minorMenuXPath)).then(function(elem)
{
    elem.isDisplayed().then(function(stat){
        console.log(stat);
    });
});

使用 selenium-webdriver 和 PjantomJS 等到元素变得可见

Wait until an element becomes visible using selenium-webdriver and PjantomJS

javascript

mocha.js

phantomjs

selenium-webdriver

注：