17 tips en best practices voor Cypress

Cypress is een op JavaScript gebaseerd end-to-end testframework dat is ontworpen om ontwikkelaars te helpen bij het schrijven en uitvoeren van tests voor hun webapplicaties. In tegenstelling tot veel andere testoplossingen, draait Cypress rechtstreeks in de browser, wat zorgt voor consistentere en betrouwbaardere tests.

Hieronder volgen een 17-tal tips en best practices:

1: Het Cypress-team onderhoudt de Real World App (RWA), een full-stack voorbeeldtoepassing die best practices en schaalbare strategieën met Cypress demonstreert in praktische en realistische scenario’s. De RWA bereikt volledige codedekking met end-to-end-tests voor meerdere browsers en apparaatgroottes, maar omvat ook visuele regressietests, API-tests, unit-tests en voert ze allemaal uit in een efficiënte CI-pijplijn. De app is gebundeld met alles wat je nodig hebt, je hoeft alleen maar de repository te klonen en te beginnen met testen.

2: Vermijd het gebruik van vaste time-outs: probeer in plaats van cy.wait(1000) te vertrouwen op de ingebouwde mogelijkheid van Cypress om opdrachten opnieuw uit te voeren totdat ze slagen. Gebruik bijvoorbeeld cy.get(‘selector’).should(‘be.visible’) om ervoor te zorgen dat een element zichtbaar wordt.

3: Gebruik spaarzaam custom commands: hoewel het verleidelijk is om complexe stromen te abstraheren in aangepaste opdrachten, kan het uw tests moeilijker maken om te lezen als ze te veel worden gebruikt. Alleen abstracte terugkerende en complexe acties.

4: Groepsgerelateerde tests: Gebruik describe en context om gerelateerde tests samen te groeperen. Dit verbetert de leesbaarheid en organiseert uw testsuite.

5: Gebruik beforeEach en afterEach verstandig: bewerkingen voor het opzetten en afbreken kunnen in beforeEach en afterEach hooks worden geplaatst. Dit zorgt ervoor dat elke testcase onafhankelijk is en in elke willekeurige volgorde kan worden uitgevoerd.

6: Houd tests atomisch en onafhankelijk: elke test moet zelfstandig kunnen worden uitgevoerd zonder afhankelijk te zijn van andere tests. Dit maakt het gemakkelijker om problemen te identificeren wanneer ze zich voordoen.

7: Gebruik data-attributen voor selectors: in plaats van te vertrouwen op CSS-klassen of andere attributen die kunnen veranderen vanwege visuele updates, gebruikt u data-* attributen om elementen te selecteren. Bijvoorbeeld data-cy=”submit-knop”.

8: Omgaan met Single Page Application (SPA)-overgangen: gebruik bij het navigeren binnen SPA’s cy.url() of cy.hash() om ervoor te zorgen dat de applicatie klaar is met navigeren.

9: Vermijd voorwaardelijke tests: uw tests moeten deterministisch zijn. Vermijd het schrijven van tests zoals “als dit element aanwezig is, doe dan dit …”. Als je merkt dat je dit doet, overweeg dan of er een manier is om de omgeving of setup voorspelbaarder te maken.

10: Staat opschonen: ruim elke staat op die tijdens uw tests kan worden gewijzigd. Dit kunnen gebruikers, instellingen of database-items zijn. U kunt dit doen met behulp van de hooks beforeEach en afterEach.

11: Netwerkverwerking: Gebruik cy.server() en cy.route() (of cy.intercept() in nieuwere versies) om netwerkverzoeken te stoppen en te bespioneren. Dit geeft u meer controle over het gedrag en de timing van netwerkinteracties.

12: Aliassen gebruiken: Gebruik .as() om aliassen te maken voor elementen, routes of armaturen. Dit verbetert de leesbaarheid en maakt herbruikbaarheid mogelijk.

13: Afzonderlijke configuratie: gebruik cypress.json voor globale configuraties en omgevingsvariabelen voor gevoelige of dynamische gegevens.

14: Beperk het gebruik van globale variabelen: hoewel het verleidelijk kan zijn om globale variabelen in uw tests te gebruiken, kan dit leiden tot onvoorspelbaar testgedrag. Gebruik in plaats daarvan context (this) of het ingebouwde commando .as() van Cypress om de status tussen hooks en tests te delen.

15: Parallelle uitvoering: Naarmate uw testsuite groeit, kunt u overwegen om de mogelijkheid van Cypress te gebruiken om tests parallel uit te voeren om de uitvoeringstijd te versnellen. Dit kan met name voordelig zijn bij integratie met CI/CD-pijplijnen.

16: Controleer de onvolkomenheid van tests: zelfs met de best practices kunnen end-to-end tests soms onstabiel zijn. Bewaak testafwijkingen en als een test met tussenpozen zonder duidelijke reden mislukt, overweeg dan om de logica ervan te herzien of deze mogelijk te markeren voor handmatige tests.

17: Blijf op de hoogte van updates: Cypress is een actief onderhouden en evoluerende tool. Controleer regelmatig hun documentatie en updates om nieuwe functies of verbeteringen te benutten.