Espresso error typing some text into TextInputLayout

Question

I want to test my login UI which contains some TextInputLayout fields , i have set up some code to run but it crashes and throws an error , can anyone please with this issue , i appreciate in advance

• I want to simply type some text into TextInputLayout

    @Test
    fun testCaseSimulateLoginOnButtonClick(){
        onView(withId(R.id.loginEmail)).perform(typeText("[email protected]"))
        onView(withId(R.id.loginPassword)).perform(typeText("123456"))
        onView(withId(R.id.loginBtn)).perform(click())
        onView(withId(R.id.drawer)).check(matches(isDisplayed()))
    }

• This is the error i get

Error performing 'type text([email protected])' on view 'view.getId() is <2131362123/com.example.app:id/loginEmail>'.

Answer 1

You can't type text in the TextInputLayout view, that is just a container. The TextInputLayout has a FrameLayout as a direct child, and in that FrameLayout the first child view is the EditText (which you can type into)

You can get the EditText in Espresso with some extra matchers (find a view that is a descendant of the base R.id.text_layout layout and has a class name that ends with EditText).

onView(
    allOf(
        isDescendantOfA(withId(R.id.text_layout)),
        withClassName(endsWith("EditText"))
    )
).perform(
    typeText("Hello world")
)

If you have to do this in a lot of places, you can write a helper function

fun isEditTextInLayout(parentViewId: Int): Matcher<View> {
    return allOf(
        isDescendantOfA(withId(parentViewId)),
        withClassName(endsWith("EditText"))
    )
}

and use it as

onView(isEditTextInLayout(R.id.text_layout)).perform(typeText("Hello world"))

for an XML that looks like

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Type words here"
    android:layout_margin="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

Some of the required imports for this to work are

import androidx.test.espresso.matcher.ViewMatchers.*
import org.hamcrest.Matcher
import org.hamcrest.Matchers.allOf
import org.hamcrest.Matchers.endsWith

Of course, you could also just add an android:id for the EditText and get it that way too...