Strategieën voor end-to-endtests

Om E2E-tests te schrijven heb je een testframework nodig. Populaire keuzes zijn Playwright en Cypress. Met beide kun je browserinteracties automatiseren en de status van je applicatie controleren.

• Playwright: staat bekend om ondersteuning voor meerdere browsers (Chromium, Firefox, WebKit), sterke parallellisatie en betrouwbare mogelijkheden om automatisch te wachten.
• Cypress: biedt een uitstekende ontwikkelervaring met realtime herladen en krachtige hulpprogramma's voor foutopsporing, rechtstreeks in de browser.

In onze voorbeelden richten we ons vanwege de veelzijdigheid op Playwright.

Playwright instellen is eenvoudig. Je initialiseert het doorgaans in je project en Playwright handelt de installatie van browsers af. Vervolgens maakt het een configuratiebestand en een voorbeeldtest aan.

Open om te beginnen je terminal in de hoofdmap van je project en voer het volgende uit:

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

Met deze opdracht installeer je Playwright en de binaire bestanden van de browsers en stel je het bestand playwright.config.ts in voor je testinstellingen.

Met Playwright kun je gebruikersacties simuleren, zoals op knoppen klikken, tekst in velden typen en door pagina's navigeren. Je gebruikt 'locators' om elementen op de pagina te vinden.

Hier zie je een fragment dat laat zien hoe je naar een pagina navigeert en een inlogformulier invult:

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

Het is belangrijk om te onthouden dat E2E-tests de procedures van je tRPC-backend niet rechtstreeks aanroepen. In plaats daarvan werken ze met de gebruikersinterface (UI) van je frontend.

Wanneer je UI een tRPC-query of -mutatie activeert (bijvoorbeeld bij het verzenden van een formulier), observeert de E2E-test de resulterende wijzigingen op de pagina. Je controleert of de UI correct wordt bijgewerkt, wat aangeeft dat de onderliggende tRPC-aanroep en backendlogica naar verwachting hebben gewerkt.

Laten we een voorbeeld doorlopen: het testen van het maken van een nieuw bericht in je applicatie. De E2E-test simuleert hoe een gebruiker naar de pagina voor het maken van een bericht navigeert, een formulier invult, het verzendt en vervolgens controleert of het nieuwe bericht in een lijst verschijnt.

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

Voor betrouwbare E2E-tests heb je een voorspelbare beginstatus nodig. Dat betekent dat je je testgegevens zorgvuldig moet beheren. Vaak moet je je database vullen met specifieke gegevens voordat een test wordt uitgevoerd en die gegevens daarna weer opruimen.

Mogelijke strategieën zijn: vóór elke test speciale API-eindpunten aanroepen (bijvoorbeeld /api/test/reset-db) of rechtstreeks werken met een testdatabase-instantie. Zo begint elke test met een schone lei en staat deze los van andere tests.

Na het uitvoeren van acties gebruiken E2E-tests controles om te verifiëren of de applicatie de verwachte status heeft. Playwright biedt krachtige methoden voor controles, met automatisch wachten.

Deze functie voor 'automatisch wachten' is cruciaal bij het testen van asynchrone UI-updates. Zo weet je zeker dat elementen zichtbaar zijn of actie kunnen uitvoeren voordat een controle of actie wordt gestart.

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

We hebben end-to-endtesten onderzocht en gekeken naar hun rol bij het valideren van de volledige gebruikersreis in tRPC-applicaties. Door echte gebruikersinteracties te simuleren met tools zoals Playwright, kun je ervoor zorgen dat je frontend en backend naadloos communiceren en de verwachte ervaring bieden.

E2E-tests vormen je laatste verdedigingslinie: ze ontdekken integratieproblemen en zorgen ervoor dat je applicatie vanuit het perspectief van de gebruiker werkt zoals bedoeld. Blijf deze strategieën oefenen om robuuste en betrouwbare tRPC-apps te bouwen!