CODEWITHSUNDEEP
protractor
Bin
Bin

Reputation: 49

How to test infinite scroll in a table?

I am testing Infinite scrolling in my angular application. The scroll is part of a table in the main page. The main page doesn't have any scroll bar of its own and if I hover the mouse over the table and scroll more elements will be loaded.

Initially, 50 rows are displayed on the screen out of which only 10 are visible on the table. On scrolling to the last element, the next 50 will be loaded in the UI. This will be continued until all the elements are retrieved.

I tried clicking on the first row of the table and used scroll

dashboard.Row1.click() browser.executeScript("window.scrollBy(0,200)");

This doesn't scroll the table. I am not sure if this is the right approach to solve the problem. I also tried using offset but it didn't help either

This is my HTML:

<tbody infinite-scroll="$ctrl.loadInventories()" infinite-scroll-container="'.table-wrapper'" md-body="" class="md-body ng-isolate-scope">
<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">

<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">

<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">

<!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder -->
<tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style="">

Upvotes: 2

Views: 1047

Answers (1)

Nathaniel C
Nathaniel C

Reputation: 564

You could try scrolling to the last row of the table using scrollIntoView(). It would be something like

const tableRows = element.all(by.css('tbody tr'));
browser.executeScript(e => e.scrollIntoView(), tableRows.last());

Or more compactly, perhaps less readable

browser.executeScript(e => e.scrollIntoView(), $$('tbody tr').last());

Upvotes: 1

Related Questions