M

MLOG

Nederlands

Een uitgebreide gids voor Cypress, het krachtige end-to-end testing framework, inclusief installatie, tests schrijven, debuggen, CI/CD-integratie en best practices.

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

Installatie en Setup

Aan de slag gaan met Cypress is eenvoudig. Hier is hoe u het installeert:
  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:
    3. npm install cypress --save-dev
  3. Open Cypress: Zodra de installatie is voltooid, kunt u de Cypress Test Runner openen door het volgende uit te voeren:
    4. npx cypress open

    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')
  })
})

Laten we deze test eens nader bekijken:

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:

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:

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:

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')

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')
})

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')
})

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


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

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


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

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

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


import 'cypress-file-upload';

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


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

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()

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'

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:

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:

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:

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')
})

Een Social Media Applicatie Testen

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

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!')
})

Een Banking Applicatie Testen

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

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')
})

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.