Next.js 15-fullstackwebapps · Lektion

End-to-end-test med Playwright

Opsæt end-to-end-tests, der simulerer brugerinteraktioner gennem hele applikationsflowet.

Lektion 2 af 411 trin

End-to-end-test med Playwright er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad er end-to-end-test?

End-to-end-test (E2E) simulerer en rigtig brugers rejse gennem din applikation fra start til slut. Den tester hele stakken: frontend, backend og database.

Forestil dig det som en robotbruger, der interagerer med din app i en browser. Det sikrer, at alle dele af dit system fungerer sammen som forventet, og opdager problemer, som enheds- eller integrationstest måske overser.

Hvorfor Playwright til E2E?

Playwright er et effektivt open source-værktøj fra Microsoft, der er designet til pålidelig E2E-test. Det har flere vigtige fordele:

Flere browsere: Tester Chromium, Firefox og WebKit (Safari).
Automatisk ventetid: Venter automatisk på, at elementer er klar, hvilket reducerer ustabile test.
Robuste handlinger: Simulerer ægte brugerinteraktioner som klik, udfyldning og tastetryk.
Hurtig og parallel: Kan køre test i flere browsere samtidigt.

Konfiguration af Playwright

For at komme i gang skal du installere Playwright i dit Next.js-projekt. Denne kommando konfigurerer Playwright og downloader de nødvendige browserbinærfiler:

npm init playwright@latest

Du bliver guidet gennem opsætningen af en grundlæggende konfigurationsfil (playwright.config.ts) og en eksempeltest. Husk at have din Next.js-applikation kørende (f.eks. npm run dev), når du kører E2E-test.

Din første Playwright-test

Lad os skrive en simpel test, der navigerer til en side og kontrollerer dens titel. Playwright-test skrives typisk i JavaScript eller TypeScript.

Dette eksempel forudsætter, at din Next.js-app kører på http://localhost:3000.

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

test('homepage has expected title', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  // Check if the page title contains 'Next.js App'
  await expect(page).toHaveTitle(/Next.js App/);
});

Interaktion med elementer

Playwright tilbyder effektive locators til at finde elementer på siden. Du kan interagere med disse elementer ved at udfylde inputfelter, klikke på knapper og meget mere.

Almindelige locators omfatter getByRole(), getByText(), getByLabel() og locator() til CSS-selektorer.

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

test('fill and submit a contact form', async ({ page }) => {
  await page.goto('http://localhost:3000/contact');

  // Fill input fields by label or placeholder
  await page.getByLabel('Your Name').fill('Alice');
  await page.getByPlaceholder('email@example.com').fill('alice@example.com');

  // Click the submit button
  await page.getByRole('button', { name: 'Send Message' }).click();

  // Assert that a success message appears
  await expect(page.getByText('Message sent successfully!')).toBeVisible();
});

Forventninger og automatisk ventetid

Playwrights expect-API bruges til at opstille forventninger til din applikations tilstand. En vigtig funktion er automatisk ventetid, hvor Playwright automatisk venter på, at elementer bliver synlige, aktiverede eller stabile, før en handling eller forventning udføres.

Det reducerer behovet for manuelle ventetider betydeligt og gør dine test mere robuste og mindre tilbøjelige til at fejle ustabilt.

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

test('check item count', async ({ page }) => {
  await page.goto('http://localhost:3000/products');

  // Playwright waits for the list to render
  const productList = page.locator('.product-item');
  await expect(productList).toHaveCount(5);

  // Click a filter button
  await page.getByRole('button', { name: 'Filter by Category A' }).click();

  // Playwright waits for the list to update after filtering
  await expect(productList).toHaveCount(2);
});

Test af et komplet brugerforløb

Lad os simulere en mere kompleks brugerrejse: en bruger logger ind, navigerer til et dashboard og kontrollerer indholdet. Det viser, hvordan E2E-test dækker flere sider og interaktioner.

Sørg for, at din Next.js-applikation har en login-side og et dashboard, for at denne test kan bestå.

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

test('user can log in and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  // Fill login form
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('securepassword');
  await page.getByRole('button', { name: 'Log In' }).click();

  // Wait for navigation to the dashboard and verify content
  await page.waitForURL('http://localhost:3000/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome, testuser!' })).toBeVisible();
  await expect(page.getByText('Your recent activity')).toBeVisible();
});

Kørsel af test og rapportering

Når du har skrevet dine test, kan du køre dem fra din terminal. Playwright tilbyder en effektiv testrunner og forskellige rapporteringsmuligheder:

Kør alle test: npx playwright test
Kør en bestemt testfil: npx playwright test example.spec.js
Kør test i tilstand med synlig browser: npx playwright test --headed
HTML-rapport: Åbn playwright-report/index.html efter testkørslen for at se en detaljeret, interaktiv rapport.

Bedste praksis for E2E-test

Sådan skriver du effektive og vedligeholdelsesvenlige E2E-test:

Vælg brugervendte elementer: Brug locators, der afspejler, hvordan en bruger ser siden (f.eks. getByRole og getByText).
Brug attributter med data-testid: For elementer uden tydelig tekst eller rolle kan du tilføje attributter med data-testid for robust udvælgelse.
Hold test uafhængige: Hver test bør oprette sin egen tilstand og ikke være afhængig af tidligere test.
Skab balance mellem testtyper: E2E-test er langsommere; brug dem til kritiske brugerforløb, og brug enheds- og integrationstest til mindre komponenter.

Playwright-testkoncepter

Hvilke af følgende er vigtige fordele eller funktioner ved Playwright til end-to-end-test?

Besvar den i den interaktive lektion

Opsummering: E2E med Playwright

Vi har undersøgt end-to-end-test, og hvordan Playwright hjælper dig med at simulere ægte brugerinteraktioner på tværs af hele din Next.js-applikation.

Du har lært at konfigurere Playwright, skrive test, der navigerer og interagerer med elementer, samt kontrollere resultater. Med funktionerne til automatisk ventetid og understøttelse af flere browsere er Playwright et effektivt værktøj til at sikre pålideligheden af dine fullstack-applikationer.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “End-to-end-test med Playwright” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “End-to-end-test med Playwright”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “End-to-end-test med Playwright”?

Opsæt end-to-end-tests, der simulerer brugerinteraktioner gennem hele applikationsflowet. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “End-to-end-test med Playwright”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Next.js 15-fullstackwebapps