Blog

Cypress.IO dé ideale klusjesman

Auteur Joep Joep is Quality Engineer bij Trivento en gaat geen uitdaging uit de weg. Hierbij geniet Joep van geautomatiseerd testen, infrastructuur en verbinden.

Als quality engineers schrijven wij vaak twee soorten tests. API- en UI-testen. Wat zou het fijn zijn als deze tests gecombineerd kunnen worden. Er is een tool die daarbij kan helpen; Cypress.IO. Is dit te mooi om waar te zijn of biedt Cypress echt de uitkomst? Je leest het in deze blog.

API-testen 

Laten we beginnen met een korte toelichting op de verschillende manieren van testen. Een API-test valideert Application Programming Interfaces (API's). Het belangrijkste doel daarmee is om de functionaliteit, betrouwbaarheid en prestatie van interfaces te controleren. API’s worden gezien als de primaire interface voor bedrijfslogica. Daarom is het testen van deze API’s essentieel.

UI-testen 

De andere variant is UI-testen. Dit testtype controleert de User Interface (UI) van de software. De UI van een website, app of programma is alles wat een gebruiker ziet op zijn scherm. Het doel van UI-testen is ervoor te zorgen dat de functionaliteiten en de samenhang van de de verschillende schermen aan de gestelde specificaties voldoen.

Vaak worden hiervoor verschillende testtools gebruikt. Bijvoorbeeld Postmen en Rest assured voor API testen.  Voor UI wordt vaak een testing framework gekozen gebaseerd op Webdriver.

Maar wat als met dezelfde tool zowel UI- als API-testen kunnen worden uitgevoerd? API-tests worden visueel inzichtelijk gemaakt en makkelijk te integreren in de Continuous Integration / Continuous Deployment (CI/CD) pipeline.

“Is het moeilijk om precies te weten wat er mis is gegaan als een test faalt?” 

Vaak worden geautomatiseerde UI-testen als moeilijk en lastig ervaren. Veel gehoorde klachten gaan over de onstabiliteit, timings-problemen of de hoeveelheid false positives die naar voren komen. Dit gaat zo ver dat het geregeld als argument gebruikt wordt om geen geautomatiseerde testen uit te voeren. 

Cypress.IO als oplossing 

Cypress brengt hier verandering in. Deze tool gaat uit van een testrunner die  wacht totdat elementen en animaties op een pagina zijn geladen. En dat geheel automatisch. Vul dit aan met een debugger dan is het mogelijk om de testen stap voor stap te doorlopen. De foutopsporing wordt daarmee kinderlijk eenvoudig. 

Wat verder positief opvalt bij Cypress, is de documentatie. Waar normaal gesproken Stack Overflow uitkomst biedt bij problemen, is dit bij Cypress bijna altijd de eigen documentatie. Heldere voorbeelden duiden hoe de meest voorkomende problemen getackeld kunnen worden. Denk hierbij aan inloggen, mocking en het toepassen van assertions (Mocha en Chai).

Zo kan de lijst worden aangevuld met ingebouwde functionaliteiten voor: cross browser support, automatische screenshots en video's van de test runs en toegang tot DevTools

Het mooiste van dit alles? Cypress biedt deze functionaliteit niet alleen voor UI-testen, maar ook voor API testen. Daarmee is Cypress uniek!

De API testen zijn inzichtelijk in testrunner, daarmee is het gemakkelijk om API-tests te debuggen. Een ‘400 bad request’ kan hierdoor snel worden omgezet in een ‘200 OK’. 

Testresultaten als inzicht om onbetrouwbare resultaten weg te filteren 

In mijn voorgaande blog benoemde ik al dat reporting een belangrijk onderdeel is bij het opzetten van een testing framework. Het Cypress Dashboard is een optioneel betaalde cloudservice die verschillende functies biedt met betrekking tot projecten en test runs in Cypress

Het is een erg nuttige en handige tool zeker wanneer de testen in een CI/CD pipeline worden gedraaid. Het dashboard biedt namelijk een visuele weergave van het aantal mislukte, geslaagde, in behandeling zijnde en overgeslagen testen. Hierin is af te lezen hoe lang tests duren, waarom ze al dan niet falen en krijg je inzicht in trends over verschillende test runs.

Door het inzicht in testresultaten kunnen de onbetrouwbare en langzame testen eruit worden gefilterd en verbeterd worden. 

Naast de reporting zorgt de dashboard-service ervoor dat  testen parallel kunnen worden uitgevoerd. Dit verkort de totale doorlooptijd enorm wat leidt tot snellere feedback in de kwaliteit van de applicatie.  Kortom een een must-have, zeker als de testen in een CI/CD pipeline worden uitgevoerd.

Cypress functionaliteiten uitbreiden? Gebruik plugins! 

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 breidt  de functionaliteit van Cypress uit. Nieuwe commando's worden beschikbaar gesteld, ontbrekende functies worden toegevoegd en nog veel meer. Als voorbeeld noem ik graag de  `cypress-har-generator`, deze genereert  zogenoemde ‘HAR’ bestanden welke als basis dienen voor de performance testen in Gatling.

Het testen van accessibility aan de hand van de  ‘A11Y’ standaarden kan middels ‘Cypress-axe’. De A11Y standaard beschrijft waar een een applicatie aan moet voldoen. Met deze standaard is de applicatie bruikbaar voor gebruikers die hinder ondervinden aan bijvoorbeeld kleurenblindheid, het gehoor of slechtziendheid. Hiervoor kan ook onze  favoriet binnen Trivento : ‘cypress-audit’ worden gebruikt. Deze maakt gebruik van Lighthouse om een  audit uit te voeren op de applicatie voor performance, toegankelijkheid, progressive web-apps of SEO. 

Het uitbreiden van bestaande testscripts met plugins is tijdbesparend. Als je dit doet, kun je meer maar ook zeker beter testen. Het resultaat zal niet tegenvallen. 

Final thoughts, Cypress de ideale klusjesman? 

Continue zoeken wij binnen Trivento naar tooling die ervoor zorgen dat het opleveren van software zo efficiënt en effectief mogelijk gaat. In het geval van Cypress wordt dit bereikt door de combinatie van API- en UI- testen, uitgebreide reporting, parallel uitvoeren van tests en de uitbreiding met plugins.  Het combineren van API- en UI -testen in één testing framework heeft als voordeel dat er geen verschillende testscripts meer nodig zijn. Dit vereenvoudigt het onderhoud van de testen aanzienlijk. Een treffend voorbeeld vind ik de toepassing waarbij API scripts dienen voor het inladen van de testdata voor de UI-testen. Of andersom, een integratietest waarbij de applicatie wordt doorlopen middels UI-testscripts. De API’s? Die dienen als controlestap. 

Dit maakt van Cypress de ideale klusjesman voor geautomatiseerd testen! 

Het klinkt misschien als een  een promo-praatje over Cypress.IO, maar niets is minder waar. Ik beschrijf dit volledig uit mijn ervaringen, dit wordt gedeeld in conferenties, meetups en blogs. Al deze ervaringen neemt Trivento mee in de vergelijking of Cypress nog steeds het ‘prefered’ testing framework moet zijn of dat het wellicht een runner-up is. 

Ondanks de uitstekende documentatie, de geweldige capaciteiten om te debuggen wordt mijn computer soms nog onterecht vervloekt omdat een bepaalde test maar niet groen wil worden. Gelukkig zijn er binnen Trivento genoeg vakidioten om dit soort issues te helpen oplossen.

Dit artikel delen?

Ben je opzoek naar meer?

Bekijk hier een selectie van onze ebooks.

De bouwstenen van een schaalbaar businessmodel

Download nu

Van traditionele organisaties naar digitale winnaars

Download nu

Digital Business met Microservices

Download nu