如何让 Protractor 在表格上向下滚动?我的表格无限滚动 - 它加载 20 条记录,当显示倒数第二行时,它获取接下来的 20 条记录。并非所有记录都在 View 中……有些记录在下方尚未滚动到其中,有些在用户滚动过去时在上方。我在想测试是
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
});
});
另见(使用了类似的解决方案):
关于angularjs - Protractor :滚动表格并测试无限滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27794316/