Angular Academy · Lekcja

Selektory i asercje

Wybierać elementy i sprawdzać stan

Selektory i asercje to bezpłatna lekcja Angular 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 Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dobre selektory zapewniają stabilne testy

Sposób znajdowania elementów wpływa na odporność testów. Selektory powiązane z klasami CSS lub strukturą DOM psują się przy każdej zmianie projektu. Semantyczne locatory widoczne dla użytkownika przetrwają refaktoryzację, ponieważ odzwierciedlają to, co użytkownicy rzeczywiście postrzegają.

getByRole: preferowany locator

getByRole znajduje elementy na podstawie ich roli dostępności i dostępnej nazwy. Jest najbardziej odpornym locatorem, a dodatkowo pełni funkcję sprawdzenia dostępności.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel i getByPlaceholder

W przypadku pól formularzy wyszukuj je za pomocą powiązanej etykiety lub placeholdera — dokładnie tak, jak identyfikuje je użytkownik.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText i getByTestId

getByText dopasowuje widoczny tekst. Gdy nie istnieje semantyczny sposób odwołania, użyj awaryjnie getByTestId, który odczytuje celowo dodany atrybut data-testid.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Unikaj kruchych selektorów CSS

Nadal możesz używać page.locator('.css-selector'), ale traktuj to jako ostateczność. Nazwy klas i zagnieżdżenie często się zmieniają, natomiast role i etykiety — rzadko.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Asercje web-first

Element expect Playwrighta używany z locatorami działa zgodnie z zasadą web-first: automatycznie ponawia próbę, aż warunek zostanie spełniony lub upłynie limit czasu. To klucz do asercji odpornych na niestabilność.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Typowe matchery asercji

Matcher opisuje oczekiwany stan elementu lub strony.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Sprawdzanie liczby elementów na listach

Aby sprawdzić powtarzające się elementy, znajdź je wszystkie i sprawdź ich liczbę. Locator dopasowuje każdy element, a toHaveCount ponawia próbę, aż wynik się ustabilizuje.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Asercje negatywne

Użyj .not, aby sprawdzić, że czegoś nie ma lub że coś jest ukryte, na przykład po usunięciu elementu.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Filtrowanie i łańcuchowanie locatorów

Uściślij locator za pomocą filter lub połącz go, aby ograniczyć wyszukiwanie do elementu nadrzędnego. Dzięki temu asercje pozostają precyzyjne.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Dlaczego asercje web-first są lepsze od ręcznego odpytywania

Asercje web-first ponawiają całe wyrażenie, a nie tylko ponownie odczytują nieaktualny zrzut stanu. Dlatego await expect(loc).toHaveText('Done') czeka, aż pojawi się tekst, eliminując wyścigi charakterystyczne dla ręcznie pisanych mechanizmów oczekiwania.

Szybkie sprawdzenie

Wybierz najbardziej odporny locator.

Podsumowanie

Preferuj semantyczne locatory: getByRole, getByLabel i getByText, a getByTestId traktuj jako rozwiązanie awaryjne. Stosuj matchery web-first (toBeVisible, toHaveText, toHaveCount, toHaveURL), które automatycznie ponawiają próby, oraz używaj .not i filter, aby zachować precyzję.

Często zadawane pytania

Czy lekcja „Selektory i asercje” jest bezpłatna?

Tak — pełny tekst „Selektory i asercje” 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 Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Selektory i asercje”?

Wybierać elementy i sprawdzać stan Ćwiczysz Angular 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ąć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular 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 „Selektory i asercje”?

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 Angular Academy?

Tak. Każda lekcja Angular 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 Angular Academy