Developer · FREE

Test E2E w przeglądarce

Scenariusz klikalny w Playwright: wstań serwer albo użyj istniejącego, poczekaj na networkidle, znajdź selektory z wyrenderowanego DOM, nie z HTML-a źródłowego. Jeden happy path albo jeden bug, nie 40 speków.

reviewed:

Jak zainstalować

  1. Uzupełnij pola poniżej (albo zostaw nazwy zmiennych i dopisz w czacie). Wartości z Skill creatora na liście podstawiają się same.
  2. Kopiuj, potem wklej w Claude.ai (instrukcje projektu) albo ChatGPT (Custom Instructions).
  3. Albo pobierz SKILL.md i połóż w folderze skilli Claude Code.
SKILL
URL lokalny albo komenda serwera + port: [URL]. Scenariusz słowami: [SCENARIUSZ]. Czy serwer już stoi: [SERWER].

NIE PISZ SUITU 40 TESTÓW. Jeden happy path albo jeden bug. Nie jednostka, nie kontrakt OpenAPI (inne skille).

Jeśli [SCENARIUSZ] pusty - 3 pytania (kto klika, co ma zobaczyć, co jest failem) i stop.
Jeśli [URL] to produkcja albo cudza sesja / płatne API - odmów i stop.

## Decyzja o serwerze (zrób najpierw)
1. Port z [URL] już słucha? TAK -> UŻYJ ISTNIEJĄCEGO. Zakaz stawiać drugi dev server na sąsiednim porcie.
2. Nie słucha i [SERWER] podaje komendę -> helper startuje, test, helper gasi. Zapisz port.
3. Nie słucha i brak komendy -> poproś o komendę albo działający URL i stop.

## Rekonesans, potem akcja
1. Chromium headless.
2. `goto` + czekaj na `networkidle` ALBO na konkretny selektor. ZAKAZ inspekcji DOM przed tym czekaniem (hydracja skłamie).
3. Selektory z wyrenderowanego DOM: `getByRole`, `getByText`, `getByLabel`. Zakaz losowych klas CSS-in-JS (`css-1a2b3c`, hashe).
4. Lista znalezionych selektorów (rola/tekst -> akcja).
5. Akcje scenariusza. Fail -> screenshot (ścieżka pliku) + (opcjonalnie) console log.

Zwracasz:

1. Decyzja serwer: już działa / start+kill (komenda, port).
2. Skrypt Playwright (jeden plik albo jeden test). Stack repo: `@playwright/test` albo Python `sync_playwright`; nie mieszaj bez powodu.
3. Komenda odpalenia (kopiowalna).
4. Lista selektorów z rekonesansu.
5. Ścieżka screenshota faila (albo "pass, brak faila").

Zakazy: produkcja, płatne API, cudze cookies, drugi serwer na porcie, 40 speków, selektor z surowego HTML zanim JS wstanie. Po teście: nie zostawiaj sieroty `vite`/`next`/`serve`, którą sam odpaliłeś. Dywiz "-".

Zanim wkleisz

Skill vs zły prompt Użyj z tym narzędziem

Skill vs zły prompt

Zły prompt

Naklikaj mi cały serwis Playwrightem, wszystkie flow, na produkcji z moją sesją.

Skill

URL lokalny albo komenda serwera + port: [URL]. Scenariusz słowami: [SCENARIUSZ]. Czy serwer już stoi: [SERWER].

NIE PISZ SUITU 40 TESTÓW. Jeden happy path albo jeden bug. Nie jednostka, nie kontrakt OpenAPI (inne skille).

Jeśli [SCENARIUSZ] pusty - 3 pytania (kto klika, co ma zobaczyć, co jest failem) i stop.
Jeśli [URL] to produkcja albo cudza sesja / płatne API - odmów i stop.

## Decyzja o serwerze (zrób najpierw)

Użyj z tym narzędziem

Lekcja: claude-start-06-claude-dla-programisty

Pytania

Jak użyć skilla "Test E2E w przeglądarce" w Claude?

Uzupełnij pola w nawiasach (albo weź je z profilu Skill creator na /skille), kliknij Kopiuj i wklej treść do instrukcji projektu w Claude.ai. W Claude Code kliknij Pobierz SKILL.md i połóż plik w folderze skilli. Skill działa też w ChatGPT (Custom Instructions). Nie chowa się za paywallem: kopia jest darmowa.

Kiedy tego skilla NIE używać?

Nie gdy da się to złapać testem jednostki albo kontraktu API. Nie do testowania płatnego API na produkcji. Nie do klikania cudzych zalogowanych sesji.