端到端测试 - 使用 ui-grid

Question

我在我的应用程序中使用 ui-网格，我想在网格中 select 行 - 即：以编程方式选中一行。

我看到 ui-grid/tests 文件夹中有文件 gridTestUtils.spec.js，

我已将其复制到我的 tests/lib 文件夹中。

现在如何使用它在我的网格中 select 一行？

希望能帮到你

Answer 1

我能够通过首先定义一个页面对象来 select 一个行元素：

'use strict';

var AngularPage = function () {

};

AngularPage.prototype = Object.create({}, {

    videoListGrid: { get: function () { return element(by.css('div[ui-grid="videoListGridOptions"]')); }},
    uiGridCell: { get: function () { return element(by.css('.ui-grid-cell')); }},

});

module.exports = AngularPage;

既然已经定义了这些页面对象，下面是测试：

var gridId = null;
var viewVideoPage = require('./../pages/viewVideo.page.js'); //define the page object
/**
 * make sure to bring in the gridTest utility library
   https://github.com/angular-ui/ui-grid/blob/master/test/e2e/gridTestUtils.spec.js 
 */

var gridUtils = require('./../lib/gridTestUtils.spec.js');


describe('MEP-1023 Test the Video Tags Feature for user MANAGER', function () {
    var page;

    beforeEach(function () {
        page = new viewVideoPage();
    });

    it('should get the grid id and checkbox the first row', function () {

        page = new videoListPage();

        expect(page.videoListGrid.isPresent()).toBe(true);
        //now get the gridId
        page.videoListGrid.getAttribute('class').then(
                function (classes) {
                    var classArr = classes.split(" ");
                    console.log(classArr.length);
                    _.each(classArr, function (theClass) {
                        //find the class that starts with grid, and grab the gridId which we can use to refer
                        //to the various rows
                        if (theClass.substr(0, 4) === "grid") {

                            gridId = theClass;

                            console.log();

                        }
                    });
                    gridUtils.getRow(gridId, 0).click();

                }
        );
    });
});

端到端测试 - 使用 ui-grid

end to end test - using ui-grid

end-to-end

protractor

angular-ui-grid