PricingLoginStart free
React Academy · leksjon

Kom i gang med Playwright for React

Skriv Playwright-tester som åpner en nettleser, samhandler med React-appen og kontrollerer resultatene.

Leksjon 3 av 414 trinn

Kom i gang med Playwright for React er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er Playwright

Playwright er et Node.js-rammeverk for E2E-testing som styrer ekte Chromium-, Firefox- og WebKit-nettlesere. Det egner seg godt til å teste komplette flyter i React-applikasjoner, inkludert ruting, autentisering og API-interaksjoner.

Installasjon

Installer Playwright og nettleserbinærfilene med én enkelt kommando.

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

# playwright.config.ts is created automatically

Playwright-konfigurasjon for React

Konfigurer Playwright til å starte utviklingsserveren før testene kjøres.

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,
  },
});

Skriv den første testen

Tester bruker page, som er et objekt som representerer en nettleserside. Naviger til en URL, samhandle med elementer og kontroller resultatet.

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

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

Locatorer

Locatorene i Playwright ligner på RTL-spørringer. Foretrekk rollebaserte locatorer for å gjøre testene robuste.

// 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');

Klikking og skriving

Samhandle med elementer ved å bruke click(), fill(), press() og selectOption().

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

Vente på navigering

Playwright venter automatisk til elementer er klare, men det er også mulig å vente eksplisitt på at navigering eller nettverksforespørsler skal fullføres.

// 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"]'),
]);

Kontroller

Bruk expect(locator) sammen med Playwrights innebygde matchere. De venter automatisk til betingelsen er oppfylt.

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');

Ta skjermbilder ved feil

Playwright tar automatisk skjermbilder og trace-filer når en test mislykkes, hvis dette er konfigurert. Aktiver det i konfigurasjonen.

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

Kjør tester

Kjør alle tester uten grafisk grensesnitt, eller bruk --ui for den interaktive testutforskeren, som lar deg gå visuelt gjennom testene trinn for trinn.

# 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

Playwright Trace Viewer

Når en test mislykkes, åpner du trace-filen med npx playwright show-trace for å spille av testen trinn for trinn med skjermbilder, nettverksforespørsler og konsolllogger.

CI-integrasjon

Playwright kjører som standard uten grafisk grensesnitt i CI. Installer nettlesere med npx playwright install --with-deps, og kjør testene som et vanlig npm-skript.

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

Sjekk forståelsen

Hvilken Playwright-metode bør brukes for å fylle ut et tekstfelt?

Besvar den i den interaktive leksjonen

Oppsummering

Playwright tester ekte nettlesere og venter automatisk til elementene er klare. Bruk rollebaserte locatorer, fill() og click() til samhandling, expect(locator) til kontroller og --ui-modus for visuell feilsøking under utvikling.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Kom i gang med Playwright for React» gratis?

Ja – hele teksten i «Kom i gang med Playwright for React» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kom i gang med Playwright for React»?

Skriv Playwright-tester som åpner en nettleser, samhandler med React-appen og kontrollerer resultatene. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Kom i gang med Playwright for React»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Integrasjonstesting med React Testing Library
  2. Teste asynkront brukergrensesnitt og API-kall med MSW
  3. Kom i gang med Playwright for React
  4. Teste skjemaer og brukerflyter fra ende til ende
← Tilbake til React Academy