Is Cypress of Playwright beter in het automatiseren van E2E testen? Welk van deze twee test frameworks moet ik kiezen? Dit zijn vragen die ik de laatste tijd vaak krijg. Om deze vraag te beantwoorden moet er dieper worden gekeken naar de succesfactoren van Cypress en Playwright.
Het vergelijken van beide test frameworks kan op meerdere punten. Ik beperk mij tot de basisfunctionaliteit zoals rapportage, documentatie, netwerkinteracties en mocking. Daarnaast zoom ik in op de unieke functionaliteiten van Cypress en Playwright.
Welk test framework is op welke punt de winnaar en is er überhaupt een duidelijke eindwinnaar aan te wijzen? Dat lees je in deze blog.
Goede rapportage voor inzichtelijke feedback
Inzicht in de testen en testresultaten is key. Zodra testen falen, moet het direct duidelijk zijn wat er misgaat en waardoor deze fout wordt veroorzaakt. Cypress biedt een betaalde dienst waarmee gebruikers toegang krijgen tot Cypress Dashboard. In dit dashboard worden alle metrieken van de uitgevoerde testruns opgeslagen en weergegeven. Denk hierbij aan doorlooptijd, flakiness percentage, top failures, enzovoort. Naast de video’s en screenshots kunnen de testruns met ‘test-replay’ worden afgespeeld in de browser. Doordat de gefaalde test stap voor stap kan worden doorlopen en de gebruiker gebruik kan maken van devTools, is de oorzaak vaak eenvoudig te achterhalen.
Zonder dashboard heeft de gebruiker de keuze uit Cypress Mocha-, Teamcity- of JUnit-reporters. Deze rapporten kunnen uitgebreid worden met screenshots en video’s. Echter het ontbreken van ‘test-replay’ en de missende inzage van de DOM en het netwerkverkeer maakt het debuggen een stuk lastiger.
Playwright biedt out-of-the-box een breed scala aan rapportagetools aan. Standaard heeft het al een uitgebreid HTML-rapport inclusief ‘trace-viewer’. Hiermee kan, net als bij Cypress, de testrun in de browser stap voor stap worden afgespeeld. Daarnaast ondersteunt Playwright als ook Cypress ‘test-annotations’ waarmee de rapporten eenvoudig verrijkt kunnen worden met extra informatie.
Cypress Dashboard is echt een unique selling point wat betreft rapportage. Echter hier hangt wel een prijskaartje aan. Het uitgebreide HTML-rapport van Playwright is vergelijkbaar met Cypress test-replay, maar het mist statistieken over meerdere testruns.
Netwerk en mocking
Hedendaagse moderne websites zijn gebouwd bovenop API’s. Het manipuleren en mocken van REST en GraphQL endpoints is dan ook een belangrijke functionaliteit in Cypress en Playwright.
Cypress biedt vanaf de eerste versies deze functionaliteit aan en is de afgelopen versies verder geëvolueerd. Het biedt nog meer handvatten in de aansturing van API ‘s zodat workarounds overbodig zijn voor het manipuleren en mocken van API’s.
In Cypress is deze functionaliteit erg goed uitgewerkt. Zo is in de testrunner zichtbaar wanneer welke API-calls plaatsvinden gedurende de testuitvoer. Tevens is het zichtbaar welke API-routes gemockt zijn en hoe vaak deze zijn aangeroepen. De ‘waits’ op API-calls worden gearceerd in de tesrunner weergegeven. Dit alles maakt het werken en debuggen van API-calls easy peasy in Cypress.
Uiteraard biedt ook Playwright deze functionaliteit van manipuleren en mocken van API ‘s aan. Hoewel de functionaliteit op hetzelfde niveau is als Cypress, is het debuggen een stuk lastiger. In de testrunner worden de API-calls op een aparte tab weergegeven. De samenhang tussen testacties als een button klik en API-call is hierdoor soms zoek. Zeker als een ‘wait’ op een API-call samen met een button klik in een ‘promise.all’ wordt gewrapt is het lastig om te achterhalen welke van de twee acties niet goed is uitgevoerd.
Documentatie en community
Niks is zo vervelend om urenlang het Internet af te struinen om een passend voorbeeld of een oplossing te vinden voor hetgeen wat geautomatiseerd dient te worden. Goede documentatie en een grote community helpen enorm om snel testen te schrijven.
Als Cypress een nieuwe feature toevoegt dan wordt er eerst de documentatie geschreven alvorens deze feature wordt ontwikkeld. Dit is terug te zien in de uitgebreide documentatie op de Cypress website. Hier vind je voorbeelden, uitleg over Cypress commando’s en best practices.
Playwright is de afgelopen jaren enorm ingelopen op het aanbieden van goede documentatie en voorbeelden. In het begin van Playwright was het erg summier en maakte het starten van een project met Playwright uitdagend.
Als de documentatie geen antwoord kan geven op de vraag dan is het fijn dat er terug kan worden gevallen op andere gebruikers met een hetzelfde soort probleem. In onderstaande afbeelding is te zien dat Cypress met 5,2 miljoen downloads populairder is dan Playwright met 3,5 miljoen downloads. Erg benieuwd naar komend jaar, ik verwacht dat Playwright verder inloopt op Cypress.
Deze cijfers tonen aan dat in de afgelopen jaren meer gebruikers Cypress gebruiken dan Playwright. Hoe meer gebruikers, hoe groter de kans om binnen de community een snel en passend antwoord op jouw vraag of probleem te vinden.
Af en toe is het nog wel zoeken naar een goed voorbeeld of een best-practise oplossing in Playwright, maar dit wordt met de dag beter al dan niet met de hulp van chatGPT.
De succesfactoren van Cypress
Component testing
Middels component testing worden individuele eenheden of componenten geïsoleerd van de rest van de applicatie getest om er zeker van te zijn dat ze functioneren zoals bedoeld. Bij het testen van componenten met Cypress kunnen testscripts worden geschreven waarmee het component onder verschillende ‘states’ en interacties kan worden getest. Zo kan bijvoorbeeld gebruikersinvoer worden gesimuleerd, de weergave en het gedrag van de component onder verschillende voorwaarden worden getest en kan worden geverifieerd dat het component de verwachte uitvoer produceert.
Playwright biedt ook component testing aan. Echter dit bevindt zich nog in een experimentele fase en is lang nog niet op het niveau van Cypress qua geboden functionaliteit en documentatie.
Plug-ins
Naast het testen op functionaliteit en betrouwbaarheid moeten applicaties ook worden getest op performance of toegankelijkheid (accessibility). Bestaande testing frameworks voor API- en UI-testen bieden vaak geen functionaliteit voor dit soort tests. Met als gevolg dat de testscripts van het begin af aan opnieuw moeten worden ontwikkeld. Cypress biedt hier een oplossing voor, namelijk plugins. Daarmee wordt de functionaliteit van Cypress uitgebreid. Nieuwe commando’s worden beschikbaar gesteld, ontbrekende functies worden toegevoegd en nog veel meer.
Cypress Dashboard
Zoals eerder genoemd in de toelichting op rapportage, is Cypress Dashboard een optionele betaalde cloudservice die verschillende functies biedt met betrekking tot projecten en test runs in Cypress. Het is een zeer nuttige en handige tool, vooral wanneer tests worden uitgevoerd in een CI/CD-pijplijn. Op het dashboard kun je aflezen hoelang tests duren, waarom ze al dan niet falen, en krijg je inzicht in trends over verschillende test runs.
De succesfactoren van Playwright
Browsercontext
Een browsercontext in een testframework verwijst naar de instantie waarin een browser opereert. Het bevat cache, cookies, local- en sessionstorage van de pagina welke wordt getest. Playwright creëert voor elke test een nieuwe browsercontext. Dit zorgt voor volledige testisolatie, omdat de testen niet beïnvloed kunnen worden door de browsercontext van een voorgaande test. Cypress reset alleen de browsercontext voor iedere test. Dit houdt in het herstellen van de browser ‘state‘ door het openen van een ‘about:blank’ pagina. Daarnaast worden cookies, local- en sessionstorage verwijderd. Hierdoor draaien de tests weliswaar in isolatie, maar niet zo volledig als in Playwright.
Het hebben van een ‘eigen’ browsercontext per test levert nog een groot voordeel op. Cypress kan de tests alleen uitvoeren in een enkel tabblad. Vaak is dit afdoende, maar niet als er interacties tussen verschillende rollen of delen van websites getest moeten worden, zoals bijvoorbeeld een chat-bot. Dit kan eenvoudig in Playwright door op het eerste tabblad de gebruiker vragen te laten stellen, terwijl op het tweede tabblad de virtuele klantenservice de antwoorden geeft. De interacties kunnen zelfs tussen verschillende websites plaatsvinden.
Cross browser
Het uitvoeren van testen in verschillende browsers is een cruciale stap om een consistente gebruikerservaring in verschillende browsers te garanderen. Conversie op een website daalt significant als de gebruikerservaring in een browser slecht is. Daarom is het van cruciaal belang om ervoor te zorgen dat applicaties soepel werken in verschillende browsers. Playwright kan testen uitvoeren op Chromium-, Webkit- en Firefox-browsers, maar ook op Google Chrome en Microsoft Edge. Daarnaast kan het ook worden uitgevoerd op geëmuleerde tablets en mobiele apparaten.
Cypress biedt ook cross-browser testing aan echter dit bevindt zich in een experimentele fase. Dit is bij lange na nog niet het niveau van Playwright, Cypress maakt zelfs gebruik van de Playwright Webkit browser.
Parallel en sharding
Standaard voert Playwright de testen parallel uit. Om dat te bereiken worden meerdere processen tegelijkertijd uitgevoerd. Deze processen zijn OS-processen die onafhankelijk worden uitgevoerd en worden aangestuurd door de testrunner. Playwright biedt verschillende configuratie opties waarmee delen van de testsuite parallel of serieel kunnen worden uitgevoerd.
Een andere functie, als je je testsuite wilt versnellen, is de shard-configuratie. Deze configuratie maakt het mogelijk de uitvoering van een spec file met daarin meerdere testen over verschillende machines te verdelen. Deze configuratie helpt bij de uitvoering van testen in de CI/CD pipeline. De doorlooptijd is nog korter, waardoor feedback sneller beschikbaar is.
Cypress kan de testen alleen parallel draaien als de betaalde cloudservice wordt afgenomen. Dit heeft als voordeel dat Cypress een algoritme toepast, zodat de testen op de snelst mogelijk manier worden uitgevoerd. Dit algortime stelt Cypress in staat om testen te prioriteren die foutgevoelig of flaky zijn gebleken in eerdere testruns.
De winnaar is….
De keuze voor een test framework moet niet worden genomen op basis van een inspirerende presentatie op een conferentie, een blog, eerdere ervaringen of ChatGPT.
Cypress en Playwright bieden verschillende benaderingen om geautomatiseerde testen op te zetten, elk met hun eigen voor- en nadelen. Elk voor- en nadeel van het test framework moet zorgvuldig worden afgewogen. Het is essentieel om voortdurend af te vragen welke (unieke) eigenschappen van het test framework het beste aansluiten bij de behoeften van het team en hetgeen wat geautomatiseerd moet worden.
Door elke optie zorgvuldig af te wegen, kan er een weloverwogen beslissing worden genomen over welke tool het beste aansluit bij de behoeften van het team. Dat test framework wordt dan de winnaar voor jullie team!
