Scrollable methods for native apps (iOS and Android)

Tutorials/Documentation
1
  1. Scroll Up:
  • Method:
export async function scrollUp() {
    if (driver.isAndroid) {
        await $('android=new UiScrollable(new UiSelector().scrollable(true)).scrollForward()');
    } else {
        const screenSize = await driver.getWindowRect();
        const startY = screenSize.height * 0.7;
        const endY = screenSize.height * 0.3;
        const x = screenSize.width / 2;

        await driver.execute('mobile: swipe', {
            direction: 'up',
            element: null,
            startX: x,
            startY: startY,
            endX: x,
            endY: endY,
            duration: 500,
        });
    }
}
  • For Android devices, this function utilizes the UiScrollable class to scroll forward through scrollable elements. On iOS, it calculates the screen size to perform a swipe gesture from the lower part of the screen to the upper part, allowing for intuitive upward scrolling.
  1. Scroll Down:
  • Method:
export async function scrollDown() {
    if (driver.isAndroid) {
        await $('android=new UiScrollable(new UiSelector().scrollable(true)).scrollBackward()');
    } else {
        await driver.execute('mobile: scroll', { direction: 'down' });
    }
}
  • This function for Android employs the UiScrollable to scroll backward. For iOS devices, it executes a simple scroll command to move down the content.
  1. Horizontal Scroll:
  • Method:
export async function scrollHorizontally() {
    if (driver.isIOS) {
        await driver.execute('mobile: scroll', { direction: 'right' });
    } else {
        await $('android=new UiScrollable(new UiSelector().scrollable(true)).setAsHorizontalList().scrollForward()');
    }
}
  • On iOS, this function performs a scroll to the right, facilitating horizontal navigation. For Android, it uses UiScrollable configured as a horizontal list to enable horizontal scrolling.
  1. Scroll Into View:
  • Method:
export async function scrollIntoView(selector: string) {
    for (let scrollCount = 0; scrollCount < 7; scrollCount++) {
        const isElementVisible = driver.isIOS
            ? await $(`//XCUIElementTypeOther//XCUIElementTypeStaticText[@name='${selector}']`)
            : await $(`//android.widget.TextView[@text="${selector}"]`);

        if (await isElementVisible.isExisting()) break;

        driver.isIOS
            ? await browser.execute('mobile: scroll', { direction: 'down' })
            : await $(`android=new UiScrollable(new UiSelector()).scrollForward().scrollTextIntoView("${selector}")`);
    }
}
  • This function attempts to bring a specific element into the visible area of the screen. It iteratively checks for the element’s existence and scrolls down if the element is not found, repeating this process up to seven times. This method is essential for ensuring that users can access all relevant content easily.*

These scrolling methods are vital for enhancing the usability of mobile applications, allowing users to interact with content effortlessly across different devices.