ID: I202512271647 Status: idea Tags: Avans 2-1 LU3, playwright

playwright UI testing

We gebruiken playwright voor het UI testen van onze app. Deze testen zijn bedoelt om te zorgen dat onze app functionaliteit niet opeens kapot gaat.

Testen worden automatisch uitgevoert als we mergen naar main en develop, dat betekent niet dat je zelf niet hoeft te testen.

Hoe test je

Er zijn meerdere manieren om deze testen te runnen, waaronder npm run test:ui en npm test.

Ook kan je de vscode plugin installeren.

Als je npm test doet gaat het framework alle testen langs en zie je of alles lukt, daarna kan je in je browser kijken of / wat er gefaald is. Je krijgt hier te zien welke stappen gelukt zijn, en welke niet, en waar het in de test code mis gaat.

Bij npm run test:ui kan je individueel elke test runnen en zien wat een browser ziet bij de test. Dit kan nuttig zijn bij het opzetten / debuggen van een test.

Bij de vscode extensie kan je elke test individueel runnen, wanneer er een test faalt kan je zien waar dit in je code fout is gegaan.

Het is belangrijk om te weten dat elke test wordt gedaan in chrome en in firefox, dus het kan zijn dat soms 1 van de 2 lukt en de ander niet. Ik heb safari uitgezet want die faalde met de default tests van playwright

Het maken van een test

hier is de officiele guide van playwright zelf. Hieronder staat het voorbeeld van de default code, en je kan door de test folder heen kijken om te zien hoe onze testen er uit zien.

import { test, expect } from '@playwright/test';
 
test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
 
  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});
 
test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
 
  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();
 
  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Genereren van testen

Ook is het mogelijk om een test te genereren door te lopen door de ui. Daar kan je hier meer over lezen, maar dat kan met de command npx playwright codegen. Dan zodra je rowser opent type je http://localhost:5173/ in de url bar (of een andere pagina die je wilt hebben als start.) en dan kan je de ui gebruiken om testen te genereren.

Houdt in de gaten dat je de frontent aan moet hebben staan om dit te doen, en dat wanneer je klaar bent, je je test opslaat in een bestand in tests/.

URL format

Het is belangrijk dat alle URL’s goed worden gezet:

// Pagina 1: Fout, we willen geen hardcoded url
await page.goto('http://localhost:5173/');
 
// Pagina 1: Goed
await page.goto('/');
 
// Pagina 2: Fout, we willen geen hardcoded url
await page.goto('http://localhost:5173/profile');
 
// Pagina 2: Goed
await page.goto('/profile');

Want op deze mannier kunnen we makkelijk switchen als het moet, met een hardcoded url kan het niet. + we kunnen makkelijk op live testen.

---

References

• I decided to research playwright for this project because cypress costs money. and ChatGPT listed playwright as a good alternative for our use-case.
• I wrote this document as documentation for my teammates for Avans 2-1 LU3.