Mastering Swipe Gestures in Mobile Testing with WebDriverIO and Appium

Mobile testing is always tricky, especially when dealing with touch gestures like swiping. Whether you’re using WebDriverIO or directly working with Appium, handling swipes reliably across different devices can be a challenge. In this article, we’ll walk through an efficient implementation of swipe gestures using WebDriverIO, which can also be adapted for Java-based projects.

The Challenge of Swiping in Mobile Testing

Swiping is a fundamental gesture in mobile applications. It is used for navigating between pages, interacting with carousels, dismissing notifications, and more. Automating swipe actions requires precise handling of coordinates, considering different screen sizes and resolutions.

Implementing Swipe Actions in TypeScript with WebDriverIO

The following utility functions provide a robust way to perform swipe actions in WebDriverIO:

1. Swipe Left

/**
 * Swipes left from the given center point.
 * @param center The center point to start the swipe from.
 * @param swipeDistance The distance to swipe left. Defaults to SWIPE_DISTANCE.
 */
public async swipeLeft(
  center: { x: number; y: number },
  swipeDistance: number = this.SWIPE_DISTANCE,
): Promise<void> {
  await this.dragAndDropByCoordinates(center, {
    x: center.x - swipeDistance,
    y: center.y,
  });
}

2. Swipe Right

/**
 * Swipes right from the given center point.
 * @param center The center point to start the swipe from.
 * @param swipeDistance The distance to swipe right. Defaults to SWIPE_DISTANCE.
 */
public async swipeRight(
  center: { x: number; y: number },
  swipeDistance: number = this.SWIPE_DISTANCE,
): Promise<void> {
  await this.dragAndDropByCoordinates(center, {
    x: center.x + swipeDistance,
    y: center.y,
  });
}

3. Swipe Up

/**
 * Swipes up from the given center point.
 * @param center The center point to start the swipe from.
 * @param swipeDistance The distance to swipe up. Defaults to SWIPE_DISTANCE.
 */
public async swipeUp(
  center: { x: number; y: number },
  swipeDistance: number = this.SWIPE_DISTANCE,
): Promise<void> {
  await this.dragAndDropByCoordinates(center, {
    x: center.x,
    y: center.y - swipeDistance,
  });
}

4. Swipe Down

/**
 * Swipes down from the given center point.
 * @param center The center point to start the swipe from.
 * @param swipeDistance The distance to swipe down. Defaults to SWIPE_DISTANCE.
 */
public async swipeDown(
  center: { x: number; y: number },
  swipeDistance: number = this.SWIPE_DISTANCE,
): Promise<void> {
  await this.dragAndDropByCoordinates(center, {
    x: center.x,
    y: center.y + swipeDistance,
  });
}

Drag and Drop Implementation

The swipe methods rely on the dragAndDropByCoordinates function, which uses WebDriverIO’s touch action API to simulate dragging and dropping at specific coordinates.

/**
 * Drags an element and drops it onto a target element with platform-specific logic.
 * @param sourceCenter The starting point for the touch action, defined by `x` and `y` coordinates.
 * @param targetCenter The target point for the touch action, defined by `x` and `y` coordinates.
 * @returns A Promise that resolves once the drag and drop operation is completed.
 * @throws Error if an error occurs during the drag and drop operation.
 */
public async dragAndDropByCoordinates(
  sourceCenter: { x: number; y: number },
  targetCenter: { x: number; y: number },
): Promise<void> {
  const duration: number = 800;
  try {
    await driver
      .action('pointer', {
        parameters: { pointerType: 'touch' },
      })
      .move({ duration: duration, x: sourceCenter.x, y: sourceCenter.y })
      .down()
      .pause(duration)
      .move({ duration: duration, x: targetCenter.x, y: targetCenter.y })
      .up()
      .perform();
  } catch (error) {
    console.error('Error during drag and drop operation:', error);
    if (error instanceof Error) {
      throw new Error(
        `Failed to perform drag and drop. Error: ${error.message}`,
      );
    } else {
      throw new Error(
        'An unknown error occurred during the drag and drop operation.',
      );
    }
  }
}

Cross-Platform Compatibility

One of the biggest advantages of this approach is that it works purely based on coordinates, meaning you don’t have to write separate scripts for iOS and use UI Automator for Android. These methods will work seamlessly on both platforms, making it crucial if you are trying to manage automation for both iOS and Android in a single project.

Adapting This Approach for Java Projects

While this implementation is in TypeScript, the logic can be easily adapted for Java-based Appium projects. Java provides similar touch actions via the TouchAction or W3C Actions API, making it possible to replicate the same swiping mechanism in Java.

Conclusion

Swiping in mobile test automation can be complex, but a well-structured approach using coordinate-based actions can make it more reliable. The above WebDriverIO implementation offers a clean and scalable way to handle swipe gestures, ensuring robust and effective test automation for mobile applications. If you’re working with Java, you can implement the same logic using Appium’s TouchAction API.

For more details, you can check out my sample project here: WebDriverIO Appium Project. You’ll find these methods under this line, along with many other helpful functions for WebDriverIO & Appium.