Make UI Testing Simple With a Hot Sip of Kakao

Malvin Sutanto Software Engineer @Wantedly Visit Android & iOS Twitter/ Medium: @malvinsutanto

Android UI Testing

Consider This Simple Application

Espresso 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. val text = onView(withId(R.id.text)) 4. text.check(matches(withText("Hello World!"))) 5. onView(withId(R.id.text_input)).perform(ViewActions.typeText("My new string")) 6. onView(withId(R.id.fab)).perform(ViewActions.click()) 7. text.check(matches(withText("My new string"))) 8. }

Espresso ● Verbose ○ Lots of boilerplate codes ○ Cognitive burden ● Complex view layouts ○ Recycler views... ● Readability ○ View visibility, descendants, etc ● Difficult to maintain

Espresso 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. val text = onView(withId(R.id.text)) 4. text.check(matches(withText("Hello World!"))) 5. onView(withId(R.id.text_input)).perform(ViewActions.typeText("My new string")) 6. onView(withId(R.id.fab)).perform(ViewActions.click()) 7. text.check(matches(withText("My new string"))) 8. }

Espresso 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. )) 4. text.check(matches(withText("Hello World!"))) 5. onView(withId(R.id.text_input)).perform(ViewActions.typeText("My new string")) 6. onView(withId(R.id.fab)).perform(ViewActions.click()) 7. text.check(matches(withText("My new string"))) 8. }

Espresso 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. 4. text matchesText("Hello World!"))) 5. text_input typeText("My new string")) 6. fab click()) 7. text.matchesText("My new string"))) 8. }

Kakao

Page Object Pattern

Page Object Pattern ● Page: ○ A collection of logical UI elements. ● Has references to: ○ How to get hold of views. ○ Functions to manipulate that views. ● In Android ○ Can represent an Activity or a Fragment. ○ Or can be smaller... *https://martinfowler.com/bliki/PageObject.html

Kakao https://github.com/agoda-com/Kakao ● DSL for Espresso in Kotlin ● Implements Page Object pattern ○ Screen ● Increase readability and reusability ● Extendability ● Nice and simple androidTestImplementation 'com.agoda.kakao:kakao:2.0.0'

Screen 1. class FormScreen : Screen() { 2. val phone = KView { withId(R.id.phone) } 3. val email = KEditText { 4. withId(R.id.email) 5. withText(R.string.email) 6. } 7. }

KViews 1. class FormScreen : Screen() { 2. val phone = KView { withId(R.id.phone) } 3. val email = KEditText { 4. withId(R.id.email) 5. withText(R.string.email) 6. } 7. }

KViews 1. class FormScreen : Screen() { 2. val phone = KView { withId(R.id.phone) } 3. val email = KEditText { 4. withId(R.id.email) 5. withText(R.string.email) 6. } 7. }

Our Simple App

Screen 1. class AppScreen : Screen() { 2. val text = KTextView { withId(R.id.text) } 3. val textInput = KEditText { withId(R.id.text_input) } 4. val fab = KButton { withId(R.id.fab) } 5. }

Screen 1. class AppScreen : Screen() { 2. val text = KTextView { withId(R.id.text) } 3. val textInput = KEditText { withId(R.id.text_input) } 4. val fab = KButton { withId(R.id.fab) } 5. }

Screen 1. class AppScreen : Screen() { 2. val text = KTextView { withId(R.id.text) } 3. val textInput = KEditText { withId(R.id.text_input) } 4. val fab = KButton { withId(R.id.fab) } 5. }

Screen 1. class AppScreen : Screen() { 2. val text = KTextView { withId(R.id.text) } 3. val textInput = KEditText { withId(R.id.text_input) } 4. val fab = KButton { withId(R.id.fab) } 5. }

Kakao 1. @Test 2. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 3. onScreen { 4. text { hasText("Hello World!") } 5. textInput { typeText("My new string") } 6. fab { click() } 7. text { hasText("My new string") } 8. } 9. }

Kakao 1. @Test 2. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 3. onScreen { 4. text { hasText("Hello World!") } 5. textInput { typeText("My new string") } 6. fab { click() } 7. text { hasText("My new string") } 8. } 9. }

Kakao 1. @Test 2. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 3. onScreen { 4. text { hasText("Hello World!") } 5. textInput { typeText("My new string") } 6. fab { click() } 7. text { hasText("My new string") } 8. } 9. }

Kakao 1. @Test 2. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 3. onScreen { 4. text { hasText("Hello World!") } 5. textInput { typeText("My new string") } 6. fab { click() } 7. text { hasText("My new string") } 8. } 9. }

Kakao 1. @Test 2. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 3. onScreen { 4. text { hasText("Hello World!") } 5. textInput { typeText("My new string") } 6. fab { click() } 7. text { hasText("My new string") } 8. } 9. }

Let’s Compare... 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. val text = onView(withId(R.id.text)) 4. text.check(matches(withText("Hello World!"))) 5. onView(withId(R.id.text_input)).perform(ViewActions.typeText("My new string")) 6. onView(withId(R.id.fab)).perform(ViewActions.click()) 7. text.check(matches(withText("My new string"))) 8. } 9. 10. @Test 11. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 12. onScreen { 13. text { hasText("Hello World!") } 14. textInput { typeText("My new string") } 15. fab { click() } 16. text { hasText("My new string") } 17. } 18. }

Let’s Compare... 1. @Test 2. fun test_WhenFabIsPressed_ThenTextIsChanged() { 3. 4. text matchesText("Hello World!"))) 5. text_input typeText("My new string")) 6. fab click()) 7. text.matchesText("My new string"))) 8. } 9. 10. @Test 11. fun test_Kakao_WhenFabIsPressed_ThenTextIsChanged() { 12. onScreen { 13. text { hasText("Hello World!") } 14. textInput { typeText("My new string") } 15. fab { click() } 16. text { hasText("My new string") } 17. } 18. }

More Examples

RecyclerView 1. class Item(parent: Matcher) : KRecyclerItem(parent) { 2. val title: KTextView = KTextView(parent) { withId(R.id.title) } 3. val subtitle: KTextView = KTextView(parent) { withId(R.id.subtitle) } 4. } 1. val recycler: KRecyclerView = KRecyclerView({ 2. withId(R.id.recycler_view) 3. }, itemTypeBuilder = { 4. itemType(::Item) 5. }) 1. onScreen { 2. recycler { 3. firstChild { 4. isVisible() 5. title { hasText("Title 1") } 6. } 7. } 8. }

Provide Your Own Matcher 1. val textInput = KEditText { 2. withId(R.id.text_input) 3. withMatcher(hasImeAction(EditorInfo.IME_ACTION_SEND)) 4. } 1. /** 2. * Returns a matcher that matches views that support input methods (e.g. EditText) and have the 3. * specified IME action set in its {@link EditorInfo}. 4. * 5. * @param imeAction the IME action to match 6. */ 7. public static Matcher hasImeAction(int imeAction) { 8. return hasImeAction(is(imeAction)); 9. }

Summary

Kakao ● Simple and easy to understand UI tests ● Make use of Espresso API ○ Reuse your existing matchers and assertions! ● Less code to write, more tests!

Thank You