AI-Powered testy integracyjne Frontendu

O kursie

Serwer zwraca 500. Żądanie utyka na trzy sekundy. Lista produktów przychodzi pusta. Na żywym backendzie każdą z tych sytuacji trzeba wyprosić, wybłagać albo poczekać, aż zdarzy się sama. Przez najbliższy tydzień odtworzysz je w teście na żądanie, bo to Ty zdecydujesz, co dzieje się między przeglądarką a API.

Zbudujemy od zera framework testów integracyjnych frontendu na mockach, w Playwright, na przykładzie aplikacji e-commerce. Zamiast polegać na bieżącym stanie backendu, przejmujesz kontrolę nad odpowiedziami, które widzi frontend. Dzięki temu testy są powtarzalne, a Ty możesz odtworzyć scenariusze, których na żywym backendzie nie wywołasz na życzenie.

Jest w tym trochę kina. Kiedy sceny nie da się nakręcić z prawdziwym aktorem, na plan wchodzi dubler. Backend bywa właśnie takim aktorem, którego nie zawsze możemy albo chcemy wpuścić przed kamerę, a mock jest dublerem, który zagra tę scenę za niego. Reżyserem dalej zostajesz Ty.

Popracujemy blisko kodu, bez ogólników. Będzie przechwytywanie ruchu przez page.route(), podstawianie własnych odpowiedzi przez route.fulfill(), zrywanie żądań przez route.abort() oraz modyfikowanie prawdziwej odpowiedzi pobranej przez route.fetch(). Przechodzimy od statycznych plików JSON przez dane generowane w kodzie i scenariusze błędów aż po mocki ze stanem. Do tego własne fixtures, dane tworzone przez Faker.js i pliki HAR jako zapis prawdziwego ruchu sieciowego. Powtarzalne procedury zapisujemy w skillach, a końcowy zestaw testów uruchamiamy w CI na GitHubie.

Claude Code pomaga tu jako wykonawca. Dostaje Playwright MCP, pliki HAR i bibliotekę skilli, ale to Ty wybierasz scenariusz, oceniasz plan i sprawdzasz gotowy kod. Mock gra dublera backendu, agent pomaga przygotować scenę, a odpowiedzialność za wynik nadal zostaje po stronie testera.

W kursie wykorzystamy

• ✅ Playwright
• ✅ Serwer Playwright MCP (agent realnie widzi aplikację na żywo)
• ✅ Agent Claude Code
• ✅ Claude Code skills (zbudujemy własną bibliotekę skilli)
• ✅ Plik CLAUDE.md
• ✅ Pliki HAR (trwały zapis komunikacji frontend-backend)

Czego się nauczysz?

• ✅ Jak zbudować utrzymywalny framework testów integracyjnych frontendu na mockach
• ✅ Jak dobierać technikę mockowania: statyczne odpowiedzi, generatory danych, pliki HAR, błędy, opóźnienia i mocki ze stanem
• ✅ Jak używać Playwright MCP i plików HAR, żeby agent rozumiał realną komunikację frontend-backend
• ✅ Jak tworzyć i rozwijać własne skille Claude Code – do logowania po API, odświeżania mocków z HAR i przygotowywania testów błędów API
• ✅ Jak przeprowadzić z Claude Code audyt i refaktoryzację frameworka, zachowując kontrolę nad decyzjami
• ✅ Jak wykorzystać plik CLAUDE.md, żeby nie przeładowywać kontekstu agenta
• ✅ Jak podzielić testy między kilka runnerów CI i scalić ich raporty blob w 1 raport HTML
• ✅ Jak diagnozować testy kończące się błędem na podstawie raportu, trace’a, zrzutu ekranu, pliku HAR i żywej aplikacji
• ✅ Jak bezpiecznie pokryć testami checkout, blokując prawdziwe mutacje i sterując stanami bez sztywnych opóźnień
• ✅ Jak rozdzielić testy panelu admina między 4 subagentów z osobnymi plikami i integracją po stronie głównego agenta
• ✅ Jak przetestować formularz rejestracji bez tworzenia prawdziwego konta

TIP: Ten kurs jest częścią Programu AI_Testers 2.0. O innych kursach i materiałach wchodzących w skład tego Programu poczytasz tutaj: pełny Program AI_Testers i ściezka rozwoju z AI

Informacje o kursie

Trudność: Średnio-zaawansowany

Ścieżki kursu:AI_Testers vol. 2

Kategorie kursu:AI Testers vol. 2

Tagi:agents, AI, API, CLI, Codex, openAPI, playwright, Playwright CLI, Playwright MCP, rest api, Swagger

Kurs Instructor

Arkadiusz Jelonek Autor