如何在Android Espresso测试中验证输入框内的Drawable图标是否正常显示

问题描述 #

应用内有一个自定义邮箱输入框，如何在Android测试（Espresso）中验证该输入框是否正常展示配置的Drawable图标？
对应布局XML如下：

<com.my.mobile.kit.input.InputGeneral
        android:id="@+id/login_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="10dp"
        app:kitEndIconDrawable="@drawable/kit_ic_cleanitem_24"
        app:kitEndIconMode="clear_text"
        app:kitEndIconTint="@color/baseDeepGreyOne"
        app:kitLabelText="@string/m_auth_login_email_hint"
        app:kitLabelVisibilityMode="manual"
        app:kitPlaceholderText="@string/m_auth_login_email_hint"
        app:layout_constraintTop_toTopOf="parent" />

解决方案 #

你使用的InputGeneral属于自定义封装的输入组件，这类组件通常基于Material Design的TextInputLayout实现，可通过自定义Espresso Matcher的方式完成图标校验：

1. 自定义图标校验Matcher #

import android.view.View
import androidx.core.content.ContextCompat
import androidx.test.espresso.matcher.BoundedMatcher
import org.hamcrest.Description

fun hasExpectedEndIcon(resId: Int): BoundedMatcher<View, com.my.mobile.kit.input.InputGeneral> {
    return object : BoundedMatcher<View, com.my.mobile.kit.input.InputGeneral>(com.my.mobile.kit.input.InputGeneral::class.java) {
        override fun describeTo(description: Description) {
            description.appendText("InputGeneral 配置的结束图标资源ID为: $resId")
        }

        override fun matchesSafely(inputView: com.my.mobile.kit.input.InputGeneral): Boolean {
            // 若自定义组件暴露了获取结束图标的方法直接调用即可
            val actualIcon = inputView.endIconDrawable ?: return false
            val expectedIcon = ContextCompat.getDrawable(inputView.context, resId) ?: return false
            // 校验drawable内容是否一致，如有tint校验需求可在此处追加tint值比对逻辑
            return actualIcon.constantState == expectedIcon.constantState
        }
    }
}

若自定义组件没有暴露获取endIcon的方法，可先在matchesSafely中查找组件内部嵌套的TextInputLayout实例，再调用其getEndIconDrawable()方法获取图标。

2. 编写测试用例 #

import androidx.test.espresso.Espresso.onView
import androidx.test.espresso.action.ViewActions.typeText
import androidx.test.espresso.assertion.ViewAssertions.matches
import androidx.test.espresso.matcher.ViewMatchers.withId
import org.junit.Test

class EmailInputTest {
    @Test
    fun checkClearIconDisplayedWhenInputHasContent() {
        // 输入内容触发清除图标展示（clear_text模式下无输入时图标默认隐藏）
        onView(withId(R.id.login_email))
            .perform(typeText("vag@gmail.com"))
        
        // 校验结束图标是否为配置的清除图标
        onView(withId(R.id.login_email))
            .check(matches(hasExpectedEndIcon(R.drawable.kit_ic_cleanitem_24)))
    }
}

补充说明 #

• 如果需要同时校验图标是否可见，可在Matcher中追加inputView.isEndIconVisible == true的判断逻辑
• 若需要校验图标tint颜色，可通过actualIcon.tint和预期颜色值比对实现

内容的提问来源于stack exchange，提问作者Straider