[🐛 Bug]: Scrolling in Mobile Devices using WDIO is not working properly

[amuthansakthivel]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

20

Mode

WDIO Testrunner

Which capabilities are you using?

capabilities: [
    {
      platformName: "Android",
      "appium:deviceName": "my_emulator",
      "appium:automationName": "UiAutomator2",
      "appium:autoWebview": false,
      "appium:app": "/Users/amuthansakthivel/Downloads/HCP-development-BUILD-7574.apk",
    },
  ],

What happened?

I am trying to perform scroll action in native android and ios apps using driver.touchPerform and driver.action but none of them seems to be working.

async function scroll(){
  const startPercentage = 10;
  const endPercentage = 90;
  const anchorPercentage = 40;

  const { height, width }= await driver.getWindowSize();
  console.log("window size", height, width);
  const anchor = width * anchorPercentage / 100;
  const startPoint = height * startPercentage / 100;
  const endPoint = height * endPercentage / 100;
  console.log("anchor", anchor);
  console.log("startPoint", startPoint);
  console.log("endPoint", endPoint);

  await driver.touchPerform([
    {
      action: 'press',
      options: {
        x: anchor,
        y: startPoint,
      },
    },
    {
      action: 'wait',
      options: {
        ms: 100,
      },
    },
    {
      action: 'moveTo',
      options: {
        x: anchor,
        y: endPoint,
      },
    },
    {
      action: 'release',
      options: {},
    },
  ]);

  await driver
      .action("pointer")
      .move(anchor, startPoint)
      .down()
      .pause(2000)
      .move({
        duration: 1000,
        x: anchor,
        y: endPoint
      })
      .up()
      .perform();
}

What is your expected behavior?

I need a function that scrolls to element.

In selenide, we made it very simple like $(element).scrollTo().click();
In WDIO, the scrollIntoView method is not implemented

How to reproduce the bug.

You can try to perform scroll on any android and ios device

Relevant log output

scroll is not happening, so the element is not found

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

Can you share some logs how you would do it in Selenide and what you are seeing in WebdriverIO?

[amuthansakthivel]

Can you share some logs how you would do it in Selenide and what you are seeing in WebdriverIO?

Hi @christian-bromann

We do it like this in selenide

$(By.xpath(".//*[@text='Tabs']")).scrollTo().click(); //scroll max of 30 times in downward direction to find element
$(By.xpath(".//*[@text='Tabs']")).scroll(with(DOWN, 10)); //scroll max of 10 times in downward direction to find element
$(By.xpath(".//*[@text='Animation']")).scroll(up()); //scroll max of 30 times in upward direction to find element
$(By.xpath(".//*[@text='Animation']")).scroll(up(0.15f, 0.60f)); //scroll max of 30 times in upward direction with custom swiping height relative to device height
$(By.xpath(".//*[@text='Animation']")).scroll(down(0.15f, 0.60f)); //scroll max of 30 times in downward direction with custom swiping height relative to device height

Please find here my implementation.

https://github.com/selenide/selenide/blob/main/modules/appium/src/main/java/com/codeborne/selenide/appium/commands/AppiumScrollTo.java

If I use this code from wdio docs,

await driver.touchPerform([
    {
      action: 'press',
      options: {
        x: anchor,
        y: startPoint,
      },
    },
    {
      action: 'wait',
      options: {
        ms: 100,
      },
    },
    {
      action: 'moveTo',
      options: {
        x: anchor,
        y: endPoint,
      },
    },
    {
      action: 'release',
      options: {},
    },
  ]);

then I get this error below:

0] 2024-05-16T13:40:41.759Z INFO webdriver: [GET] http://127.0.0.1:4723/session/de38aae0-b67d-440f-a047-f898dc295946/window/rect
[0-0] 2024-05-16T13:40:41.778Z INFO webdriver: RESULT { width: 1080, height: 2340, x: 0, y: 0 }
[0-0] window size 2340 1080
[0-0] anchor 432
[0-0] startPoint 234
[0-0] endPoint 2106
[0-0] 2024-05-16T13:40:41.779Z INFO webdriver: COMMAND touchPerform()
[0-0] 2024-05-16T13:40:41.780Z INFO webdriver: [POST] http://127.0.0.1:4723/session/de38aae0-b67d-440f-a047-f898dc295946/touch/perform
[0-0] 2024-05-16T13:40:41.780Z INFO webdriver: DATA {
[0-0] actions: [
[0-0] { action: 'press', options: [Object] },
[0-0] { action: 'wait', options: [Object] },
[0-0] { action: 'moveTo', options: [Object] },
[0-0] { action: 'release', options: {} }
[0-0] ]
[0-0] }

If I use below code for scroll from wdio appium boiler plate,

