Ionic 3 infinite-scroll simulate in e2e test jasmine/protractor

徘徊边缘 提交于 2019-12-08 04:39:13

问题


If you go here: http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

Inspect the demo and click the last item on the list:

Then in the console type: $0.scrollIntoView()

Infinite Scroll is never triggered.

Is there a way to programmatically trigger infinite-scroll in protractor context?


回答1:


The implementation of the scroll in your example rely on the speed/velocity of the scroll which I guess falls far from the expected range when scrollIntoView is called.

One workaround is to simulates a smooth scroll by emitting multiple scroll events over a reasonable time. The idea is to reproduce as close as possible the behavior of a real user.

Some browsers already provides the option via scrollIntoView (supported by Chrome 62) :

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



回答2:


Using the accepted answer, in my case, I used ion-infinite-scroll as the argument.

Complete test to check if more content is loaded in 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'));
}


来源:https://stackoverflow.com/questions/47579690/ionic-3-infinite-scroll-simulate-in-e2e-test-jasmine-protractor

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!