M

MLOG

Norsk

En omfattende guide til Cypress, det kraftige rammeverket for ende-til-ende-testing, som dekker installasjon, skriving av tester, feilsøking, CI/CD og beste praksis.

Cypress: Den ultimate guiden til ende-til-ende-testing for nettapplikasjoner

I dagens raskt utviklende landskap for nettutvikling er det avgjørende å sikre kvaliteten og påliteligheten til nettapplikasjoner. Ende-til-ende-testing (E2E) spiller en avgjørende rolle i å verifisere at alle komponentene i en applikasjon fungerer sømløst sammen fra brukerens perspektiv. Cypress har dukket opp som et ledende rammeverk for E2E-testing, og tilbyr en utviklervennlig opplevelse, kraftige funksjoner og utmerket ytelse. Denne omfattende guiden vil lede deg gjennom alt du trenger å vite for å komme i gang med Cypress og effektivt teste nettapplikasjonene dine.

Hva er Cypress?

Cypress er et neste generasjons testverktøy for frontend, bygget for den moderne weben. I motsetning til tradisjonelle testrammeverk som kjører tester i en nettleser, opererer Cypress direkte i nettleseren, noe som gir deg enestående kontroll og innsyn i applikasjonens atferd. Det er designet for å være raskt, pålitelig og enkelt å bruke, noe som gjør det til et populært valg blant utviklere og QA-ingeniører over hele verden. Cypress er skrevet i JavaScript og kjøres i nettleseren, noe som gjør det svært ytelsessterkt og gir enestående tilgang til applikasjonens interne deler.

Hovedfordeler med å bruke Cypress

Installasjon og oppsett

Å komme i gang med Cypress er enkelt. Slik installerer du det:

  1. Forutsetninger: Sørg for at du har Node.js og npm (Node Package Manager) installert på systemet ditt. Du kan laste dem ned fra den offisielle Node.js-nettsiden.
  2. Installer Cypress: Åpne terminalen eller kommandolinjen, naviger til prosjektmappen din og kjør følgende kommando:
    3. npm install cypress --save-dev
  3. Åpne Cypress: Når installasjonen er fullført, kan du åpne Cypress Test Runner ved å kjøre:
    4. npx cypress open

    Denne kommandoen vil starte Cypress Test Runner, som gir et grafisk grensesnitt for å kjøre og feilsøke testene dine.

Skrive din første Cypress-test

La oss lage en enkel test for å verifisere at et nettsteds hjemmeside lastes korrekt. Opprett en ny fil med navnet `example.cy.js` i `cypress/e2e`-mappen i prosjektet ditt.


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the 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')
  })
})

La oss bryte ned denne testen:

Kjør denne testen i Cypress Test Runner for å se den i aksjon. Du bør se nettleseren navigere til Cypress Kitchen Sink-nettstedet, klikke på "type"-lenken og verifisere URL-en.

Cypress-kommandoer

Cypress tilbyr et bredt spekter av kommandoer for å samhandle med applikasjonen din. Her er noen av de mest brukte kommandoene:

Dette er bare noen av de mange kommandoene som er tilgjengelige i Cypress. Se Cypress-dokumentasjonen for en fullstendig liste over kommandoer og deres alternativer.

Påstander i Cypress

Påstander (assertions) brukes til å verifisere den forventede atferden til applikasjonen din. Cypress tilbyr et rikt sett med innebygde påstander som du kan bruke til å sjekke tilstanden til elementer, URL, tittel og mer. Påstander lenkes etter Cypress-kommandoer ved hjelp av `.should()`-metoden.

Her er noen vanlige eksempler på påstander:

Du kan også lage egendefinerte påstander for å passe dine spesifikke behov.

Beste praksis for å skrive Cypress-tester

Å følge beste praksis kan hjelpe deg med å skrive mer vedlikeholdbare, pålitelige og effektive Cypress-tester. Her er noen anbefalinger:

Avanserte Cypress-teknikker

Stubbing og mocking

Cypress lar deg stubbe nettverksforespørsler og -svar, slik at du kan simulere forskjellige scenarier og teste applikasjonens feilhåndtering. Dette er spesielt nyttig for å teste funksjoner som er avhengige av eksterne API-er eller tjenester.

For å stubbe en nettverksforespørsel kan du bruke `cy.intercept()`-kommandoen. For eksempel stubber koden nedenfor en GET-forespørsel til `/api/users` og returnerer et mock-svar:


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

Du kan deretter vente på den avskårne forespørselen ved å bruke `cy.wait('@getUsers')` og verifisere at applikasjonen din håndterer mock-svaret korrekt.

Arbeide med Local Storage og informasjonskapsler

Cypress tilbyr kommandoer for å samhandle med local storage og informasjonskapsler (cookies). Du kan bruke disse kommandoene til å sette, hente og tømme local storage og informasjonskapsler i testene dine.

