Integracja z CI
Uruchamiać testy E2E w ramach ciągłej integracji
Integracja z CI to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.
Dlaczego uruchamiać testy E2E w CI
Testy E2E są najbardziej wartościowe, gdy uruchamiają się automatycznie przy każdym wypchnięciu zmian lub utworzeniu pull requestu. Continuous Integration (CI) wykrywa regresje, zanim zmiany zostaną scalone, dzięki czemu niedziałający proces logowania nigdy nie trafia niezauważony na produkcję.
Czego CI potrzebuje do uruchamiania testów E2E
Zadanie CI musi: zainstalować zależności, zainstalować przeglądarki Playwright, zbudować aplikację Angular lub ją uruchomić, a następnie uruchomić testy w trybie bez interfejsu graficznego. Maszyny CI nie mają wyświetlacza, dlatego testy domyślnie działają w trybie headless.
Instalowanie przeglądarek w CI
Przeglądarki nie są przechowywane w repozytorium. Zainstaluj je w potoku za pomocą instalatora Playwright, razem z zależnościami systemu operacyjnego.
npm ci
npx playwright install --with-depsPozwolenie Playwright na uruchamianie aplikacji
Konfiguracja webServer informuje Playwright, aby uruchomił aplikację przed testami i wyłączył ją po ich zakończeniu. W CI ustaw reuseExistingServer: false, aby zawsze uruchamiany był nowy serwer.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};Workflow GitHub Actions
Typowy workflow pobiera kod, konfiguruje Node, instaluje zależności i przeglądarki, a następnie uruchamia zestaw testów.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testFlagi headless i CI
Playwright automatycznie wykrywa CI za pomocą zmiennej środowiskowej CI i dostosowuje działanie: ponawia nieudane testy, zabrania używania test.only i ostrożnie korzysta z większej liczby workerów. Można też jawnie ustawić liczbę ponowień.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Publikowanie raportu HTML
Playwright generuje raport HTML. Prześlij go jako artefakt CI, aby po zakończeniu działania można było przeanalizować błędy, w tym ślady i zrzuty ekranu.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Rejestrowanie śladów po niepowodzeniu
Skonfiguruj ślady tak, aby były rejestrowane tylko przy pierwszym ponowieniu. Dzięki temu przebiegi pozostają szybkie, a jednocześnie otrzymujesz pełne odtworzenie każdego niepowodzenia na potrzeby debugowania.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Dzielenie testów dla większej szybkości
Duże zestawy testów można podzielić między równoległe maszyny za pomocą --shard. Każde zadanie CI uruchamia swoją część, skracając całkowity czas wykonania.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Buforowanie przyspieszające CI
Buforuj node_modules i pliki binarne przeglądarek Playwright między kolejnymi uruchomieniami, aby instalowanie nie dominowało czasu kompilacji. Większość dostawców CI oferuje akcję buforowania z kluczem opartym na pliku blokady.
Prawidłowe kończenie nieudanego builda
Playwright kończy działanie kodem różnym od zera, gdy dowolny test zakończy się niepowodzeniem. Dzięki temu CI oznacza zadanie jako nieudane i blokuje scalanie. Nie ukrywaj tego kodu wyjścia za pomocą || true, bo niedziałające testy przejdą wtedy po cichu.
Szybkie sprawdzenie
Co instaluje przeglądarki w CI?
Podsumowanie
Uruchamiaj testy E2E przy każdym wypchnięciu zmian, instalując zależności i przeglądarki (playwright install --with-deps), pozwalając webServer uruchomić aplikację oraz wykonując testy w trybie headless z ponowieniami uwzględniającymi CI. Przesyłaj raport HTML i ślady jako artefakty, dziel testy dla większej szybkości i pozwól, aby kod wyjścia różny od zera blokował nieprawidłowe scalanie.
Ucz się HTML 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
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Integracja z CI” jest bezpłatna?
Tak — pełny tekst „Integracja z CI” 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 „Integracja z CI”?
Uruchamiać testy E2E w ramach ciągłej integracji Ć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 4 z 4.
Ile czasu zajmuje lekcja „Integracja z CI”?
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.