Semantik und Test-Tags
Machen Sie die UI testbar und barrierefrei.
Semantik und Test-Tags ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
The Semantics Tree
Compose builds a semantics tree next to the visual one. It describes what each element means, and it is exactly what both tests and screen readers read.
Why Semantics Matter
If a node carries no meaning in the tree, finders cannot reach it and TalkBack cannot announce it. Good semantics make your app both testable and accessible. ♿
Content Descriptions Add Meaning
Icons and images carry no text, so give them a contentDescription. It feeds the semantics tree, letting tests find them and screen readers describe them.
Icon(Icons.Default.Add,
contentDescription = "Add item")When Text Is Not Unique
Sometimes many nodes share the same text and a text finder gets confused. You need a stable handle that does not depend on the visible label.
Introducing testTag
A testTag is an invisible identifier you attach with a Modifier. It gives a node a unique name for tests without affecting how it looks.
Box(Modifier.testTag("avatar"))Finding by Tag
Once tagged, locate the node with onNodeWithTag. This is rock-solid even when text changes across languages or states.
composeTestRule.onNodeWithTag("avatar")
.assertIsDisplayed()Quick Check
Several buttons share the label Done, so a text finder is ambiguous. What gives one button a unique, invisible handle for tests?
Tags vs Descriptions
Keep them separate: contentDescription serves real users, while testTag exists only for tests. Do not overload one to do the other's job.
The semantics Modifier
For full control, the semantics modifier lets you set custom properties, like marking a node as a heading for accessibility tools.
Modifier.semantics { heading() }Merging Descendants
Compose can merge a parent and its children into one node with mergeDescendants. That makes a whole row announce as a single, friendly unit.
Modifier.semantics(mergeDescendants = true) {}Print the Tree to Debug
Stuck on a missing node? Call printToLog on the root to dump the full semantics tree, then read exactly what is available to match.
rule.onRoot().printToLog("TREE")Design for Testability
Adding clear descriptions and tags as you build means your tests almost write themselves. Accessible apps and testable apps grow from the same habits.
Recap: Semantics & Tags
The semantics tree powers both testing and accessibility. Use contentDescription for users and testTag for tests to keep your UI easy to verify. 🌳
Häufig gestellte Fragen
Ist die Lektion „Semantik und Test-Tags“ kostenlos?
Ja — der vollständige Text von „Semantik und Test-Tags“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Semantik und Test-Tags“?
Machen Sie die UI testbar und barrierefrei. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Semantik und Test-Tags“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- createComposeRule und Finder
- Assertions und Aktionen ausführen
- Semantik und Test-Tags
- ViewModels und Flows testen