await driver
      .action("pointer")
      .move(anchor, startPoint)
      .down()
      .pause(2000)
      .move({
        duration: 1000,
        x: anchor,
        y: endPoint
      })
      .up()
      .perform();

then I get this below error.
[0-0] 2024-05-16T13:44:29.837Z INFO webdriver: COMMAND elementClick("00000000-0000-0064-0000-019c00000007")
[0-0] 2024-05-16T13:44:29.837Z INFO webdriver: [POST] http://127.0.0.1:4723/session/f7a54031-25fa-405e-b137-17d28df819f1/element/00000000-0000-0064-0000-019c00000007/click
[0-0] 2024-05-16T13:44:29.939Z INFO webdriver: RESULT null
[0-0] 2024-05-16T13:44:29.943Z INFO webdriver: COMMAND getWindowRect()
[0-0] 2024-05-16T13:44:29.943Z INFO webdriver: [GET] http://127.0.0.1:4723/session/f7a54031-25fa-405e-b137-17d28df819f1/window/rect
[0-0] 2024-05-16T13:44:29.992Z INFO webdriver: RESULT { width: 1080, height: 2340, x: 0, y: 0 }
[0-0] window size 2340 1080
[0-0] anchor 432
[0-0] startPoint 234
[0-0] endPoint 2106
[0-0] 2024-05-16T13:44:29.996Z INFO webdriver: COMMAND performActions()
[0-0] 2024-05-16T13:44:29.997Z INFO webdriver: [POST] http://127.0.0.1:4723/session/f7a54031-25fa-405e-b137-17d28df819f1/actions
[0-0] 2024-05-16T13:44:29.997Z INFO webdriver: DATA {
[0-0] actions: [
[0-0] {
[0-0] id: 'action1',
[0-0] type: 'pointer',
[0-0] parameters: [Object],
[0-0] actions: [Array]
[0-0] }
[0-0] ]
[0-0] }
[0-0] 2024-05-16T13:44:33.425Z INFO webdriver: RESULT null
[0-0] 2024-05-16T13:44:33.430Z INFO webdriver: COMMAND releaseActions()
[0-0] 2024-05-16T13:44:33.433Z INFO webdriver: [DELETE] http://127.0.0.1:4723/session/f7a54031-25fa-405e-b137-17d28df819f1/actions
[0-0] 2024-05-16T13:44:33.460Z INFO webdriver: RESULT null
[0-0] 2024-05-16T13:44:33.462Z INFO webdriver: COMMAND findElement("xpath", "//[contains(@text,'Debug')]")
[0-0] 2024-05-16T13:44:33.462Z INFO webdriver: [POST] http://127.0.0.1:4723/session/f7a54031-25fa-405e-b137-17d28df819f1/element
[0-0] 2024-05-16T13:44:33.462Z INFO webdriver: DATA { using: 'xpath', value: "//[contains(@text,'Debug')]" }
[0-0] 2024-05-16T13:44:33.886Z INFO webdriver: RESULT {
[0-0] error: 'no such element',
[0-0] message: 'An element could not be located on the page using the given search parameters.',
[0-0] stacktrace: 'NoSuchElementError: An element could not be located on the page using the given search parameters.\n' +
[0-0]

[christian-bromann]

It seems like in Selenide you are using these selectors: .//*[@text='Animation'] while in WebdriverIO you have //[contains(https://github.com/text,'Debug')]. Shouldn't these be changed to:

- //[contains(https://github.com/text,'Debug')]
+ .//*[contains(https://github.com/text,'Debug')]

[amuthansakthivel]

Hi @christian-bromann

I don't know why the appium server logs is displaying that but I used correct locator in my code. Actual problem is that the scroll is not happening and hence it cannot find the element.

    await $("//*[@text='Allow']").click();
    await expect($("//android.widget.TextView[contains(@text,'Find Shifts')]")).toBeDisplayed();
    await expect($("//*[@text='My Account']")).toBeClickable();
    await $("//*[@text='My Account']").click();
    await scroll();
    await $("//*[contains(@text,'Debug')]").click();

[christian-bromann]

Thanks for clarifying. Any support helping us investigate this issue would be appreciated.

[wdio-bot]

Thanks for reporting!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[amuthansakthivel]

https://gist.github.com/serhatozdursun/25f3c8e26be32fe442abb956ee113ba7

The above code have actually worked. Could you please guide me on how can I override scrollTo method in appium to provide the implementation. I can go over entire code but that would take lot of time. @christian-bromann

So users can use $(locator).scrollTo();

[christian-bromann]

The implementation for the scroll command can be found here: packages/webdriverio/src/commands/browser/scroll.ts. Currently for mobile we assume you are in the web context and execute a JS function but in case of native we should use WebDrivers action API.