Appium - How to scroll down using UiAutomator2 and WebdriverIO with React Native (Android) and JavaScript

Viewed 5675

No matter what I try, I am unable to get my React Native (Android) app to scroll down using Appium.

I am using UiAutomator2 and WebdriverIO.

My code looks like this:

scrollUntilDisplayed(element: WebdriverIO.Element) {
    const dimensions = driver.getWindowSize();
    touchScroll(10, 100);
}

In place of touchScroll, I have tried the following calls:

  • driver.touchScroll(offsetX, offsetY) - throws an error (invalid argument: java.lang.IllegalArgumentException: ScrollToModel: The mandatory field 'params' is not present in JSON)
  • driver.touchScroll(offsetX, offsetY, element) - throws an error (invalid argument: java.lang.IllegalArgumentException: ScrollToModel: The mandatory field 'params' is not present in JSON)
  • browser.execute("mobile: scroll", {direction: 'down'}); - throws an error (unknown error: An unknown server-side error occurred while processing the command. Original error: Both strategy and selector arguments must be provided)
  • driver.touchFlick(0, dimensions.height, undefined, 10000, 10000, 10000); - does nothing; sits until Appium times out
  • element.scrollIntoView(); - does nothing
2 Answers

Since ReactNative has a NATIVE_APP context (as a regular Android app) you can use uiautomator selector:

const bottomElementSelector = `new UiScrollable(new UiSelector().scrollable(true)).scrollIntoView(new UiSelector().text("Element label text"))`
const bottomEl = $(`android=${bottomElementSelector}`)

Search for an element with srollable selector should move focus down to that element

Note: Make sure you are using UiAutomator2 in Appium capabilities

Another solution is to use the performActions of Appium:

/**
 * Scroll down by simulating a swipe down gesture.
 *
 * @param driver
 * @param scrollDuration a lower scroll duration add more fling speed.
 */
export const scrollDown = async (driver, scrollDuration = 300) => {
    const startPercentage = 90
    const endPercentage = 10
    const anchorPercentage = 50

    const { width, height } = await driver.getWindowSize()
    const density = (await driver.getDisplayDensity()) / 100
    const anchor = (width * anchorPercentage) / 100
    const startPoint = (height * startPercentage) / 100
    const endPoint = (height * endPercentage) / 100

    await driver.performActions([
        {
            type: 'pointer',
            id: 'finger1',
            parameters: { pointerType: 'touch' },
            actions: [
                { type: 'pointerMove', duration: 0, x: anchor, y: startPoint },
                { type: 'pointerDown', button: 0 },
                { type: 'pause', duration: 100 },
                { type: 'pointerMove', duration: scrollDuration, origin: 'pointer', x: 0, y: -endPoint * density },
                { type: 'pointerUp', button: 0 },
                { type: 'pause', duration: scrollDuration },
            ],
        },
    ])
}
Related