如何在量角器中测试表格及其内容?



这是表内容的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>

在情况表中使用中继器生成,您可以编写循环以获取行,然后在其中存在列。

例如:

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

使用上述代码您可以打印网格,并且您也可以编写需要验证数据的任何逻辑。

最新更新