在 e2e 测试茉莉花/量角器中的 Ionic 3 无限滚动模拟答案

【问题标题】：Ionic 3 infinite-scroll simulate in e2e test jasmine/protractor在 e2e 测试茉莉花/量角器中的 Ionic 3 无限滚动模拟
【发布时间】：2023-03-29 08:26:01
【问题描述】：

如果你去这里：http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

检查演示并单击列表中的最后一项：

然后在控制台输入：$0.scrollIntoView()

永远不会触发无限滚动。

有没有办法在量角器上下文中以编程方式触发无限滚动？

【问题讨论】：

标签： testing ionic2 jasmine protractor ionic3

【解决方案1】：

您的示例中滚动的实现依赖于滚动的速度/速度，我猜想在调用 scrollIntoView 时，它与预期范围相差甚远。

一种解决方法是通过在合理的时间内发出多个滚动事件来模拟平滑滚动。这个想法是尽可能地重现真实用户的行为。

一些浏览器已经通过scrollIntoView 提供了选项（Chrome 62 支持）：

$0.scrollIntoView({behavior: "smooth", block: "end"});

【讨论】：

【解决方案2】：

使用接受的答案，就我而言，我使用ion-infinite-scroll 作为参数。

完成测试以检查是否在 Ionic 中加载了更多内容：

describe('Scroll', () => {
    it('should load more when reached end', async () => {
        let list = getList();

        let currentCount = await list.count();

        const refresher = element(by.tagName('ion-infinite-scroll')).getWebElement();

        let count = 0;

        while(true){
            browser.executeScript(`arguments[0].scrollIntoView({behavior: "smooth", block: "end"});`, refresher);
            browser.sleep(1000); // wait for data to be loaded from api
            list = getList();
            let newCount = await list.count();
            expect(newCount).toBeGreaterThanOrEqual(currentCount)
            expect(newCount).toBeLessThanOrEqual(currentCount * 2)
            if(newCount === currentCount){
                break;
            }
            currentCount = newCount;
            count++;
        }

        expect(count).toBeGreaterThan(0);
    })
});

function getList() {
    return element(by.className(pageId + ' list')).all(by.tagName('ion-item'));
}

【讨论】：