如何在量角器中测试表格及其内容? [英] How to test Table and it's content in protractor?
本文介绍了如何在量角器中测试表格及其内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
This 是表格内容的 HTML,我想测试这个 HTML 标签
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>
推荐答案
如果表是使用转发器生成的,您可以编写循环来获取其中的行和列.
In case table is generated using repeater, you can write loop to get rows and then columns present in that.
例如:
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);
});
});
});
});
使用上面的代码,您将能够打印网格,并且您也可以编写验证数据所需的任何逻辑.
Using above code you will able to print the grid, and you can write whatever logic you need to verify data too.
这篇关于如何在量角器中测试表格及其内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文