3

How can I get protractor to scroll down on a table? My table does infinite scrolling - it loads 20 records, and when the second-to-last-row is displayed, it fetches the next 20 records. Not all records are in view...some are below yet to be scrolled into, and some are above when the user has scrolled past it. I was thinking the test is

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

Is this the right way of doing this?

HTML table code:

<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>
Jason
  • 1,787
  • 4
  • 29
  • 46

1 Answers1

4

The idea is to find the latest element in the table (tr tag) and scroll to it by setting the parent's 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

    });
});

Also see (similar solution used):

Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Thanks. It's finding the location, but it's not scrolling. My table isn't the whole screen...it's just a part of the screen. Do I need to hover the mouse or something? – Jason Jan 06 '15 at 15:39
  • @Jason difficult to say without seeing what it looks like..how do you make it load more items? You just need to mimic the same thing you manually do in the browser - tell me what it is. Thanks. – alecxe Jan 06 '15 at 15:40
  • Similar to http://www.nytimes.com/ - there's a section called 'Watching', where it's an embedded table. If you scroll when your mouse is not on the table, the whole screen scrolls. If you scroll when your mouse is over the table, only the table scrolls. – Jason Jan 06 '15 at 15:45
  • @Jason are you sure you have the same mechanism as at nytimes involved in scrolling? Could you share the HTML code of your scrolling element-container with children? Thanks. – alecxe Jan 06 '15 at 18:13
  • @Jason I've updated the answer with an alternative option, please check. – alecxe Jan 06 '15 at 20:12