F
front-end-testing
DOM Testing Library patterns for behavior-driven UI testing. Framework-agnostic patterns for testing user interfaces. Use when testing any front-end application.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
DOM Testing Library patterns for behavior-driven UI testing. Framework-agnostic patterns for testing user interfaces. Use when testing any front-end application.
How to use
- 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.