How to test Table and it's content in protract

2019-06-09 12:54发布

问题:

This is HTML of table content and i want to test this HTML tags

<thead>
  <tr>
    <td>
      <a href="#" ng-click="sortType = 'date'; sortReverse = !sortReverse">
                Date-Time
              </a>
    </td>
    <td><a>Amount</a>
    </td>
    <td><a>Transaction Type</a>
    </td>
  </tr>
</thead>

<tbody>


  <!-- ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor0" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 8, 2016 4:44:43 PM</td>
    <td class="ng-binding">210</td>
    <td class="ng-binding">Credit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor1" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 8, 2016 4:45:08 PM</td>
    <td class="ng-binding">100</td>
    <td class="ng-binding">Debit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor2" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 13, 2016 10:54:03 AM</td>
    <td class="ng-binding">1000</td>
    <td class="ng-binding">Credit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor3" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 13, 2016 10:54:05 AM</td>
    <td class="ng-binding">32</td>
    <td class="ng-binding">Credit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor4" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 13, 2016 10:54:10 AM</td>
    <td class="ng-binding">155</td>
    <td class="ng-binding">Debit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
  <tr id="anchor5" ng-repeat="tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end" class="ng-scope">
    <td class="ng-binding">Dec 13, 2016 10:54:12 AM</td>
    <td class="ng-binding">12</td>
    <td class="ng-binding">Debit</td>
  </tr>
  <!-- end ngRepeat: tx in transactions | orderBy:sortType:sortReverse | sDate:startDate:end -->
</tbody>
</table>

回答1:

In case table is generated using repeater, you can write loop to get rows and then columns present in that.

For example:

element.all(by.repeater('row in rows')).then(function(rows){
 rows.forEach(function(row){
  row.all(by.repeater('column in row.columns')).then(function(columns){
       /* your code here
          navigate columns using columns[]
       */
  });
 });
});

Edit:

element.all(by.repeater('tx in transactions')).then(function(rows){
    rows.forEach(function(row){
        row.all(by.tagName('td')).then(function(columns){
            /* For getting text in date column*/
            columns[0].getAttribute('innerText').then(function(dateText){
                console.log('Date: ' + dateText);
            });
            /* For getting text in Amount column*/
            columns[1].getAttribute('innerText').then(function(amountText){
                console.log('Amount: ' + amountText);
            });
            /* For getting text in Transaction column*/
            columns[2].getAttribute('innerText').then(function(transactionType){
                console.log('Transaction Type: ' + transactionType);
            });
        });
    });
});

Using above code you will able to print the grid, and you can write whatever logic you need to verify data too.