Cypress: De Ultieme Gids voor End-to-End Testing voor Webapplicaties

In het snel evoluerende web development landschap van vandaag, is het waarborgen van de kwaliteit en betrouwbaarheid van webapplicaties van het grootste belang. End-to-End (E2E) testing speelt een cruciale rol bij het verifiëren dat alle componenten van een applicatie naadloos samenwerken vanuit het perspectief van de gebruiker. Cypress is uitgegroeid tot een toonaangevend E2E testing framework, dat een ontwikkelaarvriendelijke ervaring, krachtige functies en uitstekende prestaties biedt. Deze uitgebreide gids leidt u door alles wat u moet weten om aan de slag te gaan met Cypress en uw webapplicaties effectief te testen.

Wat is Cypress?

Cypress is een next-generation front-end testing tool gebouwd voor het moderne web. In tegenstelling tot traditionele testing frameworks die tests uitvoeren in een browser, werkt Cypress rechtstreeks in de browser, waardoor u ongeëvenaarde controle en zichtbaarheid krijgt over het gedrag van uw applicatie. Het is ontworpen om snel, betrouwbaar en gemakkelijk te gebruiken te zijn, waardoor het een populaire keuze is onder ontwikkelaars en QA engineers wereldwijd. Cypress is geschreven in JavaScript en wordt uitgevoerd binnen de browser, waardoor het zeer performant is en ongeëvenaarde toegang biedt tot de internals van de applicatie.

Belangrijkste Voordelen van het Gebruik van Cypress

• Ontwikkelaarvriendelijk: Cypress biedt een schone en intuïtieve API, waardoor het gemakkelijk is om tests te schrijven en te debuggen.
• Time Travel: Cypress maakt snapshots van de status van uw applicatie tijdens elke testopdracht, waardoor u terug in de tijd kunt stappen en precies kunt zien wat er op een bepaald moment is gebeurd.
• Real-Time Reloads: Cypress wordt automatisch opnieuw geladen wanneer u wijzigingen aanbrengt in uw tests, waardoor u direct feedback krijgt.
• Automatisch Wachten: Cypress wacht automatisch tot elementen zichtbaar of interactief worden voordat acties worden uitgevoerd, waardoor expliciete waits niet meer nodig zijn.
• Netwerk Controle: Cypress stelt u in staat om network requests en responses te stubben, waardoor u verschillende scenario's kunt simuleren en de error handling van uw applicatie kunt testen.
• Debuggability: Cypress biedt uitstekende debugging tools, waaronder een krachtige debugger en gedetailleerde foutmeldingen.
• Cross-Browser Testing: Cypress ondersteunt meerdere browsers, waaronder Chrome, Firefox, Edge en Electron.
• Headless Testing: Voer tests uit in headless mode voor snellere uitvoering in CI/CD omgevingen.
• Ingebouwde Assertions: Cypress biedt een uitgebreide set ingebouwde assertions om het verwachte gedrag van uw applicatie te verifiëren.

Installatie en Setup

1. Voorwaarden: Zorg ervoor dat u Node.js en npm (Node Package Manager) op uw systeem hebt geïnstalleerd. U kunt ze downloaden van de officiële Node.js website.
2. Installeer Cypress: Open uw terminal of command prompt, navigeer naar uw project directory en voer de volgende opdracht uit:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Open Cypress: Zodra de installatie is voltooid, kunt u de Cypress Test Runner openen door het volgende uit te voeren:

            npx cypress open
            

              
                Copy
              
            
          

Deze opdracht start de Cypress Test Runner, die een grafische interface biedt voor het uitvoeren en debuggen van uw tests.

Uw Eerste Cypress Test Schrijven

Laten we een eenvoudige test maken om te verifiëren dat de homepage van een website correct laadt. Maak een nieuw bestand met de naam `example.cy.js` in de `cypress/e2e` directory van uw project.

            
// cypress/e2e/example.cy.js

