CODEWITHSUNDEEP
javascriptangularjsprotractorautomated-tests
Charles
Charles

Reputation: 199

Trying to filter an ng-repeat generated table using Protractor

I have the following structure that represents a table and am trying to filter based on the <a href> text and then <p> text:

<tr ng-repeat="a in apples" class="ng-scope">
  <td>
    <p>
      <a href="javascript::" ng-click="openModal()" class="ng-binding">Some text</a>
    </p>
  </td>
  <td>...</td>
  <td>
    <p class="ng-binding">Some other text</p>
  </td>
  <td>...</td>
</tr>

So far, I've tried using element.all(by.repeater('a in apples') but from there I don't know if I should be using .filter or should be chaining element(by.css()) until I get down to the <a href> and <p>. If the texts match a certain value I'd like to return true and evaluate that with expect().

I've also tried looking at documentation but most of the examples only show something like the following:

element.all(by.css('.items li')).filter(function(elem, index) {
  return elem.getText().then(function(text) {
    return text === 'Third';
  });

Upvotes: 0

Views: 61

Answers (1)

yong
yong

Reputation: 13712

You can find all row by element.all(), then get text of desired <a> and <p> inside each tr, if the both texts are as desired value, return true.

recommend to use await/async to make code simple.

# Use promise.then(), have to loop all rows, even matched row is not the last row

element.all(by.repeater('a in apples'))
    filter(function(tr){
        let linkText = tr.element(by.css('td:nth-child(1) a')).getText()
        let pText = tr.element(by.css('td:nth-child(3) p')).getText()

        return Promise.all([linkText, pText]).then(function(texts){
            return texts[0] === <link text> && texts[1] === <p text>
        });
    })

# Use await/async, end loop once find match row, not loop all rows

match = false
rows = element.all(by.repeater('a in apples'))
rowCount = await rows.count()

for(let i=0;i<rowCount;i++) {
  let linkText = await rows.get(i).element(by.css('td:nth-child(1) a')).getText()
  let pText = await rows.get(i).element(by.css('td:nth-child(3) p')).getText()
   
  if(linkText === <link text> && pText === <p text>) {
    match = true
    return
  }
}

Protractor guide of using await/async

Upvotes: 1

Related Questions