Angular Protractor e2e 测试多个下拉菜单

Question

我在标题部分有多个具有相同类名的下拉列表。如何为多个下拉列表编写量角器 e2e 测试用例。

这是我的 HTML 代码片段：

<ul class="nav navbar-nav">
    <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">Patient Flow <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#/patientDashboard/appointments">Patient Portal</a></li>
            <li><a href="#/dashboard2/stations/1/patients">Patient Queue</a></li>
            <li><a href="#/dashboard4/appointments">Visitor Dashboard</a></li>
            <!--  <li><a href="#/patientDashboard/appointments">Patient List View</a></li> -->
          </ul>
    </li>
    <li><a href="#/dashboard3/encounters">OR Flow</a></li>
    <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">Track Assets <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#/listViewTable/assets">Asset List View</a></li>
            <li><a href="#/dashboard5/assets">Asset Map View</a></li>
          </ul>
    </li>
    <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">System Setup <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#/listViewTable/patients">Patients</a></li>
            <li><a href="#/listViewTable/appointments">Appointments</a></li>
          </ul>
    </li>

    <li><a href="#/dashboard10/encounters/1">Reports</a></li>
  </ul>

提前感谢您的帮助。

Answer 1

你可以使用：

var dropdown = element.all(by.css('.dropdown')).get(N);
var toggle = dropdown.element(by.css('.dropdown-toggle'));
toggle.click();
var list = dropdown.all(by.css('.dropdown-menu li'));
expect(list.first().getText()).toEqual('Patient Portal');

获取第 N 个下拉列表 (Doc)，并测​​试它的第一个元素...

那么对于这种比较复杂的页面，我建议使用Page objects。

[编辑：另外，我不知道这是否是一个好习惯，但如果你不想被拘泥于特定的顺序，我会在每个下拉列表（或 ID）上添加一个唯一的类]