testing - 如何测试表格及其在 Protractor 中的内容？

Question

This是表格内容的 HTML，我想测试这个 HTML 标签

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

Answer 1

如果表是使用转发器生成的，您可以编写循环来获取其中的行和列。

例如:

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[]
       */
  });
 });
});

编辑:

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

使用上面的代码，您将能够打印网格，您也可以编写验证数据所需的任何逻辑。