Elevating UI Automation

Testing Compose Animations Beyond Appium’s Reach

In mobile app development, creating animations and testing them is critical. However, testing these animations can be challenging with tools like Appium. This is where Jetpack Compose is helpful and makes developing and testing UI animations easier and more effective.

In this blog post, we’ll explore how Jetpack Compose offers a better solution for testing animations, providing us with a simple yet powerful approach.

What is Appium?

Appium is an open-source automation testing tool for mobile applications that allows us to write tests for our applications.

Appium functions by translating test code into commands that can interact with mobile devices and applications, simulating user actions such as swiping and tapping. However, it has limitations in handling certain tasks, such as testing complex animations, which is where we can write tests with Jetpack Compose.

Why Jetpack Compose over Appium?

Testing animations can be challenging, especially when capturing frame-by-frame changes in an animation. While Appium is a great tool for testing end-to-end user scenarios, it could be more efficient in handling real-time UI and state change interactions.

How Jetpack Compose handle the state and avoid the Appium problem?

Jetpack Compose offers a simple approach to UI testing with its integrated testing library. It includes the Compose Test Rule for environment setup, facilitates UI tests with actions like clicks and scrolls, and uses a semantic tree for precise UI assertions.

1. Jetpack Compose Test Framework: Jetpack Compose uses synchronization by waiting for animations to complete before assertions and detects when the UI is idle (including during animations) for stable testing.
2. Control Time in Tests: A manual animation clock is used to control animation progress frame by frame, enabling verification of animation states at the chosen time.

Testing tools for Jetpack Compose

We have the following tools that we can use:

TestAnimationClock: This allows us to control the animation clock manually during tests.

advanceTimeBy: Advances the clock by a specified duration, which helps move animations forward in time.

Setup

To get started writing Jetpack compose tests you need to follow these steps:

First, we need to add libraries and dependencies.

Secondly, we need to initialize the test environment which lets us set the Jetpack Compose content under test and interact with it.

Then we need to set the composable content:

Lastly, we need to customise testing strategies based on different animations since the key to testing animations is understanding the animation type.

Now, we’ll go through 3 different types:

Transition Animations

Transition animations are where the UI changes between different states.

Here is a simple example of content animation:

Preview of changing the content

Now, let’s write some tests for this animation…

Another example of the transition animation is changing the size and expanding the content or changing the colour and shape as we can see below:

Changing the colour, shape and size

Now let’s look at the code:

Continuous Animations

Continuous animations, like infinite animations, require checking if the animation is running as expected over time.

A common example of continuous animations is a loading spinner or progress indicator that continuously rotates until a task is completed or a screen is fully loaded.

Rotating Icon animation

For developing this rotating icon we need to use infiniteRotateAnim by animateFloatAsState.

Time to write tests for it:

Gesture-Driven Animations

Gesture-driven animations, like drag or swipe animations, are tested by simulating gestures.

Draggable box animation

Code for the draggable box:

Test for the draggable box:

Writing and learning tests for this code was straightforward once it was broken down into manageable steps and using guidance from Testing in Jetpack Compose Codelab.

The best approach is to start testing with simple tests like basic components and using the Jetpack Compose guide and then increase the complexity to understand complex tests and write more tests for other components, animations, states, and Jetpack Compose Navigation.