Get the element using the text in the row in Protractor from nested repeater

Question

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 have got the root table element by using the below answer https://stackoverflow.com/a/41129924/2833311

But failing to get the nested repeater elements.

getSpecificNestedCell: function(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
    var ele = element.all(by.repeater(tableObject)).filter(function(rowElement){
      return rowElement.element(by.css("td h4")).getText().then(function(text){
        return text.indexOf(rowText) !== -1;
      });
    }).first();

    ele = ele.all(by.repeater(nestedTableObj)).filter(function(rowElement1){
        return rowElement1.element(by.linkText(rowText1)).getText().then(function(text1){
          return text1.indexOf(rowText1) !== -1;
        });
      }).first().element(by.css('[' + columnCss + ']'));

    findObject.waitUntilReady(ele);
    return ele;   }

Where as,

1. tableObject ==> (a, b) in tests
2. rowText ==> ROW2
3. nestedTableObj ==> test in testData
4. rowText1 ==> test.data
5. columnCss ==> ng-click="checkFunction()"

Using the above code I could able to get the element if it has the single row inside the nested repeated, but it was failing to get the element when the nested repeater has the multiple rows

Answer 1

this should give you what you want I believe

function getSpecificNestedCell(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
   return element(by.cssContainingText('tbody[ng-repeat="' + tableObject + '"]', rowText))
   .element(by.cssContainingText('tr[ng-repeat="' + nestedTableObj + '"]', rowText1))
   .element(by.css('[' + columnCss + ']'));
}

Here is the selector I used working