Angular Academy · Lekcja

Pisanie testów Playwright

Automatyzować przepływy w przeglądarce za pomocą Playwright

Pisanie testów Playwright to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 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 Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Pierwszy test Playwright

Test Playwright to funkcja asynchroniczna, która otrzymuje fixture, takie jak page. Importujesz test i expect z @playwright/test i opisujesz scenariusz użytkownika.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

Fixture page

Obiekt page reprezentuje pojedynczą kartę przeglądarki. Każdy test otrzymuje nowy, odizolowany obiekt page w czystym kontekście, dzięki czemu testy przypadkowo nie współdzielą plików cookie ani pamięci.

Nawigacja za pomocą goto

page.goto(url) ładuje adres URL i czeka, aż strona będzie gotowa. W połączeniu z baseURL w konfiguracji możesz używać ścieżek względnych.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Znajdowanie elementów za pomocą locatorów

Locator to leniwe odwołanie do elementu, które automatycznie czeka na jego dostępność. Preferuj semantyczne locatory, takie jak getByRole, getByLabel i getByText, zamiast podatnych na awarie selektorów CSS.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Wpisywanie i klikanie

Użyj fill, aby ustawić wartości pól wejściowych, oraz click, aby naciskać przyciski. Playwright automatycznie czeka, aż elementy będą widoczne i aktywne, zanim wykona działanie.

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

Automatyczne oczekiwanie eliminuje niestabilne opóźnienia

W przeciwieństwie do starszych narzędzi Playwright automatycznie czeka na elementy oraz na spełnienie asercji. Prawie nigdy nie potrzebujesz ręcznych limitów czasu, dzięki czemu testy są stabilne.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Grupowanie testów za pomocą describe

Użyj test.describe, aby grupować powiązane scenariusze i współdzielić konfigurację za pomocą beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Testowanie pełnej ścieżki użytkownika

Łącz działania w łańcuch, aby odwzorować kompletny przebieg. Każdy krok przypomina skrypt opisujący zachowanie użytkownika.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Uruchamianie testów

Uruchamiaj wszystkie specyfikacje z poziomu CLI. Dodaj --headed, aby obserwować przeglądarkę, lub --ui, aby otworzyć interaktywny runner testów Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Debugowanie niepowodzeń

W przypadku niepowodzenia Playwright może zapisać zrzuty ekranu, nagrania wideo i ślad, który można odtworzyć krok po kroku. Przeglądarka śladów pokazuje DOM przy każdej akcji, dzięki czemu łatwo diagnozować niestabilne niepowodzenia.

npx playwright test --trace on
npx playwright show-trace trace.zip

Izolacja testów ma znaczenie

Ponieważ każdy test otrzymuje własny kontekst przeglądarki, nie polegaj na kolejności ani współdzielonym stanie między testami. Przygotuj dane potrzebne każdemu testowi w jego własnym beforeEach lub bezpośrednio w teście.

Szybkie sprawdzenie

Dlaczego należy unikać waitForTimeout?

Podsumowanie

Test Playwright korzysta z fixture page: goto służy do nawigacji, semantyczne locatory (getByRole, getByLabel) do znajdowania elementów, a fill/click do interakcji. Automatyczne oczekiwanie eliminuje niestabilne opóźnienia. Grupuj testy za pomocą describe, uruchamiaj poleceniem npx playwright test i debuguj za pomocą śladów.

Często zadawane pytania

Czy lekcja „Pisanie testów Playwright” jest bezpłatna?

Tak — pełny tekst „Pisanie testów Playwright” 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 Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pisanie testów Playwright”?

Automatyzować przepływy w przeglądarce za pomocą Playwright Ćwiczysz Angular 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ąć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular 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 2 z 4.

Ile czasu zajmuje lekcja „Pisanie testów Playwright”?

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 Angular Academy?

Tak. Każda lekcja Angular 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

← Powrót do Angular Academy