Jetpack Compose Academy · Lekcja

Semantyka i tagi testowe

Spraw, aby interfejs można było testować i udostępniał ułatwienia dostępu

Lekcja 3 z 413 kroki

Semantyka i tagi testowe to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Drzewo semantyki

Compose tworzy obok drzewa wizualnego także drzewo semantyki. Opisuje ono znaczenie poszczególnych elementów i jest dokładnie tym, co odczytują zarówno testy, jak i czytniki ekranu.

Dlaczego semantyka ma znaczenie

Jeśli węzeł nie niesie żadnego znaczenia w drzewie, wyszukiwarki nie mogą go znaleźć, a TalkBack nie może go odczytać. Dobra semantyka sprawia, że aplikacja jest jednocześnie łatwa do testowania i dostępna. ♿

contentDescription nadaje znaczenie

Ikony i obrazy nie zawierają tekstu, dlatego należy nadać im contentDescription. Wartość ta trafia do drzewa semantyki, dzięki czemu testy mogą je znaleźć, a czytniki ekranu je opisać.

Icon(Icons.Default.Add,
    contentDescription = "Add item")

Gdy tekst nie jest unikatowy

Czasami wiele węzłów ma ten sam tekst i wyszukiwarka tekstu nie potrafi ich rozróżnić. Potrzebny jest stabilny identyfikator, który nie zależy od widocznej etykiety.

Wprowadzenie do testTag

testTag to niewidoczny identyfikator przypisywany za pomocą Modifier. Nadaje on węzłowi unikatową nazwę używaną w testach, nie zmieniając jego wyglądu.

Box(Modifier.testTag("avatar"))

Wyszukiwanie według znacznika

Po dodaniu znacznika można znaleźć węzeł za pomocą onNodeWithTag. To bardzo niezawodne rozwiązanie, nawet gdy tekst zmienia się w zależności od języka lub stanu.

composeTestRule.onNodeWithTag("avatar")
    .assertIsDisplayed()

Szybkie sprawdzenie

Kilka przycisków ma etykietę Done, więc wyszukiwarka tekstu jest niejednoznaczna. Co nada jednemu przyciskowi unikatowy, niewidoczny identyfikator używany w testach?

Odpowiedz w interaktywnej lekcji

Znaczniki a opisy

Należy je rozdzielać: contentDescription służy rzeczywistym użytkownikom, natomiast testTag istnieje wyłącznie na potrzeby testów. Nie należy używać jednego elementu do zadań drugiego.

Modyfikator semantics

Pełną kontrolę zapewnia modyfikator semantics, który pozwala ustawiać niestandardowe właściwości, na przykład oznaczyć węzeł jako nagłówek dla narzędzi ułatwień dostępu.

Modifier.semantics { heading() }

Scalanie elementów potomnych

Compose może scalić element nadrzędny i jego elementy potomne w jeden węzeł za pomocą mergeDescendants. Dzięki temu cały wiersz jest odczytywany jako jedna, przyjazna jednostka.

Modifier.semantics(mergeDescendants = true) {}

Wyświetlanie drzewa w celu debugowania

Nie mogą Państwo znaleźć węzła? Należy wywołać printToLog na elemencie głównym, aby zrzucić pełne drzewo semantyki, a następnie sprawdzić, co dokładnie jest dostępne do dopasowania.

rule.onRoot().printToLog("TREE")

Projektowanie z myślą o testowalności

Dodawanie jasnych opisów i znaczników już podczas tworzenia interfejsu sprawia, że testy niemal piszą się same. Dostępne i łatwe do testowania aplikacje powstają dzięki tym samym nawykom.

Podsumowanie: semantyka i znaczniki

Drzewo semantyki wspiera zarówno testowanie, jak i dostępność. Należy używać contentDescription dla użytkowników, a testTag dla testów, aby interfejs był łatwy do weryfikowania. 🌳

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Semantyka i tagi testowe” jest bezpłatna?

Tak — pełny tekst „Semantyka i tagi testowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Semantyka i tagi testowe”?

Spraw, aby interfejs można było testować i udostępniał ułatwienia dostępu Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Semantyka i tagi testowe”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Jetpack Compose Academy