Jetpack Compose BottomSheetDialog testTag Appium

Question

I have a jetpack compose bottomSheetDialog which looks like this(below) and when I use testTag method it is not showing up in appium but when I set contentDescription with Modifier.semantics { contentDescription = "" } then it is showing fine in appium inspector. What might be the issue ? is it the problem with BottomSheet component, and all is working perfectly fine with both testTag and contentDescription

@Composable
fun CustomBottomSheetDialog(
    onDismissRequest: () -> Unit,
    message: String,
    title: String = "",
    titleColor: Color = Color.Unspecified,
    @SuppressLint("ComposableLambdaParameterNaming")
    additionalContent: @Composable ColumnScope.() -> Unit = {},
) {
    BottomSheetDialog(onDismissRequest) {
        Column(Modifier.padding(20.dp)) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    text = title,
                    modifier = Modifier
                        .weight(1f)
                        .testTag("titleTextView"),
                    fontWeight = FontWeight.Bold,
                    fontSize = 20.dp.asSp,
                    textAlign = TextAlign.Start,
                    color = titleColor,
                )
                Image(
                    painter = painterResource(id = R.drawable.ic_close_cross_grey),
                    contentDescription = null,
                    Modifier
                        .size(24.dp)
                        .clickable(onClick = onDismissRequest, role = Role.Button),
                )
            }

            Text(
                text = message,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp)
                    .idTestTag(R.id.contentTextView),
                fontSize = 14.dp.asSp,
            )

            additionalContent()
        }
    }
}

I have tried setting testTag in different ways but non worked but contentDescription is showing just fine

Answer 1

As per the documentation Appium inspector won't recognize the test tag set with the testTag modifier in Jetpack Compose. To make it work, you can try adding

Modifier.semantics { testTagsAsResourceId = true }

at the root level of your screen.

    Scaffold(
       modifier = Modifier.semantics { testTagsAsResourceId = true },
       bottomBar = {},
       scaffoldState = rememberScaffoldState(),
    ) {
       NavigationHost(navHostController = appState.navController,)
    }

You can set it directly to the Scaffold or cover the Scaffold with a Box like below,

    Box(modifier = Modifier.semantics { testTagsAsResourceId = true }) {
        Scaffold(
           bottomBar = {},
           scaffoldState = rememberScaffoldState(),
        ) {
           NavigationHost(navHostController = appState.navController,)
        }
    }