Get row number using text in the row in Protractor

问题

I have the table structured below

<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>

I need to get the table cell by using the below element(by.repeater('(a, b) in tests').row(0)).element(by.css('[xxx]')). Currently am using the hard coded row number to achieve this but its not working all the time due to the dynamic UI changes

Is that possible to get the row number using the by passing the text in protractor

Ex: If I pass the text ROW2 then it should return the row number as 0 using the repeater (a, b) in tests then I can able to use the row number dynamically

回答1:

Instead of doing it by getting row number, you can use filter() method to get the particular row that contains the expected text.

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"));

回答2:

Find it by xpath:

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

Or

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;
       }
    });
}

This code haven't been tested.

回答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'));

来源：https://stackoverflow.com/questions/41121763/get-row-number-using-text-in-the-row-in-protractor