Angular Academy · Lekcja

Wprowadzenie do testów E2E

Zrozumieć rolę testów end-to-end

Wprowadzenie do testów E2E to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.

Znaczenie testowania end-to-end

Testy end-to-end (E2E) sprawdzają aplikację tak, jak korzysta z niej rzeczywisty użytkownik: uruchamiają ją w prawdziwej przeglądarce, przechodzą między stronami, klikają przyciski, wpisują dane do formularzy i sprawdzają widoczne elementy. Weryfikują działanie całego stosu razem, a nie tylko pojedynczej jednostki.

Piramida testów

Zdrowy zestaw testów zawiera wiele szybkich testów jednostkowych, mniej testów integracyjnych oraz niewielki zestaw powolnych, ale bardzo wartościowych testów E2E. Testy E2E znajdują się na szczycie piramidy: zapewniają największe pokrycie w przeliczeniu na test, ale są też najdroższe w uruchamianiu i utrzymaniu.

Jednostkowe: funkcja/komponent w izolacji
Integracyjne: kilka jednostek współpracujących ze sobą
E2E: działająca aplikacja od początku do końca

Co wykrywają testy E2E, czego nie wykrywają testy jednostkowe

Testy E2E wykrywają problemy widoczne dopiero wtedy, gdy rzeczywiste elementy współpracują ze sobą: błędy routingu, nieprawidłową integrację z API, brakujący DOM po wdrożeniu, CSS ukrywający przycisk lub pętlę przekierowań uwierzytelniania. Testy jednostkowe z zamockowanymi zależnościami mogą przechodzić pomyślnie, podczas gdy rzeczywista aplikacja jest zepsuta.

Historia Angulara i testów E2E

Starsze wersje Angulara dostarczały Protractor do testów E2E. Protractor został uznany za przestarzały i usunięty z nowych projektów. Obecnie Angular CLI pozwala wybrać zewnętrzny runner testów E2E; najpopularniejsze rozwiązania to Playwright i Cypress.

Dlaczego Playwright

Playwright to nowoczesny, szybki framework E2E firmy Microsoft. Obsługuje Chromium, Firefox i WebKit, automatycznie czeka na elementy, izoluje testy za pomocą nowych kontekstów przeglądarki i oferuje doskonałe narzędzia do debugowania. Ten kurs korzysta z Playwright.

Dodawanie Playwright do Angulara

Możesz utworzyć konfigurację Playwright za pomocą jego własnego instalatora. Utworzy on plik playwright.config.ts oraz folder z przykładowym testem.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Budowa testu E2E

Test E2E uruchamia aplikację, wykonuje działania użytkownika i sprawdza stronę. Przebieg wygląda następująco: przygotowanie (nawigacja), działanie (interakcja), asercja (weryfikacja widocznego wyniku).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

Testy E2E działają na prawdziwym serwerze

Testy E2E wymagają faktycznie uruchomionej aplikacji Angular. Zwykle konfiguracja uruchamia ng serve (lub udostępnia kompilację produkcyjną) i wskazuje testom adres URL za pomocą baseURL oraz wpisu webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Zestawy E2E powinny być małe i skupione na krytycznych ścieżkach

Ponieważ testy E2E są powolne i mogą być niestabilne, obejmuj nimi tylko krytyczne ścieżki użytkownika: logowanie, finalizację zakupu i główną ścieżkę pozytywną. Szczegółowe przypadki brzegowe przenieś do testów jednostkowych i integracyjnych, gdzie wykonują się szybciej i bardziej niezawodnie.

Niestabilność i determinizm

Największym wyzwaniem w testach E2E jest niestabilność — testy kończące się niepowodzeniem tylko czasami. Unikaj stałych opóźnień sleep; polegaj na asercjach Playwright z automatycznym oczekiwaniem. Kontroluj dane testowe, aby każde uruchomienie zaczynało się od znanego stanu.

E2E a testowanie komponentów

Testy komponentów Angulara (TestBed) sprawdzają komponent w środowisku symulowanym. Testy E2E sprawdzają wdrożoną aplikację w prawdziwej przeglądarce. Uzupełniają się wzajemnie: używaj TestBed do szybkiego sprawdzania logiki/DOM, a E2E, aby zyskać pewność, że cały produkt działa.

Szybkie sprawdzenie

Co odróżnia testy E2E od testów jednostkowych?

Podsumowanie

Testy E2E uruchamiają całą aplikację w prawdziwej przeglądarce, aby wykrywać błędy integracji i routingu, których nie wykrywają testy jednostkowe. Znajdują się na szczycie piramidy testów: jest ich niewiele, są powolne, ale bardzo wartościowe. Projekty Angulara korzystają obecnie z runnerów takich jak Playwright, które uruchamiają serwer i obsługują krytyczne ścieżki użytkownika.

Często zadawane pytania

Czy lekcja „Wprowadzenie do testów E2E” jest bezpłatna?

Tak — pełny tekst „Wprowadzenie do testów E2E” 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 „Wprowadzenie do testów E2E”?

Zrozumieć rolę testów end-to-end Ć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 1 z 4.

Ile czasu zajmuje lekcja „Wprowadzenie do testów E2E”?

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