Làm cách nào để truy cập các phần tử lưới ng bằng thước đo?

Question

Tôi muốn viết một thử nghiệm thước đo góc cho một trang sử dụng lưới ng. Tôi không thấy bất kỳ tài liệu nào về cách thực hiện điều đó. Trên trang của tôi, tôi thấy một mạng lưới với các dữ liệu, html trông như thế này:

<div class="gridStyle" 
    ng-grid="tenantsGridOptions" 
    ng-if="tenantsGridOptions != undefined" > 
</div> 

Làm thế nào để tìm thấy các yếu tố trên lưới này từ thước đo?

Answer 1

xem xét sau Bộ điều khiển:

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', comment: ''}, 
         {id: 3, name: 'Michael Smith', email: 'michael@company.com', city: 'Berkeley', comment: ''}, 
         {id: 4, name: 'Fred Tyler', email: 'fred@company.com', city: 'Washington', 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' 
    }; 
}); 

Và HTML sau:

<div ng-controller="GridCustomersController"> 
    <div class="gridStyle" ng-grid="gridCustomers" style="height: 200px"> 
    </div> 
</div> 

Một cách rất hữu ích để acces đến các yếu tố khác nhau trong thành phần ng-lưới là sử dụng by.binding('row.entity.<field>'), nơi 'field' là một chìa khóa của mô hình dữ liệu của bạn. Bạn cần phải xác định một trường hợp thử nghiệm như sau: Mã

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

Nguồn điều khiển và nội dung HTML được tìm thấy trong Plunker

Trong ví dụ này, tôi xác định một mẫu tùy chỉnh cho cột cuối cùng. Vì vậy, tôi đã sử dụng by.model('row.entity.<field>') để truy cập vào phần tử tương ứng.

Ví dụ chạy thử hoàn chỉnh của thử nghiệm e2e đã cho có sẵn trong this Git repository.

Hy vọng điều đó sẽ hữu ích.