testing - 如何使用 Protractor js单击表格中行中的按钮

Question

我正在编写 Protractor 测试用例。我想点击编辑按钮。当我通过 id 检查时，找不到它。

代码:

<table class="table table-bordered table-hover">
   <thead>
       <tr>
          <th>Code</th>
          <th>Start Date</th>
          <th></th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="batch in batches.list">
         <td><a ui-sref="root.courses.detail.batches.assessments({ batch_id: batch.id,assessment_status: 'published'})">BID00{{batch.id}}</a></td>
         <td>{{batch.start_date}}</td>
         <td> 
             <button id="edit" type="button" class="btn btn-default btn-sm" tooltip-placement="top" tooltip="Edit" ng-controller="batchesCtrl" ng-click="edit_batch(batch.id)"><i class="glyphicon glyphicon-edit"></i></button> 
             <button type="button" id="delete(batch.id)" class="btn btn-danger btn-sm" tooltip-placement="top" tooltip="Delete" ng-click="remove_batch(1, batch.id)" confirmation-needed="Do you really want to delete this batch?"><i class="glyphicon glyphicon-trash" ></i></button>
         </td>
      </tr>
   </tbody>
</table>

我怎样才能让它发挥作用？

Answer 1

您的示例中存在一些问题。在 html 中，ID 在页面上应该是唯一的。因此，您不能在重复的元素内使用 id。

您有多种选择。您可以通过另一个按钮没有的样式类之一来解决该按钮

element(by.repeater('batch in batches.list').row(0)).element(by.css('button.btn-default')).click();

你也可以只指定你想要它找到的第一个按钮

element(by.repeater('batch in batches.list').row(0)).element(by.css('button:first-of-type')).click();

或者，您也可以仅使用 css 对元素进行寻址。有时这比中继器更容易维护:

element(by.css('tr:first-of-type > td:last-child > button:first-of-type')).click();