3

分度器でテーブルを下にスクロールするにはどうすればよいですか? 私のテーブルは無限スクロールを行います。20 レコードをロードし、最後から 2 番目の行が表示されると、次の 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>
4

1 に答える 1

4

アイデアは、テーブル内の最新の要素 (trタグ) を見つけ、親scrollTopを最後の要素の に設定してスクロールすることoffsetTopです。

このElement.scrollTopプロパティは、要素のコンテンツが上方向にスクロールされるピクセル数を取得または設定します。要素の scrollTop は、要素の上端からその一番上に表示されているコンテンツまでの距離の測定値です。

HTMLElement.offsetTop読み取り専用プロパティは、offsetParent ノードの上部に対する現在の要素の距離を返します。

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

    });
});

また、参照してください（同様のソリューションが使用されています）：

于 2015-01-06T15:00:04.843 に答える