front-end-testing

Umiejętność do testowania front-endu opartego na zachowaniu użytkownika. Zawiera wzorce testowania DOM za pomocą Vitest Browser Mode (uruchamiającego testy w rzeczywistej przeglądarce) i DOM Testing Library. Niezależna od frameworka — użyj jej do testowania dowolnej aplikacji webowej, pisania testów interfejsu, wyszukiwania elementów DOM i symulowania interakcji użytkownika. Dla testów React-specific załaduj umiejętność react-testing.

1. Zainstaluj Vitest i sterownik przeglądarki: npm install -D vitest @vitest/browser-playwright. 2. Utwórz plik vitest.config.ts w głównym katalogu projektu i skonfiguruj Browser Mode, wskazując Playwright jako dostawcę oraz Chromium jako przeglądarkę. Alternatywnie uruchom npx vitest init browser, aby uruchomić asystenta konfiguracji. 3. Importuj page z vitest/browser w swoich testach, aby uzyskać dostęp do wbudowanych lokalizatorów (query selectors), które działają jak Testing Library. 4. Napisz testy zachowania, używając lokalizatorów do znalezienia elementów i symulowania interakcji użytkownika — Vitest Browser Mode renderuje rzeczywisty CSS, obsługuje zdarzenia przeglądarki i zarządzanie fokusem. 5. Uruchom testy poleceniem npx vitest — będą wykonywane w rzeczywistej przeglądarce zamiast w symulowanym DOM, dając dokładne wyniki produkcyjne.