title: scrolling through a virtual list with protractor
body: <p>I know this library is coming up in Angular 6, but I need to implement it in Protractor tests, testing an Angular 5 app.</p>
  
  <p>In the virtual list, there are 10 items displayed at a time. The more more we scroll down, the bottom of the list populates new items (2-3 at a time) and the top of the list depopulates. The item we are looking for can be ex: item 20 on the list, if we do not find it in the current view, I need the test to scroll down until it is found.</p>
  
  <p>The challenge right now is this: when the item is found, line 4 and 5 work well and scroll to the list item. When it is not found, line 4 fails because listItemWeWant.isDisplayed() is false and does not proceed. 
  Perhaps there is a better check here, maybe it can be checked if there is anything in the element array finder, or count() can be used. Neither of which I could get to work.</p>
  
  <p>If we can solve this issue, then we will have virtual scrolling tests prior to Angular 6 coming up. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>waitUntilScrolledToSelectorInAVirtualList(listItemWeWant) {
      getToVirtualListItem();
      function getToVirtualListItem() {
        listItemWeWant.isDisplayed().then( (result) =&gt; { // failing this, else condition never takes effect
          if (result === true) { // if condition works fine if the item is in the the 10-item list
            waitUntilScrolledToSelectorWithMouseMove(listItemWeWant);
          } else { // it never falls into this else statement
            goToTheEndOfTheViewableList();
            waitUntilScrolledToSelectorWithMouseMove(listItemWeWant);
            console.log('went to the end of the list');
          }
        }).catch( (e) =&gt; {
          console.log(e);
        });
      }
      async function goToTheEndOfTheViewableList() { // this function never runs. What it does is, click on the virtual list and hold down arrow button.... Maybe there is a better way to do this
        await element(by.tagName('virtual-scroll')).click();
        await browser.driver.actions().keyDown(protractor.Key.ARROW_DOWN);
        await browser.sleep(5000); 
        await browser.driver.actions().keyUp(protractor.Key.ARROW_DOWN);
      }
      function waitUntilScrolledToSelectorWithMouseMove (elementSelector: ElementFinder): Promise &lt;{}&gt; {
        return new Promise((resolve, reject) =&gt; {
          browser.driver.wait(() =&gt; {
            return browser.driver.actions().mouseMove(elementSelector).perform(); // here is the key line, the rest is a custom promise wrapper
          }, 20000).then( () =&gt; {
            resolve(); // resolve the promise d
          }).catch( (e) =&gt; {
            console.log('promise not successful: error out');
            reject();
          });
        });
      }
    }</code></pre>
  </div>
  </div>
  </p>