angularjs – 量角器:滚动表并测试无限滚动

前端之家收集整理的这篇文章主要介绍了angularjs – 量角器:滚动表并测试无限滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何让量角器向下滚动到桌子上?我的表执行无限滚动 – 它加载了20条记录,当显示倒数第二行时,它会获取接下来的20条记录.并非所有记录都在视图中……有些记录在下方尚未滚动,有些记录在用户滚过它之后.我在考虑测试
it('should fetch next set of records on scroll') {
    element.all(by.id('users')).map(function (elm) {
        return elm;
    }).then(function (users) {
        expect(users.length).toBe(20);
    });

    // Scroll the table to the bottom to trigger fetching more records

    element.all(by.id('users')).map(function (elm) {
        return elm;
    }).then(function (users) {
        expect(users.length).toBe(40);
    });
};

这是正确的做法吗?

HTML表格代码

<div ng-if="users && users.length > 0" class="table-scroll" ng-infinite-scroll="loadMoreUsers()">
    <table id="users-table" class="table table-hover text-overflow-ellipsis">
        <thead>
            <td class="col1"></td>
            <td id="users-table-name-col" class="col2">User</td>
            <td id="users-table-date-col" class="col3">Birthday</td>
        </thead>
        <tbody ng-repeat="group in users">
            <tr ng-repeat="user in group.users" ng-click="userClicked(user);">
                <td class="col1">
                    <img class="col-xs-1 profile-picture" style="padding:0" ng-src="{{user.profile_picture}}"></td>
                <td class="col2">
                    <div id="user-name"> {{ user.last_name }},{{ user.first_name }} </div>
                </td>
                <td class="col3">
                    <div id="user-date"> {{user.date}} </div>
                </td>
            </tr>
         </tbody>
     </table>
</div>
我们的想法是找到表格中的最新元素(tr标签)并通过将父级的 scrollTop设置为最后一个元素的 offsetTop来滚动到它.

The Element.scrollTop property gets or sets the number of pixels that
the content of an element is scrolled upward. An element’s scrollTop
is a measurement of the distance of an element’s top to its topmost
visible content.

The HTMLElement.offsetTop read-only property returns the distance of
the current element relative to the top of the offsetParent node.

var div = element(by.css('div.table-scroll'));
var lastRow = element(by.css('table#myid tr:last-of-type'));

browser.executeScript("return arguments[0].offsetTop;",lastRow.getWebElement()).then(function (offset) {
    browser.executeScript('arguments[0].scrollTop = arguments[1];',div.getWebElement(),offset).then(function() {
        // assertions

    });
});

另见(使用类似的解决方案):

> How to scroll to an element inside a div?

猜你在找的Angularjs相关文章