Przejdź do głównej zawartości
Developer Toolkit Developer Toolkit Developer Toolkit

Automatyzacja testów end-to-end

Twój flow rejestracji działa idealnie, gdy testujesz go ręcznie. Potem QA raportuje, że użytkownicy na Safari z włączonym autofill nie mogą wysłać formularza, bo walidacja hasła odpala się zanim autofill się zakończy. Twoje testy jednostkowe i integracyjne nigdy tego nie złapały, bo nie działają w prawdziwej przeglądarce. Testy E2E istnieją, żeby symulować to, co robią faktyczni użytkownicy — a AI sprawia, że ich pisanie jest dramatycznie szybsze.

Czego się nauczysz

Dział zatytułowany „Czego się nauczysz”
  • Workflow do generowania testów Playwright z user stories i kryteriów akceptacji
  • Generowanie Page Object Model utrzymujące testy E2E w łatwym utrzymaniu
  • Integracja testów regresji wizualnej do wyłapywania dryfu UI
  • Strategie obsługi uwierzytelniania, dynamicznej treści i niestabilnych testów
  • Wzorce konfiguracji cross-browser i mobile viewport

Od user story do testu

Dział zatytułowany „Od user story do testu”

Najszybsza ścieżka do testów E2E: przetłumacz swoje user stories bezpośrednio na skrypty Playwright.

Generate Playwright E2E tests for this user story:


"As a registered user, I can purchase a subscription:
1. I log in with email and password
2. I navigate to the pricing page
3. I click 'Subscribe' on the Pro plan
4. I enter my credit card details
5. I see a success confirmation with my new plan name
6. My dashboard shows 'Pro' as my current plan"


Requirements:
- Use Page Object Model for each page (LoginPage, PricingPage, CheckoutPage, DashboardPage)
- Handle the Stripe Elements iframe for card input
- Use test credit card 4242424242424242
- Assert at each step, not just the final state
- Include proper waits (no arbitrary timeouts)
- Tag as @purchase for selective test running


Save page objects to /tests/e2e/pages/
Save the test to /tests/e2e/flows/purchase-subscription.spec.ts

Generowanie Page Object Model

Dział zatytułowany „Generowanie Page Object Model”

AI świetnie radzi sobie z generowaniem Page Objects, ponieważ wzorzec jest wysoce ustrukturyzowany.

Testowanie regresji wizualnej

Dział zatytułowany „Testowanie regresji wizualnej”

Wyłapuj nieoczekiwane zmiany UI porównując zrzuty ekranu między uruchomieniami testów.

Obsługa uwierzytelniania w testach

Dział zatytułowany „Obsługa uwierzytelniania w testach”
Create an authentication helper for our Playwright tests that:


1. Has a storageState approach:
   - A global setup that logs in once and saves the auth state
   - Tests reuse the saved state (no login per test = faster suite)
   - Different states for: regularUser, adminUser, unauthenticatedUser


2. Save to /tests/e2e/auth/global-setup.ts and /tests/e2e/auth/states/


3. Configure playwright.config.ts to use global setup
   and make auth states available via test fixtures


4. Show usage in a test:
   test('admin can access user management', async ({ adminPage }) => {
     // adminPage is already authenticated as admin
   })

Naprawianie niestabilnych testów

Dział zatytułowany „Naprawianie niestabilnych testów”

Konfiguracja cross-browser i mobile

Dział zatytułowany „Konfiguracja cross-browser i mobile”

Gdy coś się zepsuje

Dział zatytułowany „Gdy coś się zepsuje”

“Testy E2E trwają 20 minut i deweloperzy je pomijają.” Zrównoleglij na wielu workerach (Playwright wspiera to natywnie). Uruchamiaj tylko testy critical-path na każdym PR, pełny zestaw w nocy. Użyj opcji --shard w CI do dystrybucji między wieloma runnerami.

“Testy psują się za każdym razem, gdy zmienia się UI.” Używasz kruchych selektorów. Przejdź na atrybuty data-testid, które są stabilne między zmianami designu. Poproś AI “rewrite all selectors to use data-testid instead of CSS classes or text content.”

“Testy regresji wizualnej failują z powodu różnic w renderowaniu fontów.” Różne systemy operacyjne renderują fonty inaczej, co powoduje różnice pikselowe. Użyj kontenerów Docker dla spójnego renderowania w CI. Ustaw wyższy próg porównania (0.5%) lub maskuj obszary z dużą ilością tekstu.

“AI nie może wchodzić w interakcje z iframe’ami firm trzecich (Stripe, reCAPTCHA).” Użyj trybów testowych dla usług firm trzecich. Stripe udostępnia tryb testowy z przewidywalnym zachowaniem. Dla reCAPTCHA użyj klucza strony, który zawsze przechodzi w środowiskach testowych.

Co dalej

Dział zatytułowany „Co dalej”
Mobile Testing Native and cross-platform mobile testing patterns.
Accessibility Testing Automated WCAG compliance testing in E2E flows.
Performance Testing Load and performance testing your application.
Polityka prywatności Regulamin