Testy E2E (end-to-end) sprawdzają, czy cała aplikacja, od początku do końca działa tak, jak powinna. Słowem od końca A do końca B (end-to-end) – nie tylko jedna funkcja, nie tylko komponent. Cały przepływ, jakby aplikację przechodził sam użytkownik.
W projektach frontend i backend często są połączone cienką linią warstwy API. Chociaż logika po stronie przeglądarki nie miesza się z serwerową (czasem może, jeśli korzystamy z klasycznych frameworków MVC), to są one bezpośrednio połączone i testy e2e nabierają szczególnego znaczenia. Bez nich wchodzimy w świat „sprawdźmy, co się stanie po deployu”. A to nie brzmi jak dobry plan.
Spis treści:
- Automatyzacja E2E: nie tylko dla dużych zespołów
- Testy E2E: integracja z CI/CD
- Narzędzia do automatyzacji testów E2E w JavaScript
- Playwright – nowoczesne podejście do testów E2E
- Przykład automatyzacji testów E2E z Playwright
- Co daje automatyzacja testów E2E w praktyce?
- Jak podejść do automatyzacji testów?
Rusza kurs: automatyzacja testów JS + Playwright
Automatyzacja E2E: nie tylko dla dużych zespołów
Nie trzeba być dużą firmą z setką testerów, żeby skorzystać z E2E. Wręcz przeciwnie. Dobrze zaplanowane testy E2E mogą zastąpić żmudne klikanie i ręczne sprawdzanie scenariuszy. Oszczędzają czas, zmniejszają ryzyko.
Dzięki nim możemy wykryć błędy, które mogłyby umknąć podczas testów jednostkowych czy integracyjnych.
- Czas: Zamiast testować ręcznie, uruchamiamy skrypt. Działa za każdym razem tak samo. Automatyczne testy mogą być uruchamiane wielokrotnie bez dodatkowego nakładu pracy, a to redukuje potrzebę manualnego testowania.
- Zwiększona pewność: Testy przechodzą? Znaczy, że aplikacja działa przynajmniej w podstawowych scenariuszach. Automatyzacja pozwala na testowanie większej liczby scenariuszy, w tym tych trudnych do przeprowadzenia ręcznie.
- Wykrywanie regresji: Czy coś, co działało tydzień temu, nadal działa? Testy odpowiedzą. Automatyczne testy E2E umożliwiają natychmiastowe wykrycie regresji po wprowadzeniu nowych zmian w kodzie.
Dodatkowy plus dla zespołu developerskiego to odwaga do wprowadzania zmian. Gdy mamy testy, mniej boimy się refaktorów i aktualizacji.
Testy E2E: integracja z CI/CD
Włączenie testów E2E do procesu ciągłej integracji i dostarczania (CI/CD) pozwala na automatyczne uruchamianie testów przy każdej zmianie w kodzie. Jak to mówią “przezorny zawsze zabezpieczony”. Dzięki temu programiści mogą szybko znajdować problemy i wprowadzać poprawki na bieżąco, co znacząco wpływa na jakość finalnego produktu.
Narzędzia do automatyzacji testów E2E w JavaScript
Na rynku dostępnych jest wiele narzędzi wspierających automatyzację testów E2E w projektach JavaScript. Oto kilka z nich:
Playwright
Obecny najmocniejszy gracz na rynku. Narzędzie do automatyzacji testów aplikacji webowych, wspierające różne przeglądarki i platformy. Playwright pozwala na testowanie w Chromium, WebKit i Firefox, oferując jednolite API. Umożliwia testowanie lokalnie lub w środowiskach CI, zarówno w trybie headless, jak i z interfejsem graficznym. Obsługuje języki takie jak TypeScript, JavaScript, Python, .NET i Java.
Cypress
Framework do testowania aplikacji webowych, w ostatnim czasie mocno traci użytkowników na rzecz Playwrighta. Jego główne zalety to czytelna składnia oraz łatwa instalacja, po której od razu możemy pisać pierwsze testy i tym samym łatwo zweryfikować działanie aplikacji. Minusem od dawna były problemy z testowaniem, jeśli potrzebujemy w E2E odpytać również zewnętrzne API. Problem ten naprawił Playwright.
Selenium
Klasyk, bardzo popularne narzędzie do automatyzacji testów E2E, wspierające wiele przeglądarek. Selenium jest szeroko stosowane w branży i posiada dużą, wieloletnią społeczność użytkowników. Jest dostępne dla Javy, Pythona, C#, JavaScript i Ruby, co daje dużą elastyczność w wyborze języka programowania. Częściej jednak spotykane w połączeniu z Javą lub Pythonem niż JavaScriptem.
Protractor
Narzędzie stworzone z myślą o aplikacjach Angular, ale wspierające również inne frameworki. Protractor integruje się z Selenium i pozwala na testowanie aplikacji w rzeczywistych przeglądarkach.
Puppeteer
Biblioteka od Google umożliwiająca kontrolowanie przeglądarki Chrome za pomocą JavaScript. Puppeteer jest często wykorzystywany do testowania interfejsów użytkownika oraz generowania zrzutów ekranu. Narzędzie mniej popularne niż pozostałe w zestawieniu, ale ma swoich wiernych fanów.
Playwright – nowoczesne podejście do testów E2E
Playwright to stosunkowo nowe narzędzie, które zdobyło ogromną popularność wśród testerów i deweloperów. Jego główną zaletą jest wsparcie dla testowania w wielu przeglądarkach za pomocą jednolitego API. Dzięki temu możemy pisać testy, które będą działać w Chrome, Firefox i Safari bez konieczności wprowadzania zmian w kodzie testów. Playwright oferuje również funkcje takie jak automatyczne oczekiwanie na elementy, co redukuje ryzyko błędów związanych z asynchronicznością aplikacji. Umożliwia także przechwytywanie sieci, co pozwala na monitorowanie i modyfikowanie żądań oraz odpowiedzi podczas testów.
Przykład automatyzacji testów E2E z Playwright
Instalacja Playwright
Najpierw zainstalujmy Playwright w naszym projekcie (w środowisku node.js). Podczas instalacji zostaniemy zapytani o kilka ustawień, takich jak preferowany język (JavaScript lub TypeScript) oraz katalog na testy. Po zakończeniu instalacji Playwright będzie gotowy do użycia.
Instrukcję instalacji znajdziesz w oficjalnej dokumentacji: https://playwright.dev/docs/intro
Tworzenie pierwszego testu
Zacznijmy od bardzo prostego testu. Wyobraźmy sobie, że chcemy sprawdzić, czy strona logowania Facebooka:
- Otwiera się bez błędów (kod odpowiedzi HTTP to 200),
- Zawiera tekst „Zaloguj się do Facebooka”.
W katalogu z testami tworzymy nowy plik, np. facebookLogin.spec.js, i dodajemy następujący kod:
const { test, expect } = require('@playwright/test');
test('FB login page with text', async ({ page }) => {
const response = await page.goto('https://www.facebook.com/login');
expect(response.status()).toBe(200);
await expect(page).toHaveText('Log Into Facebook');
});
Jest to prosty test, ale daje dużą wartość: wiemy, że strona na pewno działa (zwraca status OK – 200) i że wygląda, jak powinna – oczekujemy otrzymania tekstu. Oczywiście, jeśli w ustawieniach będziesz mieć język polski tekst może być inny. A to jest dopiero początek.
Tworzenie testu e2e
Potrzebujemy coś bardziej skomplikowanego? Załóżmy pełny test ścieżki użytkownika. Załóżmy, że mamy aplikację do zapisywania się na wydarzenia. Typowa SPA – strona główna, formularz zapisu, potwierdzenie.
Sprawdźmy cały hipotetyczny flow (za pomocą frameworka Playwright):
const { test, expect } = require('@playwright/test');
test('Register for event', async ({ page }) => {
await page.goto('https://moje-wydarzenia.pl');
await expect(page).toHaveTitle('Wydarzenia');
await expect(page.locator('h1')).toHaveText('Najbliższe wydarzenia');
await page.click('text=Zapisz się');
await page.fill('input[name="name"]', 'Anna Kowalska');
await page.fill('input[name="email"]', '[email protected]');
await page.click('button[type="submit"]');
await expect(page.locator('.success-message')).toContainText('Dziękujemy za zapisanie się!');
});
Teraz test sprawdza nie tylko czy strona działa. Widzimy prostą, ale pełną interakcję: od wejścia na stronę po finalny efekt (wyświetlenie komunikatu o sukcesie). Warto takie testy mieć dla każdego ważnego scenariusza: logowanie, rejestracja, zakup, zmiana hasła.
Zapisz się na kurs: Automatyzacja testów: JavaScript i Playwright
Co daje automatyzacja testów E2E w praktyce?
Testy E2E pozwalają nam symulować bardzo różne zachowania użytkownika: klikanie, wpisywanie danych, przechodzenie między widokami. Można je uruchamiać lokalnie, w pipeline’ach CI/CD, na różnych środowiskach. I za każdym razem dadzą odpowiedź: aplikacja działa – tak albo nie.
Frontend
Wyobraźmy sobie, że zmieniamy sposób działania komponentu logowania. Mamy nowy formularz, inne API, ale użytkownik nadal powinien móc się logować wpisaniem login hasło. Dzięki E2E wiemy, że nie zepsuliśmy całego przepływu logowania, bo test przechodzi lub zwraca błędy od razu.
Backend
Jeśli backend nagle zacznie zwracać inne dane lub zmieni format odpowiedzi – test E2E, który przechodzi przez cały proces (np. dodawanie produktu do koszyka), się wysypie co znaczy, że zwróci błędy. Dzięki temu wiemy, że integracja wymaga poprawki – zanim zrobi to klient. W pipeline CI/CD możemy dodać krok z uruchomieniem testów E2E. Jeśli się nie powiodą, deploy zostaje zatrzymany i kod z błędem nie trafi do kodu źródłowego. To skuteczna kontrola jakości.
Jak podejść do automatyzacji testów?
Wiemy, że testy E2E mogą się wydawać kuszące – testujmy wszystko! Ale to szybka droga do frustracji. Lepiej podejść do nich strategicznie.
- Testuj krytyczne ścieżki: logowanie, rejestracja, dodanie do koszyka, płatność. To powinno być pokryte w pierwszej kolejności.
- Nie duplikuj testów jednostkowych: E2E nie służy do sprawdzania detali komponentów.
- Unikaj testów na danych zmiennych: test logujący się na konto z Facebooka może się wywalić przez CAPTCHA albo zmianę layoutu. Używaj testowych kont lub mocków.
- Buduj stabilne selektory: nie testuj po
div:nth-child(3), tylko po atrybutachdata-testid– wtedy testy nie zepsują się przy każdej zmianie w UI.
Kurs: automatyzacja testów JS + Playwright
Ten wpis był przydatny? Zobacz inne posty na naszym blogu ➜ Blog