如何使用量角器访问ng-grid元素?
发布时间:2020-12-17 10:22:12 所属栏目:安全 来源:网络整理
导读:我想为使用ng-grid的页面编写量角器测试. 我没有看到有关如何做到这一点的任何文档.在我的页面上,我看到一个包含数据的网格,html看起来像这样: div class="gridStyle" ng-grid="tenantsGridOptions" ng-if="tenantsGridOptions != undefined" /div 如何从量
|
我想为使用ng-grid的页面编写量角器测试.
我没有看到有关如何做到这一点的任何文档.在我的页面上,我看到一个包含数据的网格,html看起来像这样: <div class="gridStyle"
ng-grid="tenantsGridOptions"
ng-if="tenantsGridOptions != undefined" >
</div>
如何从量角器中找到此网格上的元素?
考虑以下控制器:
var app = angular.module('angularE2EExamples');
app.controller('GridCustomersController',function ($scope,$http) {
$scope.customers = [{id: 1,name: 'Lissa Montrose',email: 'lissa@company.com',city: 'Washington',comment: ''},{id: 2,name: 'Karri Lanze',email: 'karri@company.com',city: 'Dallas',{id: 3,name: 'Michael Smith',email: 'michael@company.com',city: 'Berkeley',{id: 4,name: 'Fred Tyler',email: 'fred@company.com',comment: ''}
];
$scope.gridCustomers = {
data: 'customers',columnDefs: [{field: 'id',displayName: 'Id',width: 30},{field: 'name',displayName: 'Name'},{field: 'email',displayName: 'Email'},{field: 'city',displayName: 'City'},{field: 'comment',displayName: 'Comment',cellTemplate: '<input class="form-control input-sm" type="text" ng-input="COL_FIELD" ng-model="row.entity.comment" />'}
],enableCellSelection: true,enableRowSelection: false,enableCellEdit: true,enableColumnResize: true,enableColumnReordering: true,multiSelect: false,width: 'auto'
};
});
并遵循H??TML: <div ng-controller="GridCustomersController"> <div class="gridStyle" ng-grid="gridCustomers" style="height: 200px"> </div> </div> 访问ng-grid组件内部不同元素的一种非常有用的方法是使用by.binding(‘row.entity.< field>‘),其中’field’是数据模型的关键字.您需要按如下方式定义测试用例: describe('Customer test cases.',function() {
it('Should iterate all grid elements',function(){
browser.get('http://localhost:9000/customers');
element.all(by.binding('row.entity.id')).each(function(cell){
browser.sleep(500);
cell.click();
cell.getText().then(function(text){
console.log('Id: ' + text);
});
});
element.all(by.binding('row.entity.name')).each(function(cell){
browser.sleep(500);
cell.click();
cell.getText().then(function(name){
console.log('Name: ' + name);
});
});
element.all(by.model('row.entity.comment')).each(function(cell){
browser.sleep(500);
cell.click();
cell.sendKeys('New customer.');
});
browser.sleep(2000);
});
});
在Plunker中找到的控制器和HTML内容的源代码 在此示例中,我为最后一列定义了自定义模板.因此,我使用by.model(‘row.entity.< field>‘)来访问相应的元素. 可在this Git repository获得给定e2e测试的完整可运行示例. 希望能帮助到你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
