Compose Testing Fundamentals 02: Node Finders and Actions 🔍

Introduction

Welcome to the second blog in our Compose Testing Fundamentals series! In this post, we’ll dive into the various node finders and actions available in Jetpack Compose testing. These tools are essential for locating and interacting with UI elements in your Compose tests.

Node Finders 🧭

Node finders help you locate specific UI elements in your Compose hierarchy. Let’s explore the different types of node finders and how to use them with examples.

1. onNode(matcher)

The onNode function finds a single node that matches the given matcher. It's useful when you want to perform actions or assertions on a specific element.

@Test
fun testOnNode() {
    composeTestRule.setContent {
        Text("Hello, Compose!")
    }

    composeTestRule.onNode(hasText("Hello, Compose!")).assertIsDisplayed()
}

2. onNodeWithContentDescription

This finder locates a node with the specified content description. It’s particularly useful for accessibility testing.

@Test
fun testOnNodeWithContentDescription() {
    composeTestRule.setContent {
        Icon(Icons.Default.Home, contentDescription = "Home icon")
    }

    composeTestRule.onNodeWithContentDescription("Home icon").assertIsDisplayed()
}

3. onNodeWithTag

Finds a node with the specified test tag. Test tags are useful for uniquely identifying elements in your UI.

@Test
fun testOnNodeWithTag() {
    composeTestRule.setContent {
        Text("Hello, Compose!", modifier = Modifier.testTag("greetingText"))
    }

    composeTestRule.onNodeWithTag("greetingText").assertIsDisplayed()
}

4. onNodeWithText

Locates a node with the specified text. It’s a straightforward way to find text elements in your UI.

@Test
fun testOnNodeWithText() {
    composeTestRule.setContent {
        Text("Hello, Compose!")
    }

    composeTestRule.onNodeWithText("Hello, Compose!").assertIsDisplayed()
}

5. onRoot

Finds the root node of the Compose hierarchy. This is useful when you want to perform actions or assertions on the entire UI.

@Test
fun testOnRoot() {
    composeTestRule.setContent {
        Column {
            Text("Hello, Compose!")
        }
    }

    composeTestRule.onRoot().printToLog("ROOT_LOG")
}

Node Actions 🖱️

Node actions allow you to interact with the UI elements found using node finders. Let’s look at some common actions and their usage with examples.

1. performClick

Simulates a click on the node.

@Test
fun testPerformClick() {
    var clicked = false
    composeTestRule.setContent {
        Button(onClick = { clicked = true }) {
            Text("Click Me")
        }
    }

    composeTestRule.onNodeWithText("Click Me").performClick()
    assert(clicked)
}

2. performTextInput

Inputs text into a node.

@Test
fun testPerformTextInput() {
    composeTestRule.setContent {
        var text by remember { mutableStateOf("") }
        TextField(value = text, onValueChange = { text = it }, modifier = Modifier.testTag("textField"))
    }

    composeTestRule.onNodeWithTag("textField").performTextInput("Hello Compose")
    composeTestRule.onNodeWithText("Hello Compose").assertIsDisplayed()
}

3. performScrollTo

Scrolls to a node.

@Test
fun testPerformScrollTo() {
    composeTestRule.setContent {
        LazyColumn {
            items(50) {
                Text("Item #$it", modifier = Modifier.testTag("item_$it"))
            }
        }
    }

    composeTestRule.onNodeWithTag("item_49").performScrollTo()
    composeTestRule.onNodeWithTag("item_49").assertIsDisplayed()
}

4. performTextReplacement

Replaces the existing text in a node.

@Test
fun testPerformTextReplacement() {
    composeTestRule.setContent {
        var text by remember { mutableStateOf("Initial Text") }
        TextField(value = text, onValueChange = { text = it }, modifier = Modifier.testTag("textField"))
    }

    composeTestRule.onNodeWithTag("textField").performTextReplacement("New Text")
    composeTestRule.onNodeWithText("New Text").assertIsDisplayed()
}

Next Steps: Assertions and Matchers ✅

Having explored node finders and actions, the next step is to learn how to verify the UI state in your Compose tests. In our upcoming blog, Compose Testing Fundamentals 03: Assertions and Matchers, we delve into the various assertions and matchers that are crucial for validating your UI components. This guide will help you ensure that your UI behaves as expected through comprehensive examples and detailed explanations.

Stay tuned for more insights on effective Compose testing!

Read the next blog: Compose Testing Fundamentals 03: Assertions and Matchers ✅

Follow Us for More Insights 🌟

Stay updated with the latest tips and best practices for QA engineers in Android UI testing by following us on Medium. For more resources and tools to enhance your testing skills, visit our website EspressoLab.ai.

Follow us on Medium: EspressoLab Medium

Thank you for reading! 🚀