title: How to test loading more rows in a table upon scroll?
body: <p>I am testing infinity scroll using protractor on an angular application. The table initially have 50 rows that are displayed upon loading the url. Once I scroll the next 50 rows are displayed. similarly 800-900 rows are displayed. That means I have to scroll atleast 16 to 18 times. There is also some load time of approximately 3 seconds for next 50 rows to be loaded. How do I test this using Protractor?</p>
  
  <p>I am using scroll into View to load the rows. </p>
  
  <pre><code>var tableRows = element.all(by.css('tbody tr'));
          let lastCount = 0
          let count = -1
          const go = () =&gt; tableRows.count().then(function (rowCount) {
              lastCount = count
              count = rowCount
              console.log("Count:" +count)
              console.log("lastCount: "+lastCount)
              browser.executeScript(e =&gt; e.scrollIntoView(), tableRows.last());
              browser.sleep(3000)
              if (lastCount !== count) {
                  console.log("going again")
                  go()
              }
              else{
                  console.log("In Else")
  
  callback();
  
  
  </code></pre>
  
  <p>Here is my HTML</p>
  
  <pre><code>
  &lt;tbody infinite-scroll="$ctrl.loadInventories()" infinite-scroll-container="'.table-wrapper'" md-body="" class="md-body ng-isolate-scope"&gt;
  &lt;!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder --&gt;
  &lt;tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style=""&gt;
  
  &lt;!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder --&gt;
  &lt;tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style=""&gt;
  
  &lt;!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder --&gt;
  &lt;tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style=""&gt;
  
  &lt;!-- ngRepeat: data in $ctrl.inventories | orderBy: myOrder --&gt;
  &lt;tr class="" ng-repeat="data in $ctrl.inventories | orderBy: myOrder" style=""&gt;
  
  </code></pre>