Wat altijd een gemis was in Playwright en waar Cypress een stapje voor had was een UI om je testen in te draaien. Nu was het met de VSCode extension (Playwright test for VSCode) wel mogelijk om door middel van een UI de testen te draaien of te debuggen, maar er was nooit een dedicated optie voor zoals in Cypress. Daar is nu verandering in gekomen met de laatste update in Playwright v1.32. Disclaimer: Dit is volledig functioneel, maar nog wel in de preview fase. Er kunnen nog wijzigingen op plaatsvinden.
WAT ZIT ER ALLEMAAL IN?
De nieuwe UI mode is in twee hoofdgroepen te verdelen. Links (rood) staat de test runner waar je de testen kunt selecteren en rechts (blauw) staat de trace viewer waar je de uitvoering van de testen kunt zien.
Als we eerst kijken naar het linkerdeel, dan zien we een aantal overeenkomsten, maar ook verschillen met de test explorer uit VSCode. Ik loop het scherm van boven naar beneden langs.
DE OPTIES
Helemaal bovenin zien we drie opties:
- Dark mode / light mode toggle waarmee je de viewer kunt veranderen in de donkere of lichte modus
- Refresh knop die de lijst met testen ververst
- Terminal knop, die vervangt de trace viewer aan de rechterkant voor de terminal
HET FILTER
Daaronder is het filter en projecten deel hier kun je kiezen voor het filteren op specifieke tags of teksten in testnamen of op testen die een bepaalde status hebben (passed, failed, skipped). Als je ervoor kiest om meerdere browsers te selecteren, dan zullen er browser specifieke testen in de lijst met testen geplaatst worden (zie afbeelding “Playwright UI mode tests” bij het kopje “De testen”).
DE TESTEN
Als laatste zien we de lijst met (gefilterde) testen en hoeveel er daarvan geslaagd zijn. Per test is het mogelijk om deze te draaien (Run, het driehoekje), te kijken in VSCode in de code van de test (Open in VS Code, het foldertje) en om de watch mode aan te zetten (Watch, het oogje). Watch mode zorgt ervoor dat wanneer je je test aanpast in VSCode, deze na het opslaan van de code gelijk wordt gedraaid door de test runner, zodat je gelijk het resultaat kunt zien van jouw aanpassing.
DE TRACE VIEWER
Aan de rechterkant zien we de oude vertrouwde trace viewer. Deze bestaat al lange tijd in Playwright en is onmisbaar bij het debuggen van gefaalde testen. Het feit dat dit nu samen met de test runner in één applicatie zit scheelt ontzettend veel tijd bij het maken van (nieuwe) testscripts, omdat je niet elke falende test de trace viewer hoeft op te starten, maar gewoon realtime het gevolg van jouw aanpassingen kunt zien.
De trace viewer ga ik nu niet dieper op in, want die verdient een eigen blog.
HOE INSTALLEER JE HET
In twee eenvoudige stappen kun je gebruik maken van deze nieuwe feature in Playwright.
Stap 1: Zorg dat je tenminste versie 1.32 hebt geïnstalleerd
npm install @playwright/test@latestof
npm install @playwright/test@1.32Stap 2: Voeg aan het commando om je testen mee te draaien –ui toe
npx playwright test --uiDat is het, meer hoef je niet te doen.
TL;DR
Ik zal bovenstaand testscript globaal bij langs lopen en benoemen wat erin staat:De Playwright UI mode biedt zeeën van nieuwe mogelijkheden om je testen nog eenvoudiger te kunnen onderhouden. Zo is er:
- Test runner en trace viewer in één
- Filter voor de testen
- Browser selectie
- Realtime testen volgen
- Snelkoppelingen naar de testscripts
- Watch mode om direct het resultaat van jouw aanpassingen zien
Nu zegt een plaatje meer dan duizend woorden, maar dat vind ik niet genoeg. Dus ik heb een filmpje toegevoegd aan deze post met een demo van Debbie O’Brien samen met Andrey Lushnikov van het Playwright dev team waarin ze in 10 minuten tijd deze nieuwe UI mode laten zien.
