Jetpack Compose UI Test with Material3 DatePickerDialog

Question

My question is pretty simple. How do I perform any selections on a DatePickerDialog in Jetpack compose's UI Tests?

Answer 1

The M3 DatePickerDialog is built using compose unlike the M2 DatePickerDialog, so in order to test it, you need to know what the nodes look like. While the DatePickerDialog is active, you'll have multiple roots, so in order to get the node tree for the DatePickerDialog, you'll want to use composeTestRule.onAllNodes(isRoot()).get(1).printToLog("T:") to print out your node tree and examine how the DatePickerDialog works.

The dates within the date picker can be selected using onNodeWithText, though the actual text to match isn't just the day of the month as it appears in the dialog. Instead, you'll need to match dates written out such as 'Wednesday, November 15, 2023'. This is easy enough to do using DateTimeFormatter using the pattern EEEE, MMMM d, yyyy, but be aware that the current date is also prefixed with 'Today' (Today, Thursday, November 16, 2023)

Other controls within the DatePickerDialog also respond to onNodeWithText such as the OK/Cancel buttons, or onNodeWithContentDescription, such as navigating the months or setting a year.

Answer 2

For any Jetpack Compose widget that you're unfamiliar with you can print the node structure to logcat with the following command:

composeTestRule.onRoot().printToLog("ARBITRARY_LOG_TAG")

From that you should get something like this in logcat after running the test:

| Text = '[Tuesday, January 16, 2024]'
| Role = 'Button'
| Focused = 'false'
| Selected = 'false'
| Actions = [OnClick, RequestFocus]
| MergeDescendants = 'true'
|-Node #142 at (l=411.0, t=841.0, r=537.0, b=967.0)px
| Text = '[Today, Wednesday, January 17, 2024]'
| Role = 'Button'
| Focused = 'false'
| Selected = 'false'
| Actions = [OnClick, RequestFocus]
| MergeDescendants = 'true'
|-Node #145 at (l=537.0, t=841.0, r=663.0, b=967.0)px
| Text = '[Thursday, January 18, 2024]'
| Role = 'Button'
| Focused = 'false'
| Selected = 'false'
| Actions = [OnClick, RequestFocus]
| MergeDescendants = 'true'
|-Node #148 at (l=663.0, t=841.0, r=789.0, b=967.0)px

You can then interact with those DatePicker elements by clicking on them, i.e.

composeTestRule.onNodeWithText("Tuesday, January 16, 2024").performClick()