For å sette et element i local storage kan du bruke `cy.window()`-kommandoen for å få tilgang til vindusobjektet og deretter bruke `localStorage.setItem()`-metoden. For eksempel:


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

For å hente et element fra local storage kan du bruke `cy.window()`-kommandoen og deretter bruke `localStorage.getItem()`-metoden. For eksempel:


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

For å sette en informasjonskapsel kan du bruke `cy.setCookie()`-kommandoen. For eksempel:


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

For å hente en informasjonskapsel kan du bruke `cy.getCookie()`-kommandoen. For eksempel:


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

Håndtering av filopplastinger

Cypress tilbyr en plugin kalt `cypress-file-upload` som forenkler filopplastinger i testene dine. For å installere plugin-en, kjør følgende kommando:

npm install -D cypress-file-upload

Deretter legger du til følgende linje i din `cypress/support/commands.js`-fil:


import 'cypress-file-upload';

Du kan deretter bruke `cy.uploadFile()`-kommandoen for å laste opp en fil. For eksempel:


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

Arbeide med IFrames

Testing av IFrames kan være vanskelig, men Cypress gir en måte å samhandle med dem på. Du kan bruke `cy.frameLoaded()`-kommandoen for å vente på at en IFrame skal lastes, og deretter bruke `cy.iframe()`-kommandoen for å få IFrame-ens dokumentobjekt.


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

Cypress og kontinuerlig integrasjon/kontinuerlig levering (CI/CD)

Å integrere Cypress i din CI/CD-pipeline er avgjørende for å sikre kvaliteten på applikasjonen din. Du kan kjøre Cypress-tester i hodeløs modus i ditt CI/CD-miljø. Slik gjør du det:

  1. Installer Cypress: Sørg for at Cypress er installert som en avhengighet i prosjektet ditt.
  2. Konfigurer CI/CD: Konfigurer din CI/CD-pipeline til å kjøre Cypress-tester etter hver bygging.
  3. Kjør Cypress hodeløst: Bruk `cypress run`-kommandoen for å kjøre Cypress-tester i hodeløs modus.

Eksempel på CI/CD-konfigurasjon (ved hjelp av 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'

Denne konfigurasjonen vil kjøre Cypress-tester hver gang kode blir pushet til `main`-grenen eller en pull-request blir opprettet mot `main`-grenen. `cypress-io/github-action`-handlingen forenkler prosessen med å kjøre Cypress-tester i GitHub Actions.

Feilsøking av Cypress-tester

Cypress tilbyr utmerkede feilsøkingsverktøy for å hjelpe deg med å identifisere og fikse problemer i testene dine. Her er noen tips for feilsøking av Cypress-tester:

Cypress vs. andre testrammeverk

Selv om Cypress er et kraftig rammeverk for ende-til-ende-testing, er det viktig å forstå hvordan det kan sammenlignes med andre populære alternativer. Her er en kort oversikt:

Valget av rammeverk avhenger av prosjektets spesifikke behov og krav. Cypress er et utmerket valg for moderne nettapplikasjoner som krever rask, pålitelig og utviklervennlig ende-til-ende-testing.

Eksempler fra den virkelige verden på Cypress i aksjon

La oss utforske noen eksempler fra den virkelige verden på hvordan Cypress kan brukes til å teste forskjellige typer nettapplikasjoner:

Testing av en e-handelsapplikasjon

Du kan bruke Cypress til å teste forskjellige brukerflyter i en e-handelsapplikasjon, for eksempel:

Her er et eksempel på en Cypress-test som verifiserer at en bruker kan legge et produkt i handlekurven:


it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testing av en sosial medie-applikasjon

Du kan bruke Cypress til å teste brukerinteraksjoner i en sosial medie-applikasjon, for eksempel:

Her er et eksempel på en Cypress-test som verifiserer at en bruker kan opprette et nytt innlegg:


it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Testing av en bankapplikasjon

For bankapplikasjoner kan Cypress brukes til å teste kritiske funksjonaliteter som:

En test for å verifisere en pengeoverføring kan se slik ut (med passende stubbing for sikkerhet):


it('Transfers funds successfully', () => {
  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')
})

Konklusjon

Cypress er et kraftig og allsidig rammeverk for ende-til-ende-testing som kan hjelpe deg med å sikre kvaliteten og påliteligheten til nettapplikasjonene dine. Dets utviklervennlige API, kraftige funksjoner og utmerkede ytelse gjør det til et populært valg blant utviklere og QA-ingeniører over hele verden. Ved å følge beste praksis som er beskrevet i denne guiden, kan du skrive effektive Cypress-tester som vil hjelpe deg med å fange feil tidlig i utviklingsprosessen og levere programvare av høy kvalitet til brukerne dine.

Ettersom nettapplikasjoner fortsetter å utvikle seg, vil viktigheten av ende-til-ende-testing bare øke. Å omfavne Cypress og integrere det i arbeidsflyten din vil gi deg muligheten til å bygge mer robuste, pålitelige og brukervennlige nettopplevelser.