Semantics e tag di test
Renda l'interfaccia testabile e accessibile.
Semantics e tag di test è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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. 🌳
Domande Frequenti
La lezione «Semantics e tag di test» è gratuita?
Sì — il testo completo di «Semantics e tag di test» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Semantics e tag di test»?
Renda l'interfaccia testabile e accessibile. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Semantics e tag di test»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- createComposeRule e finder
- Asserzioni ed esecuzione di azioni
- Semantics e tag di test
- Testare ViewModel e Flow