Interacting with Partially Visible ImageButtons in Espresso Tests

Interacting with Partially Visible ImageButtons in Espresso Tests

11 April 2024 Stephan Petzl Leave a comment Tech-Help

When conducting automated UI tests with Espresso, developers often encounter issues with performing actions on views that aren’t fully visible on the screen. This is a common scenario when dealing with custom UI elements, such as an ImageButton that is intentionally designed to be partially off-screen. If you’ve faced an error indicating that a view’s area is not sufficiently displayed to the user, this guide will show you how to bypass this constraint and interact with such elements in your Espresso tests.

Understanding the Issue

By default, Espresso requires at least 90% of a view’s area to be displayed on the screen to perform actions like clicking. This constraint is in place to mimic actual user behavior as closely as possible. However, certain design elements may require less than 90% visibility, leading to a PerformException when attempting standard click actions.

Creating a Custom Click Action

To interact with views that are not fully visible, you can create a custom click action that modifies the visibility constraints set by Espresso. Below is a method that illustrates how to adjust the constraint from the default 90% to 75%, allowing you to interact with the ImageButton even if a portion of it is off-screen.

            
public static ViewAction clickPartialVisibleButton() {
    return new ViewAction() {
        @Override
        public Matcher<View> getConstraints() {
            return isDisplayingAtLeast(75);
        }

        @Override
        public String getDescription() {
            return "click on partially visible ImageButton";
        }

        @Override
        public void perform(UiController uiController, View view) {
            view.performClick();
        }
    };
}
            
        

Implementing the Solution

Once you have defined your custom click action, you can use it in your test just like any other action provided by Espresso. Here’s an example of how to implement this solution:

            
onView(withId(R.id.navigationButtonProfile)).perform(clickPartialVisibleButton());
            
        

Alternative Approach without Visibility Constraints

Another approach is to remove the visibility constraints altogether. This method allows you to click on any view regardless of its visibility percentage on the screen. Here’s how you can define a custom matcher that achieves this:

            
public static ViewAction forceClick() {
    return new ViewAction() {
        @Override
        public Matcher<View> getConstraints() {
            return ViewMatchers.isEnabled(); // No visibility constraints
        }

        @Override
        public String getDescription() {
            return "force click";
        }

        @Override
        public void perform(UiController uiController, View view) {
            view.performClick();
        }
    };
}
            
        

To use this custom action, simply call it during your test execution like so:

            
onView(withId(R.id.navigationButtonProfile)).perform(forceClick());
            
        

Conclusion

Testing custom UI components can present unique challenges that aren’t always addressed by the default configurations of testing frameworks like Espresso. By creating custom actions, you can ensure that your tests are robust and capable of interacting with all elements of your app’s UI, regardless of their visibility. The provided code snippets offer a starting point for dealing with partially visible ImageButtons, enabling you to continue writing effective UI tests.

Like this article? there’s more where that came from!