0Pricing
React Academy · Lekcja

Pierwsze kroki z Playwright dla React

Pisanie testów Playwright, które otwierają przeglądarkę, wchodzą w interakcję z aplikacją React i sprawdzają wyniki.

Pierwsze kroki z Playwright dla React to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest Playwright

Playwright to framework do testów E2E dla Node.js, który steruje rzeczywistymi przeglądarkami Chromium, Firefox i WebKit. Doskonale nadaje się do testowania pełnych przepływów aplikacji React, w tym routingu, uwierzytelniania i interakcji z API.

Instalacja

Playwright i jego pliki binarne przeglądarek można zainstalować jednym poleceniem.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Konfiguracja Playwright dla React

Należy skonfigurować Playwright tak, aby uruchamiał serwer deweloperski przed rozpoczęciem testów.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Pisanie pierwszego testu

Testy korzystają z obiektu page, który reprezentuje stronę w przeglądarce. Należy przejść pod adres URL, wejść w interakcję z elementami i sprawdzić rezultat.

import { test, expect } from '@playwright/test';

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Lokatory

Lokatory Playwright są podobne do zapytań RTL. Ze względu na większą odporność testów należy preferować lokatory oparte na rolach.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Klikanie i wpisywanie

Z elementami można wchodzić w interakcję za pomocą metod click(), fill(), press() i selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Oczekiwanie na nawigację

Playwright automatycznie czeka, aż elementy będą gotowe, ale można też jawnie zaczekać na zakończenie nawigacji lub żądań sieciowych.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Asercje

Należy używać expect(locator) wraz z wbudowanymi matcherami Playwright. Automatycznie czekają one na spełnienie warunku.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Robienie zrzutów ekranu w razie niepowodzenia

Po skonfigurowaniu Playwright automatycznie wykonuje zrzuty ekranu i zapisuje trace'y w przypadku niepowodzenia testu. Należy włączyć tę funkcję w konfiguracji.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Uruchamianie testów

Można uruchomić wszystkie testy w trybie headless albo użyć --ui, aby otworzyć interaktywny eksplorator testów umożliwiający wizualne przechodzenie przez testy.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Przeglądarka trace'ów Playwright

Gdy test się nie powiedzie, należy otworzyć plik trace'a za pomocą npx playwright show-trace, aby odtworzyć test krok po kroku wraz ze zrzutami ekranu, żądaniami sieciowymi i logami konsoli.

Integracja z CI

W środowisku CI Playwright domyślnie działa w trybie headless. Należy zainstalować przeglądarki za pomocą npx playwright install --with-deps i uruchamiać testy jak zwykły skrypt npm.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Szybkie sprawdzenie

Jakiej metody Playwright należy użyć do wypełnienia pola tekstowego?

Podsumowanie

Playwright testuje rzeczywiste przeglądarki i automatycznie czeka na gotowość elementów. Należy używać lokatorów opartych na rolach, metod fill() i click() do interakcji, expect(locator) do asercji oraz trybu --ui do wizualnego debugowania podczas tworzenia aplikacji.

Często zadawane pytania

Czy lekcja „Pierwsze kroki z Playwright dla React” jest bezpłatna?

Tak — pełny tekst „Pierwsze kroki z Playwright dla React” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pierwsze kroki z Playwright dla React”?

Pisanie testów Playwright, które otwierają przeglądarkę, wchodzą w interakcję z aplikacją React i sprawdzają wyniki. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Pierwsze kroki z Playwright dla React”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Testy integracyjne z React Testing Library
  2. Testowanie asynchronicznego interfejsu i wywołań API za pomocą MSW
  3. Pierwsze kroki z Playwright dla React
  4. Testowanie formularzy i przepływów użytkownika end-to-end
← Powrót do React Academy