Next.js 15: fullstack-webbappar · Lektion

End-to-end-testning med Playwright

Konfigurera end-to-end-tester som simulerar användarinteraktioner genom hela applikationens flöde.

Lektion 2 av 411 steg

End-to-end-testning med Playwright är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad är End-to-End-testning?

End-to-End-testning (E2E) simulerar en verklig användares väg genom applikationen, från början till slut. Den testar hela stacken: frontend, backend och databas.

Tänk på det som en robotanvändare som interagerar med din app i en webbläsare. På så sätt säkerställs att alla delar av systemet fungerar tillsammans som förväntat, och problem som enhets- eller integrationstester kan missa upptäcks.

Varför Playwright för E2E?

Playwright är ett kraftfullt verktyg med öppen källkod från Microsoft, utvecklat för tillförlitlig E2E-testning. Det erbjuder flera viktiga fördelar:

Plattformsoberoende webbläsarstöd: Testar Chromium, Firefox och WebKit (Safari).
Automatisk väntan: Väntar automatiskt på att element ska vara redo, vilket minskar instabilitet.
Robusta åtgärder: Simulerar verkliga användarinteraktioner som klick, inmatning och tangenttryckningar.
Snabbt och parallellt: Kan köra tester i flera webbläsare samtidigt.

Konfigurera Playwright

För att komma igång behöver du installera Playwright i ditt Next.js-projekt. Det här kommandot konfigurerar Playwright och laddar ner nödvändiga webbläsarbinärfiler:

npm init playwright@latest

Du får hjälp genom att konfigurera en grundläggande konfigurationsfil (playwright.config.ts) och ett exempeltest. Kom ihåg att köra din Next.js-applikation, till exempel med npm run dev, när du kör E2E-tester!

Ditt första Playwright-test

Vi skriver ett enkelt test som navigerar till en sida och kontrollerar dess titel. Playwright-tester skrivs vanligtvis i JavaScript eller TypeScript.

Det här exemplet förutsätter att din Next.js-app körs 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/);
});

Interagera med element

Playwright tillhandahåller kraftfulla locators för att hitta element på sidan. Du kan interagera med dessa element genom att fylla i inmatningsfält, klicka på knappar och mycket mer.

Vanliga locators är getByRole(), getByText(), getByLabel() och locator() för 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();
});

Assertioner och automatisk väntan

Playwrights API expect används för att göra assertioner om applikationens tillstånd. En viktig funktion är automatisk väntan, där Playwright automatiskt väntar på att element ska bli synliga, aktiverade eller stabila innan en åtgärd eller assertion utförs.

Det minskar behovet av manuella väntetider avsevärt och gör testerna mer robusta och mindre känsliga för instabilitet.

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

Testa ett komplett användarflöde

Vi simulerar en mer komplex användarresa: en användare loggar in, navigerar till en dashboard och verifierar innehåll. Det visar hur E2E-tester täcker flera sidor och interaktioner.

Se till att din Next.js-applikation har en inloggningssida och en dashboard för att testet ska lyckas.

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öra tester och rapportera resultat

När du har skrivit dina tester kan du köra dem från terminalen. Playwright tillhandahåller en kraftfull testkörning och flera rapporteringsalternativ:

Kör alla tester: npx playwright test
Kör en specifik testfil: npx playwright test example.spec.js
Kör tester i headed-läge (webbläsaren är synlig): npx playwright test --headed
HTML-rapport: När testerna har körts öppnar du playwright-report/index.html för en detaljerad, interaktiv rapport.

Bästa praxis för E2E-tester

Så här skriver du effektiva och underhållbara E2E-tester:

Rikta in dig på användarnära element: Använd locators som återspeglar hur en användare ser sidan, till exempel getByRole och getByText.
Använd attributet data-testid: För element utan tydlig text eller roll kan du lägga till attributet data-testid för ett robust urval.
Håll testerna oberoende: Varje test bör konfigurera sitt eget tillstånd och inte vara beroende av tidigare tester.
Balansera testtyperna: E2E-tester är långsammare. Använd dem för kritiska användarflöden och förlita dig på enhets- och integrationstester för mindre komponenter.

Playwrights testkoncept

Vilka av följande är viktiga fördelar eller funktioner hos Playwright för End-to-End-testning?

Besvara frågan i den interaktiva lektionen

Sammanfattning: E2E med Playwright

Vi har utforskat End-to-End-testning och hur Playwright hjälper dig att simulera verkliga användarinteraktioner i hela din Next.js-applikation.

Du har lärt dig att konfigurera Playwright, skriva tester som navigerar och interagerar med element samt verifierar resultat. Med automatisk väntan och stöd för flera webbläsare är Playwright ett kraftfullt verktyg för att säkerställa tillförlitligheten i fullstack-applikationer.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”End-to-end-testning med Playwright” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”End-to-end-testning med Playwright”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad lär jag mig i ”End-to-end-testning med Playwright”?

Konfigurera end-to-end-tester som simulerar användarinteraktioner genom hela applikationens flöde. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?

Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”End-to-end-testning med Playwright”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?

Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Enhets- och integrationstestning
End-to-end-testning med Playwright
Monorepon och mikrofrontendlösningar
Mockning och testning av serverkomponenter

← Tillbaka till Next.js 15: fullstack-webbappar