Strategier for end-to-end-test

Hvis du vil skrive E2E-tests, skal du bruge et testframework. Populære valg omfatter Playwright og Cypress. Begge gør det muligt at automatisere browserinteraktioner og kontrollere applikationens tilstand.

• Playwright: Kendt for understøttelse af flere browsere (Chromium, Firefox, WebKit), stærk parallelisering og robust automatisk ventetid.
• Cypress: Giver en fremragende udvikleroplevelse med genindlæsning i realtid og effektive fejlfindingsværktøjer direkte i browseren.

I vores eksempler fokuserer vi på Playwright på grund af dets alsidighed.

Det er enkelt at konfigurere Playwright. Du initialiserer det typisk i dit projekt, hvorefter det håndterer installationen af browsere. Derefter opretter det en konfigurationsfil og en eksempeltest.

Åbn først terminalen i projektets rodmappe, og kør:

npm init playwright@latest
# Follow prompts: choose TypeScript, add a test file

Denne kommando installerer Playwright og browserbinærfilerne og opretter filen playwright.config.ts til dine testindstillinger.

Playwright giver dig mulighed for at simulere brugerhandlinger som at klikke på knapper, skrive i felter og navigere på sider. Du bruger 'locators' til at finde elementer på siden.

Her er et kodestykke, der viser, hvordan du navigerer og udfylder en loginformular:

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('should navigate to login and fill form', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.locator('input[type="email"]').fill('test@example.com');
  await page.locator('input[type="password"]').fill('password123');
  await page.locator('button', { hasText: 'Login' }).click();
  // Further assertions would go here
});

Det er vigtigt at huske, at E2E-tests ikke kalder dine tRPC-backendprocedurer direkte. I stedet interagerer de med din frontends brugergrænseflade (UI).

Når din brugergrænseflade udløser en tRPC-forespørgsel eller -ændring (f.eks. ved indsendelse af en formular), observerer E2E-testen de efterfølgende ændringer på siden. Du kontrollerer, at brugergrænsefladen opdateres korrekt, hvilket viser, at det underliggende tRPC-kald og backendlogikken fungerede som forventet.

Lad os gennemgå et eksempel: test af oprettelsen af et nyt opslag i din applikation. E2E-testen simulerer en bruger, der navigerer til siden til oprettelse af opslag, udfylder en formular, sender den og derefter kontrollerer, at det nye opslag vises på en liste.

// tests/post-creation.spec.ts
import { test, expect } from '@playwright/test';

test('should allow a user to create a new post', async ({ page }) => {
  await page.goto('http://localhost:3000/posts/new');
  await page.locator('input[placeholder="Title"]').fill('My New E2E Post');
  await page.locator('textarea[placeholder="Content"]').fill('This is content from an E2E test.');
  await page.locator('button', { hasText: 'Create Post' }).click();

  // Assert redirection and new post visibility
  await expect(page).toHaveURL(/posts$/); // Should redirect to /posts
  await expect(page.locator('h2', { hasText: 'My New E2E Post' })).toBeVisible();
});

For at få pålidelige E2E-tests skal du have en forudsigelig starttilstand. Det betyder, at du skal håndtere dine testdata omhyggeligt. Du får ofte brug for at 'seed'e' din database med bestemte data, før en test kører, og 'rydde op' i dataene bagefter.

Strategier omfatter at kalde særlige API-endepunkter (f.eks. /api/test/reset-db) før hver test eller interagere direkte med en testdatabaseinstans. Det sikrer, at hver test starter fra et rent udgangspunkt og er isoleret fra de andre.

Efter at have udført handlinger bruger E2E-tests kontroller til at undersøge, om applikationen er i den forventede tilstand. Playwright leverer effektive metoder til kontroller med automatisk ventetid.

Funktionen med automatisk ventetid er afgørende ved test af asynkrone opdateringer af brugergrænsefladen, fordi den sikrer, at elementer er synlige eller kan interageres med, før der forsøges en kontrol eller handling.

// Example assertions after actions
await expect(page.locator('.success-message')).toBeVisible();
await expect(page.locator('#item-count')).toHaveText('10');
await expect(page).toHaveURL(/dashboard/); // Checks the current URL
await expect(page.locator('button', { hasText: 'Delete' })).toBeDisabled();

Vi har undersøgt end-to-end-test og forstået dens rolle i valideringen af hele brugerrejsen i tRPC-applikationer. Ved at simulere ægte brugerinteraktioner med værktøjer som Playwright kan du sikre, at din frontend og backend kommunikerer problemfrit og leverer den forventede oplevelse.

E2E-tests er din sidste forsvarslinje. De fanger integrationsproblemer og sikrer, at din applikation fungerer som tilsigtet set fra brugerens perspektiv. Bliv ved med at øve disse strategier for at bygge robuste og pålidelige tRPC-apps!