量角器 - 使用过滤器定位表格元素答案

【问题标题】：Protractor - Locating table elements using filter量角器 - 使用过滤器定位表格元素
【发布时间】：2017-04-28 09:41:05
【问题描述】：

表格中有几行，我需要通过匹配以下文本单击行的编辑链接：name1

我找不到第一行的“编辑”。我尝试使用 XPath 和 CSS 定位元素，但没有成功。

这是我的 HTML 代码：

<tr ng-repeat="medication in modelCaseMed.medicationInfo" class="ng-scope odd" role="row">
  <td class="ng-binding">name1</td>
  <td class="ng-binding">04/06/2017</td>
  <td class="ng-binding">04/28/2017</td>
  <td class="ng-binding">12</td>
  <td class="ng-binding">Hourly</td>
  <td class="ng-binding">1</td>
  <td>
    <a href="" ng-click="addMedication(medication, 'edit')">
      <i class="fa fa-pencil-square-o"></i> Edit</a> |  
    <a href="" ng-click="deleteMedication(medication, 'Modify')">
      <i class="fa fa-trash"></i> Delete</a>
  </td>
</tr>

你能帮我匹配文本name1在行中然后点击第一行的编辑链接吗？

【问题讨论】：

标签： javascript css xpath filter protractor

【解决方案1】：

试试下面的代码，

element.all(by.repeater("medication in modelCaseMed.medicationInfo")).filter(function(_tableRow){
  return _tableRow.element(by.css("td:nth-child(1)")).getText().then(function(name){
      return name == "name1"; //replace it with the required name;
  });
}).first().element(by.css("i.fa-pencil-square-o")).click();

【讨论】：

非常感谢 Sudharsan，它运行良好。您能否在两个地方向我解释一下css 1) 'element(by.css("td:nth-child(1)"))' -> 'nth-child()' 有什么作用？可以在哪些地方使用？ 2）'element（by.css（“i.fa-pencil-square-o”）' - >我们可以通过合并标记名形成css吗？或者这只能在特殊情况下完成？如果你能提供我解释的链接关于这些也很好。非常感谢。
上面的css会定位到每个表格行下的第一个td标签。
@HemaLatha 如果它有助于解决问题，请考虑接受答案！
谢谢 Sudharsan。
我又面临一个问题，一旦我点击编辑，在同一个地方显示“更新”“取消”。一旦我编辑，我需要点击更新。但我认为我得到“为定位器找到的多个元素 By(css.....)”，因为 Edit 和 Update 都具有相同的代码

【解决方案2】：

另一种方法是使用文本name1 获取tr，然后使用文本Edit 定位anchor：

var elmTR = element.all(by.cssContainingText('tr', 'name1')).last();
var elmEdit = elmTR.element(by.cssContatingText('a', 'Edit'));
elmEdit.click();

【讨论】：