量角器：滚动表和测试无限滚动 [英] Protractor: Scrolling a table and testing for infinite scroll

问题描述

我怎样才能得到量角器下放在桌面上滚动？我的表确实无限滚动 - 它加载20条记录，并显示在第二到最后一行时，获取未来的20条记录。并非所有的记录都在视图......有些低于尚未滚动到，有的上面，当用户滚动过去吧。我在想测试

 它（'应取下一组上滚动记录'）{
    element.all（by.id（用户））。图（功能（榆树）{
        返回榆树;
    }）。然后（功能（用户）{
        期待（users.length）.toBe（20）;
    }）;    //滚动表底触发获取更多的记录    element.all（by.id（用户））。图（功能（榆树）{
        返回榆树;
    }）。然后（功能（用户）{
        期待（users.length）.toBe（40）;
    }）;
};
 

这是这样做的正确方法吗？

HTML表code：

 ＆LT; D​​IV NG-IF =用户和放大器;＆安培; users.length大于0级=表滚动NG无限滚动=loadMoreUsers（） ＆GT;
    ＆LT;表ID =用户表级=表的表悬停文本溢出省略号＆GT;
        ＆LT;＆THEAD GT;
            ＆LT; TD类=COL1＆GT;＆LT; / TD＆GT;
            ＆LT; TD ID =用户表名-COL级=COL2＆gt;用户＆LT; / TD＆GT;
            ＆LT; TD ID =用户表最新-COL级=COL3＆GT;生日＆LT; / TD＆GT;
        ＆LT; / THEAD＆GT;
        ＆LT; TBODY NG重复=在用户组＆GT;
            ＆LT; TR NG重复=用户group.usersNG点击=userClicked（用户）;＆GT;
                ＆LT; TD类=COL1＆GT;
                    ＆LT; IMG类=COL-XS-1的资料画面的风格=填充：0NG-SRC ={{user.profile_picture}}＆GT;＆LT; / TD＆GT;
                ＆LT; TD类=COL2＆GT;
                    ＆LT; D​​IV ID =用户名＆GT; {{user.last_name}}，{{user.first_name}}＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆LT; TD类=COL3＆GT;
                    ＆LT; D​​IV ID =用户的最新＆GT; {{user.date}}＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
         ＆LT; / TBODY＆GT;
     ＆LT; /表＆gt;
＆LT; / DIV＆GT;
 

解决方案

我们的想法是找到最新的元素在表（ TR 标签），并滚动到它设置父 scrollTop的 到最后一个元素的 的offsetTop 。

  

的 Element.scrollTop 属性获取或设置像素数
  元素的内容被向上滚动。元素的scrollTop的
  是一个元素的顶部到它的最上面的距离的测量
  可见内容。

  
  

的 HTMLElement.offsetTop 只读属性返回的距离
  电流相对于offsetParent节点顶部的元件

  DIV VAR =元素（by.css（'div.table滚动'））;
VAR LASTROW =元素（by.css（'＃表TR身份识别码：最后的型'））;browser.executeScript（返回参数[0] .offsetTop;，lastRow.getWebElement（））。然后（功能（偏移）{
    browser.executeScript（'参数[0] .scrollTop =参数[1];'，div.getWebElement（），偏移量）。然后（函数（）{
        //断言    }）;
}）;
 

另见（使用类似的解决方案）：

• 如何滚动到一个元素的div内<？ / A>

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>

解决方案

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

• How to scroll to an element inside a div?

这篇关于量角器：滚动表和测试无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！