describe('Mijn Eerste Test', () => {
  it('Bezoekt de Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Laten we deze test eens nader bekijken:

• `describe()`: Definieert een test suite, een verzameling gerelateerde tests.
• `it()`: Definieert een individuele test case binnen de test suite.
• `cy.visit()`: Navigeert naar de opgegeven URL.
• `cy.contains()`: Vindt een element dat de opgegeven tekst bevat.
• `.click()`: Klikt op het geselecteerde element.
• `cy.url()`: Haalt de huidige URL van de pagina op.
• `.should()`: Maakt een assertion over de status van de applicatie.
• `cy.get()`: Selecteert een element met behulp van een CSS selector.
• `.type()`: Typt tekst in het geselecteerde element.
• `.should('have.value', 'fake@email.com')`: Beweert dat de waarde van het element gelijk is aan 'fake@email.com'.

Voer deze test uit in de Cypress Test Runner om hem in actie te zien. U zou moeten zien dat de browser naar de Cypress Kitchen Sink website navigeert, op de "type" link klikt en de URL verifieert.

Cypress Commando's

Cypress biedt een breed scala aan commando's voor interactie met uw applicatie. Hier zijn enkele van de meest gebruikte commando's:

• `cy.visit(url)`: Navigeert naar de opgegeven URL.
• `cy.get(selector)`: Selecteert een element met behulp van een CSS selector.
• `cy.contains(content)`: Selecteert een element dat de opgegeven tekst bevat.
• `cy.click()`: Klikt op het geselecteerde element.
• `cy.type(text)`: Typt tekst in het geselecteerde element.
• `cy.clear()`: Verwijdert de inhoud van een input of textarea element.
• `cy.submit()`: Verzendt een formulier.
• `cy.check()`: Vinkt een checkbox of radio button aan.
• `cy.uncheck()`: Vinkt een checkbox uit.
• `cy.select(value)`: Selecteert een optie uit een dropdown.
• `cy.scrollTo(position)`: Scrolt de pagina naar de opgegeven positie.
• `cy.trigger(event)`: Activeert een DOM event op het geselecteerde element.
• `cy.request(url, options)`: Doet een HTTP request naar de opgegeven URL.
• `cy.intercept(route, handler)`: Intercepteert HTTP requests die overeenkomen met de opgegeven route.
• `cy.wait(time)`: Wacht gedurende de opgegeven hoeveelheid tijd.
• `cy.reload()`: Laadt de huidige pagina opnieuw.
• `cy.go(direction)`: Navigeert naar de vorige of volgende pagina in de browser history.
• `cy.url()`: Haalt de huidige URL van de pagina op.
• `cy.title()`: Haalt de titel van de pagina op.
• `cy.window()`: Haalt het window object op.
• `cy.document()`: Haalt het document object op.
• `cy.viewport(width, height)`: Stelt de viewport size in.

Dit zijn slechts enkele van de vele commando's die beschikbaar zijn in Cypress. Raadpleeg de Cypress documentatie voor een complete lijst van commando's en hun opties.

Assertions in Cypress

Assertions worden gebruikt om het verwachte gedrag van uw applicatie te verifiëren. Cypress biedt een uitgebreide set ingebouwde assertions die u kunt gebruiken om de status van elementen, de URL, de titel en meer te controleren. Assertions worden gekoppeld aan Cypress commando's met behulp van de `.should()` methode.

Hier zijn enkele veelvoorkomende assertion voorbeelden:

• `.should('be.visible')`: Beweert dat een element zichtbaar is.
• `.should('not.be.visible')`: Beweert dat een element niet zichtbaar is.
• `.should('be.enabled')`: Beweert dat een element is ingeschakeld.
• `.should('be.disabled')`: Beweert dat een element is uitgeschakeld.
• `.should('have.text', 'verwachte tekst')`: Beweert dat een element de opgegeven tekst heeft.
• `.should('contain', 'verwachte tekst')`: Beweert dat een element de opgegeven tekst bevat.
• `.should('have.value', 'verwachte waarde')`: Beweert dat een element de opgegeven waarde heeft.
• `.should('have.class', 'verwachte class')`: Beweert dat een element de opgegeven class heeft.
• `.should('have.attr', 'attribute name', 'verwachte waarde')`: Beweert dat een element de opgegeven attribute en waarde heeft.
• `.should('have.css', 'css property', 'verwachte waarde')`: Beweert dat een element de opgegeven CSS property en waarde heeft.
• `.should('have.length', verwachte lengte)`: Beweert dat een element de opgegeven lengte heeft (bijv. het aantal elementen in een lijst).

U kunt ook custom assertions maken om aan uw specifieke behoeften te voldoen.

Best Practices voor het Schrijven van Cypress Tests

Het volgen van best practices kan u helpen om meer onderhoudbare, betrouwbare en efficiënte Cypress tests te schrijven. Hier zijn enkele aanbevelingen:

• Schrijf Duidelijke en Beknopte Tests: Elke test moet zich richten op een specifieke functionaliteit of scenario. Vermijd het schrijven van overdreven complexe tests die moeilijk te begrijpen en te onderhouden zijn.
• Gebruik Betekenisvolle Testnamen: Geef uw tests beschrijvende namen die duidelijk aangeven wat ze testen.
• Vermijd Hardcoding van Waarden: Gebruik variabelen of configuratiebestanden om waarden op te slaan die in de loop van de tijd kunnen veranderen.
• Gebruik Custom Commando's: Maak custom commando's om herbruikbare logica in te kapselen en uw tests leesbaarder te maken.
• Isoleer Tests: Elke test moet onafhankelijk zijn van andere tests. Vermijd het vertrouwen op de status van de applicatie van eerdere tests.
• Cleanup na Tests: Reset de status van de applicatie na elke test om ervoor te zorgen dat volgende tests vanaf een schone lei beginnen.
• Gebruik Data Attributen: Gebruik data attributen (bijv. `data-testid`) om elementen in uw tests te selecteren. Data attributen veranderen minder snel dan CSS classes of ID's, waardoor uw tests beter bestand zijn tegen veranderingen in de UI.
• Vermijd Expliciete Waits: Cypress wacht automatisch tot elementen zichtbaar of interactief worden. Vermijd het gebruik van expliciete waits (bijv. `cy.wait()`) tenzij absoluut noodzakelijk.
• Test User Flows: Focus op het testen van user flows in plaats van individuele componenten. Dit helpt u ervoor te zorgen dat uw applicatie correct werkt vanuit het perspectief van de gebruiker.
• Voer Regelmatig Tests Uit: Integreer Cypress tests in uw CI/CD pipeline en voer ze regelmatig uit om bugs vroeg in het development proces op te sporen.

Geavanceerde Cypress Technieken

Stubbing en Mocking

Cypress stelt u in staat om network requests en responses te stubben, waardoor u verschillende scenario's kunt simuleren en de error handling van uw applicatie kunt testen. Dit is vooral handig voor het testen van functies die afhankelijk zijn van externe API's of services.

Om een network request te stubben, kunt u het `cy.intercept()` commando gebruiken. De onderstaande code stubt bijvoorbeeld een GET request naar `/api/users` en retourneert een mock response:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

U kunt vervolgens wachten op het onderschepte request met behulp van `cy.wait('@getUsers')` en verifiëren dat uw applicatie de mock response correct verwerkt.

Werken met Local Storage en Cookies

Cypress biedt commando's voor interactie met local storage en cookies. U kunt deze commando's gebruiken om local storage en cookies in uw tests in te stellen, op te halen en te verwijderen.

Om een local storage item in te stellen, kunt u het `cy.window()` commando gebruiken om toegang te krijgen tot het window object en vervolgens de `localStorage.setItem()` methode gebruiken. Bijvoorbeeld:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

Om een local storage item op te halen, kunt u het `cy.window()` commando gebruiken en vervolgens de `localStorage.getItem()` methode gebruiken. Bijvoorbeeld:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

Om een cookie in te stellen, kunt u het `cy.setCookie()` commando gebruiken. Bijvoorbeeld:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

Om een cookie op te halen, kunt u het `cy.getCookie()` commando gebruiken. Bijvoorbeeld:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

File Uploads Afhandelen

Cypress biedt een plugin genaamd `cypress-file-upload` die file uploads in uw tests vereenvoudigt. Om de plugin te installeren, voert u de volgende opdracht uit:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

Voeg vervolgens de volgende regel toe aan uw `cypress/support/commands.js` bestand:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

U kunt vervolgens het `cy.uploadFile()` commando gebruiken om een file te uploaden. Bijvoorbeeld:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Werken met IFrames

Het testen van IFrames kan lastig zijn, maar Cypress biedt een manier om ermee te interageren. U kunt het `cy.frameLoaded()` commando gebruiken om te wachten tot een IFrame is geladen, en vervolgens het `cy.iframe()` commando gebruiken om het document object van de IFrame op te halen.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress en Continuous Integration/Continuous Deployment (CI/CD)

Het integreren van Cypress in uw CI/CD pipeline is essentieel voor het waarborgen van de kwaliteit van uw applicatie. U kunt Cypress tests uitvoeren in headless mode in uw CI/CD omgeving. Hier is hoe:

1. Installeer Cypress: Zorg ervoor dat Cypress is geïnstalleerd als een dependency in uw project.
2. Configureer CI/CD: Configureer uw CI/CD pipeline om Cypress tests uit te voeren na elke build.
3. Voer Cypress Headlessly Uit: Gebruik het `cypress run` commando om Cypress tests in headless mode uit te voeren.

Voorbeeld CI/CD configuratie (met behulp van GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Deze configuratie voert Cypress tests uit wanneer code wordt gepusht naar de `main` branch of wanneer er een pull request wordt gemaakt tegen de `main` branch. De `cypress-io/github-action` action vereenvoudigt het proces van het uitvoeren van Cypress tests in GitHub Actions.

Cypress Tests Debuggen

Cypress biedt uitstekende debugging tools om u te helpen bij het identificeren en oplossen van problemen in uw tests. Hier zijn enkele tips voor het debuggen van Cypress tests:

• Gebruik de Cypress Test Runner: De Cypress Test Runner biedt een visuele interface voor het uitvoeren en debuggen van uw tests. U kunt stap voor stap door uw tests lopen, de status van de applicatie inspecteren en gedetailleerde foutmeldingen bekijken.
• Gebruik het `cy.pause()` Commando: Het `cy.pause()` commando pauzeert de uitvoering van uw test en stelt u in staat om de status van de applicatie te inspecteren in de developer tools van de browser.
• Gebruik het `cy.debug()` Commando: Het `cy.debug()` commando print het geselecteerde element naar de console, waardoor u de eigenschappen en attributen kunt inspecteren.
• Gebruik de Developer Tools van de Browser: De developer tools van de browser bieden een schat aan informatie over uw applicatie, waaronder de DOM, network requests en console logs.
• Lees Foutmeldingen Zorgvuldig: Cypress biedt gedetailleerde foutmeldingen die u kunnen helpen bij het identificeren van de oorzaak van de fout. Let op de foutmelding en de stack trace.

Cypress vs. Andere Testing Frameworks

Hoewel Cypress een krachtig end-to-end testing framework is, is het essentieel om te begrijpen hoe het zich verhoudt tot andere populaire opties. Hier is een kort overzicht:

• Selenium: Selenium is een veelgebruikt automation testing framework. Hoewel flexibel en ondersteuning voor meerdere talen, kan het complex zijn om in te stellen en te onderhouden. Cypress biedt een eenvoudigere en meer ontwikkelaarvriendelijke ervaring, vooral voor JavaScript-gebaseerde applicaties.
• Puppeteer: Puppeteer is een Node library die een high-level API biedt voor het besturen van headless Chrome of Chromium. Het is uitstekend voor scraping en het automatiseren van browser taken, maar kan meer handmatige configuratie vereisen in vergelijking met Cypress voor end-to-end testing.
• Playwright: Playwright is een ander cross-browser automation framework ontwikkeld door Microsoft. Het vertoont overeenkomsten met Puppeteer, maar biedt bredere browser ondersteuning. Cypress heeft een unieke time-traveling debugger en een meer geïntegreerde testing ervaring.

De keuze van het framework is afhankelijk van de specifieke behoeften en vereisten van uw project. Cypress is een uitstekende keuze voor moderne webapplicaties die snelle, betrouwbare en ontwikkelaarvriendelijke end-to-end testing vereisen.

Real-World Voorbeelden van Cypress in Actie

Laten we een paar real-world voorbeelden bekijken van hoe Cypress kan worden gebruikt om verschillende soorten webapplicaties te testen:

Een E-commerce Applicatie Testen

U kunt Cypress gebruiken om verschillende user flows in een e-commerce applicatie te testen, zoals:

• Zoeken naar producten
• Producten toevoegen aan de winkelwagen
• Afrekenen en een bestelling plaatsen
• Accountinstellingen beheren

Hier is een voorbeeld van een Cypress test die verifieert dat een gebruiker succesvol een product aan zijn winkelwagen kan toevoegen:

            
it('Voegt een product toe aan de winkelwagen', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Een Social Media Applicatie Testen

U kunt Cypress gebruiken om user interacties in een social media applicatie te testen, zoals:

• Een nieuw bericht maken
• Een bericht liken
• Reageren op een bericht
• Andere gebruikers volgen

Hier is een voorbeeld van een Cypress test die verifieert dat een gebruiker succesvol een nieuw bericht kan maken:

            
it('Maakt een nieuw bericht', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hallo wereld!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hallo wereld!')
})

            

              
                Copy
              
            
          

Een Banking Applicatie Testen

Voor banking applicaties kan Cypress worden gebruikt om kritieke functionaliteiten te testen, zoals:

• Veilig inloggen
• Rekening saldi controleren
• Geld overmaken
• Begunstigden beheren

Een test om een succesvolle geldoverboeking te verifiëren, kan er als volgt uitzien (met de juiste stubbing voor veiligheid):

            
it('Maakt succesvol geld over', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Conclusie

Cypress is een krachtig en veelzijdig end-to-end testing framework dat u kan helpen bij het waarborgen van de kwaliteit en betrouwbaarheid van uw webapplicaties. De ontwikkelaarvriendelijke API, krachtige functies en uitstekende prestaties maken het een populaire keuze onder ontwikkelaars en QA engineers wereldwijd. Door de best practices te volgen die in deze gids worden beschreven, kunt u effectieve Cypress tests schrijven die u zullen helpen om bugs vroeg in het development proces op te sporen en software van hoge kwaliteit aan uw gebruikers te leveren.

Naarmate webapplicaties zich blijven ontwikkelen, zal het belang van end-to-end testing alleen maar toenemen. Het omarmen van Cypress en het integreren ervan in uw development workflow zal u in staat stellen om robuustere, betrouwbaardere en gebruiksvriendelijkere web ervaringen te bouwen.