Question

我知道这个库正在Angular 6中出现，但是我需要在Protractor测试中实现它，测试一个Angular 5应用程序。

在虚拟列表中，一次显示10个项目。我们向下滚动的越多，列表的底部就会填充新项目（一次2-3个），并且列表的顶部不再填充。我们要查找的项目可以是ex：列表中的项目20，如果我们在当前视图中找不到它，我需要测试向下滚动直到找到它。

现在的挑战是：当找到项目时，第4行和第5行运作良好并滚动到列表项。找不到时，第4行失败，因为listItemWeWant.isDisplayed（）为false且不继续。也许在这里有一个更好的检查，也许可以检查元素阵列查找器中是否有任何东西，或者可以使用count（）。我都不能开始工作。

如果我们可以解决这个问题，那么我们将在Angular 6出现之前进行虚拟滚动测试。

＆＃13;

waitUntilScrolledToSelectorInAVirtualList(listItemWeWant) {
    getToVirtualListItem();
    function getToVirtualListItem() {
      listItemWeWant.isDisplayed().then( (result) => { // 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) => {
        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 <{}> {
      return new Promise((resolve, reject) => {
        browser.driver.wait(() => {
          return browser.driver.actions().mouseMove(elementSelector).perform(); // here is the key line, the rest is a custom promise wrapper
        }, 20000).then( () => {
          resolve(); // resolve the promise d
        }).catch( (e) => {
          console.log('promise not successful: error out');
          reject();
        });
      });
    }
  }

＆＃13;

Answer 1

对于动态页面，这会模拟页面缩减

this.scrollTillEnd = function () {
this.woningCount.getText().then(function(woningCount) {
woningCount = woningCount.match(/[0-9]+/g);
var scrollCount = woningCount[0]/15; // each scroll displays 15 items. This is to scroll down till all wonings are displayed
for(i=0; i < scrollCount + 1 ; i++){
        browser.executeScript('window.scrollTo(0,document.body.scrollHeight)').then(function(){
browser.sleep(2000);
});
            }
    }); 
    };

Answer 2

我想出了这一个。这是在许多元素的虚拟列表中选择列表元素的代码。

＆＃13;

  waitUntilScrolledToSelectorInAVirtualList(listItemWeWantAll: ElementArrayFinder) {
    let recursionCounter = 0;
    const recursionLimit = 1000;
    const focusOnVirtualScrollList = element(by.tagName('virtual-scroll'));
    getToVirtualListItem();
    function getToVirtualListItem() {
      listItemWeWantAll.count().then((result) => {   // get the count of the item, flatten with then...
        if (result >= 1) { // if an element is found
          waitUntilScrolledToSelectorWithMouseMove(listItemWeWantAll.first()); // scroll to the item we want in the list
        } else {
          focusOnVirtualScrollList.click().then(() => {
            browser.driver.actions().sendKeys(protractor.Key.ARROW_DOWN).perform().then(() => {
              recursionCounter++;
              if (recursionCounter > recursionLimit) {
                try {
                  throw new Error('the item does not exist in this list');
                } catch (e) {
                  console.log(e);
                }
              }
              getToVirtualListItem(); // recursive function!
            });
          });
        }
      }).catch((e) => {
        console.log(e);
      });
    }
    function waitUntilScrolledToSelectorWithMouseMove (elementSelector: ElementFinder): Promise <{}> {
      return new Promise((resolve, reject) => {
        browser.driver.wait(() => {
          return browser.driver.actions().mouseMove(elementSelector).perform();
        }, 20000).then( () => {
          resolve(); // resolve the promise d
        }).catch( (e) => {
          console.log('waitUntilScrolledToSelectorWithMouseMove promise not successful: error out');
          reject();
        });
      });
    }
  }

＆＃13;

使用量角器滚动虚拟列表

2 个答案: