量角器：滚动 table 并测试无限滚动

Question

如何让量角器在 table 上向下滚动？我的 table 进行无限滚动 - 它加载 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 table 代码：

<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>

Answer 1

想法是找到 table（tr 标签）中的最新元素并通过设置父级的 scrollTop to the last element's 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?

量角器：滚动 table 并测试无限滚动

Protractor: Scrolling a table and testing for infinite scroll

angularjs

testing

protractor

end-to-end