使用量角器中行中的文本获取行号

Question

我的 table 结构如下

<table class="table">
  <thead>
    <tr>
      <th class="checkbox-column"></th>
      <th class="main-column main-column--checkbox">Name</th>
    </tr>
  </thead>
  <tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
    <tr class="panel__sub-header">
      <td>
        <input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
      </td>
      <td colspan="4">
        <h4 class="ng-binding">ROW2</h4>
      </td>
    </tr>
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
      <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
      <td class="main-column">
        <a ng-href="#" class="ng-binding" href="#">test.name</a>
      </td>
    </tr>
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
      <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
      <td class="main-column">
        <a ng-href="#" class="ng-binding" href="#">test.data</a>
      </td>
    </tr>
  </tbody>
  <tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
    <tr class="panel__sub-header">
      <td>
        <input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
      </td>
      <td colspan="4">
        <h4 class="ng-binding">ROW1</h4>
      </td>
    </tr>
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
      <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
      <td class="main-column">
        <a ng-href="#" class="ng-binding" href="#">test.name</a>
      </td>
    </tr>
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
      <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
      <td class="main-column">
          <a ng-href="#" class="ng-binding" href="#">test.data</a>
      </td>
    </tr>
  </tbody>
</table>

我需要使用以下方法获取 table 单元格 element(by.repeater('(a, b) in tests').row(0)).element(by.css('[xxx]'))。目前正在使用硬编码行号来实现此目的，但由于动态 UI 更改

，它并非一直有效

是否可以通过在量角器中传递文本来获取行号

例如：如果我传递文本 ROW2 那么它应该 return 使用转发器将行号设为 0 (a, b) in tests 然后我可以动态地使用行号

Answer 1

通过xpath查找：

element(by.repeater('(a, b) in tests').row(0)).element(by.xpath('XXX'))

或

function GetRowNumber(yourText)
{
    var items = element(by.repeater('(a, b) in tests')).all(by.tagName('h4')).map(function(elem) {
        return elem.getText();
    });

    return items.then(function(elems){
       for(var i = 0; i < elems.length; i++)
       {
          if(elems[i] === yourText)
              return i;
       }
    });
}

此代码尚未经过测试。

Answer 2

您可以使用 filter() 方法获取包含预期文本的特定行，而不是通过获取行号来完成。

var columnElement = element.all(by.repeater('(a, b) in tests')).filter(function(rowElement){
   return rowElement.element(by.css("td h4")).getText().then(function(text){
    return text.trim() == "ROW2"
  });
}).first().element(by.css("somecss"));

Answer 3

var getRowNumber = function (text) {
    var tbody = element(by.repeater('(a, b) in tests'));
    tbody.filter(function (elem, index) {
       if (!!elem.element(by.cssContainingText('h4', text))) {
          return index;
       }
   })
};
console.log('row number :'+ getRowNumber('ROW2'));

使用量角器中行中的文本获取行号

Get row number using text in the row in Protractor

angularjs

angularjs-e2e

protractor

e2e-testing