Protractor.js用于水平滚动的测试用例和用于angular2的垂直滚动

时间:2016-06-29 09:18:42

标签: javascript testing angular protractor

如何编写测试用例来识别视图是否通过Protactor for Angularjs2进行水平或垂直滚动​​?

1 个答案:

答案 0 :(得分:0)

这是一个可重复使用的茉莉花匹配器我们用来检查一个元素是否有垂直滚动(参考:Expect an element to have a scroll)(不能保证它可以在你或者所有的情况,当然 - 虽然它适用于我们):

beforeEach(function() {
    jasmine.addMatchers({
        toHaveScroll: function() {
            return {
                compare: function(elm) {
                    return {
                        pass: protractor.promise.all([
                            elm.getSize(),
                            elm.getAttribute("scrollHeight")
                        ]).then(helpers.spread(function (size, scrollHeight) {
                            return scrollHeight >= size.height;
                        }))
                    };
                }
            };
        }
    });
});

使用示例:

expect(loginPage.license).toHaveScroll();

仅供参考,这是另一个 - 使用overflowXoverflowY CSS属性检查页面上是否有滚动:

toHaveScrollOnPage: function() {
    return {
        compare: function(elm, visibility) {
            return {
                pass: protractor.promise.all([
                    elm.getCssValue('overflowY'),
                    elm.getCssValue('overflowX')
                ]).then(helpers.spread(function (horz, vert) {
                    if (visibility) {
                        return horz.indexOf("visible") !== -1 || vert.indexOf("visible") !== -1;
                    }
                    else {
                        return horz.indexOf("visible") === -1 && vert.indexOf("visible")  === -1;
                    }
                }))
            };
        }
    };
},

请注意,您不必将逻辑包装到茉莉花匹配器中 - 您可以制作辅助函数或以您的方式使用任何合适的逻辑。