Hoe gebruik je Playwright?

Een testautomatisering tool kan de beste ter wereld zijn, maar als je geen idee hebt hoe je het moet gebruiken blijft hij onbereikbaar en dus niet van toegevoegde waarde.

In dit blog wordt uitgelegd hoe je een start kunt maken met Playwright en waar je de nodige informatie kunt vinden als je nog meer wilt leren over Playwright. Er zal gefocust worden op de Typescript versie van Playwright en als IDE wordt VSCode gebruikt (gratis te downloaden).

Mocht je geïnteresseerd zijn in de andere talen, dan tref je vergelijkbare stappen aan onder het tabblad Node.js als je naar https://playwright.dev/ gaat. 

DE INSTALLATIE

Playwright wordt heel goed gedocumenteerd op de website van Playwright zelf: https://playwright.dev/docs/intro. Bij het hoofdstuk “Getting started” wordt beschreven hoe je Playwright kunt installeren, maar ook hoe je de testen kunt schrijven, draaien, genereren, etc.
Er zijn drie verschillende manieren om Playwright te installeren:

  1. Via een initialisatie commando
    Als je gebruik maakt van een Node.js library (bij Typescript en JavaScript), dan worden drie verschillende voorbeelden van het Command Line Interface (CLI) commando gegeven: npm; yarn; pnpm. In het onderstaande voorbeeld wordt npm gebruikt. Belangrijk is dat je dit commando uitvoert in de map waar je Playwright wilt installeren. Dus ga in de terminal eerst op zoek naar de juiste map. Typ in de terminal het volgende commando:
    • npm init playwright@latest
    • Als je dit commando uitvoert, dan worden een viertal vragen gesteld hoe je jouw installatie wilt hebben:
    • Welke taal Typescript of Javascript?
      In dit geval Typescript
    • Hoe heet je tests map (default “tests” of “e2e” als je al een tests map hebt)?
      De default “tests” is prima
    • Wil je Github Actions workflow toevoegen?
      Nee, want dat wordt niet gebruikt
    • Wil je de browsers installeren?
      Ja
    • Hierna worden alle benodigde onderdelen geïnstalleerd en worden de volgende bestanden aangemaakt:
      • playwright.config.ts
      • package.json
      • package-lock.json
      • tests/example.spec.ts
      • tests-examples/demo-todo-app.spec.ts
    • Nu is Playwright geïnstalleerd en kun je gelijk al een voorbeeld test laten uitvoeren. Door het volgende commando uit te voeren in de Playwright map:
      npx playwright test
  2. Door een extensie in VSCode: Playwright Test for VSCode
    VSCode voorziet in een extensie die de initialisatie voor jou uitvoert zonder dat je gebruikt hoeft te maken van de CLI. Hij stelt dezelfde vragen en installeert dezelfde bestanden als bij het initialiseren d.m.v. de CLI. Hoe je dit doet:
    • Installeer de extensie via het “Extenstions” tabblad in VSCod
    • Open de command pallete (View > Command Pallette / ctrl+shift+p)
    • Typ: Install Playwright
    • Nu wordt Playwright geïnstalleerd en is er een “Testing” tabblad bijgekomen. Hier kun je alle gedetecteerde testen vinden en kun je d.m.v. de UI je testen laten draaien of debuggen. Ook bij deze manier van installeren kun je gelijk een voorbeeld test laten uitvoeren. Mocht je al een project hebben aangemaakt d.m.v. CLI, dan kun je altijd achteraf nog de extensie installeren in VSCode om zo ook gebruik te kunnen maken van de UI om testen te draaien/debuggen.
  3. Handmatig door Playwright en de browsers zelf te installeren zonder init
    Deze manier geeft je alleen het minimale wat je nodig hebt, dus geen voorbeeld bestanden. Net als bij de initialisatie maak je hier gebruik van CLI. Ook hier is het belangrijk dat je in de juiste map staat in de terminal voordat je het commando uitvoert.
    • Installeer de laatste versie van Playwright
    • npm i -D @playwright/test 
    • Installeer de browsers 
    • npx playwright install 
    • Nu zijn alleen Playwright en de browsers geïnstalleerd. De testscripts, config file etc. zul je nu eerst zelf moeten schrijven voordat je een test kunt laten draaien. Mijn voorkeur gaat ernaar uit om Playwright volledig te installeren met alle extra bestanden erbij. Deze heb je vaak toch nodig en geven je meteen een vliegende start met voorbeelden. n.b. Het is verstandig om na de installatie VSCode te herstarten.

HET TESTSCRIPT

Playwright is geïnitialiseerd en er is een voorbeeld testscript (example.spec.ts) gegenereerd. Mocht je een eigen testscript willen maken, ga dan naar de map die je hebt toegewezen als test map, voeg een testfile toe met de naam die je geschikt vindt en laat deze eindigen met .spec.ts (of overschrijf het voorbeeld). De .spec.ts zorgt ervoor dat Playwright het herkent als een testscript.
Het voorbeeld testscript ziet er zo uit:

import { test, expect } from '@playwright/test'; 
  
test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => { 
  await page.goto('https://playwright.dev/'); 
  
  // Expect a title "to contain" a substring. 
  await expect(page).toHaveTitle(/Playwright/); 
  
  // create a locator 
  const getStarted = page.locator('text=Get Started'); 
  
  // Expect an attribute "to be strictly equal" to the value. 
  await expect(getStarted).toHaveAttribute('href', '/docs/intro'); 
  
  // Click the get started link. 
  await getStarted.click(); 
  
  // Expects the URL to contain intro. 
  await expect(page).toHaveURL(/.*intro/); 
});

Ik zal bovenstaand testscript globaal bij langs lopen en benoemen wat erin staat:

Er staat één test in gevolgd door een beschrijving van de test.
Verder is elke stap voorzien van een “await”. Dit zorgt ervoor dat de testen wachten totdat deze stap is uitgevoerd óf de time-out in bereikt. Dit is de manier van Playwright om ervoor te zorgen dat testen niet flaky worden doordat de benodigde elementen nog niet op de pagina zijn geladen.

Met page.locator() kun je specifieke elementen selecteren op de pagina zoals bv. een knop of een tekstveld. Daarna kun je aangeven wat je wilt doen met dit element zoals bv. .click() of .fill.

De expect is de manier om assertions uit te voeren. Tussen de haken direct na expect staat het element of onderdeel wat je wilt controleren en erna staat waarop je het wilt controleren. Op de pagina https://playwright.dev/docs/test-assertions#list-of-assertions staat een lijst met mogelijke assertions. In het onderstaande geval, wacht hij tot de pagina het woord “Playwright” in het title element heeft. Daarbij kun je kiezen voor een regular expression (regex) d.m.v. een /slash/ ervoor en erna te zetten of door een letterlijke string erin te zetten door het woord tussen “quotes” te plaatsen.

await expect(page).toHaveTitle(/Playwright/); 

TOT SLOT

Tot zover deze introductie van hoe je Playwright kunt gebruiken en waar je de nodige informatie kunt vinden. Zoals je hebt gezien is er heel veel uitleg te vinden op de site van Playwright zelf om te kunnen starten met deze tool.

Er is nog niet eens het topje van de ijsberg behandeld in dit blog. In toekomstige blogs wordt er nog verder op specifieke onderdelen in gegaan. Wil je meer weten over hoe Playwright ontstaan is en wat de voor- en nadelen van Playwright zijn, daar vertel ik over in dit blog.