M

MLOG

Svenska

En omfattande guide till Cypress, det kraftfulla end-to-end-testramverket, som täcker installation, skrivande av tester, felsökning, CI/CD-integration och bästa praxis.

Cypress: Den Ultimata Guiden för End-to-End-testning av Webbapplikationer

I dagens snabbt utvecklande webbutvecklingslandskap är det avgörande att säkerställa kvaliteten och tillförlitligheten hos webbapplikationer. End-to-End (E2E)-testning spelar en avgörande roll för att verifiera att alla komponenter i en applikation fungerar sömlöst tillsammans ur användarens perspektiv. Cypress har framstått som ett ledande E2E-testramverk och erbjuder en utvecklarvänlig upplevelse, kraftfulla funktioner och utmärkt prestanda. Denna omfattande guide kommer att guida dig genom allt du behöver veta för att komma igång med Cypress och effektivt testa dina webbapplikationer.

Vad är Cypress?

Cypress är ett nästa generations testverktyg för front-end, byggt för den moderna webben. Till skillnad från traditionella testramverk som kör tester i en webbläsare, fungerar Cypress direkt i webbläsaren, vilket ger dig oöverträffad kontroll och insyn i din applikations beteende. Den är utformad för att vara snabb, pålitlig och enkel att använda, vilket gör den till ett populärt val bland utvecklare och QA-ingenjörer världen över. Cypress är skrivet i JavaScript och körs i webbläsaren, vilket gör den mycket prestandamässig och erbjuder oöverträffad tillgång till applikationens interna delar.

Viktiga fördelar med att använda Cypress

Installation och inställning

Att komma igång med Cypress är enkelt. Så här installerar du det:

  1. Förutsättningar: Se till att du har Node.js och npm (Node Package Manager) installerat på ditt system. Du kan ladda ner dem från den officiella Node.js-webbplatsen.
  2. Installera Cypress: Öppna din terminal eller kommandotolk, navigera till din projektkatalog och kör följande kommando:
    3. npm install cypress --save-dev
  3. Öppna Cypress: När installationen är klar kan du öppna Cypress Test Runner genom att köra:
    4. npx cypress open

    Detta kommando kommer att starta Cypress Test Runner, som tillhandahåller ett grafiskt gränssnitt för att köra och felsöka dina tester.

Skriva ditt första Cypress-test

Låt oss skapa ett enkelt test för att verifiera att en webbplats startsida laddas korrekt. Skapa en ny fil med namnet `example.cy.js` i katalogen `cypress/e2e` i ditt projekt.


// cypress/e2e/example.cy.js

describe('Mitt första test', () => {
  it('Besöker 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')
  })
})

Låt oss bryta ner detta test:

Kör det här testet i Cypress Test Runner för att se det i aktion. Du bör se webbläsaren navigera till Cypress Kitchen Sink-webbplatsen, klicka på länken "type" och verifiera URL:en.

Cypress-kommandon

Cypress tillhandahåller ett brett utbud av kommandon för att interagera med din applikation. Här är några av de vanligaste kommandona:

Det här är bara några av de många kommandon som finns i Cypress. Se Cypress-dokumentationen för en fullständig lista över kommandon och deras alternativ.

Försäkringar i Cypress

Försäkringar används för att verifiera det förväntade beteendet hos din applikation. Cypress tillhandahåller en rik uppsättning inbyggda försäkringar som du kan använda för att kontrollera tillståndet för element, URL:en, titeln och mer. Försäkringar kedjas efter Cypress-kommandon med metoden `.should()`.

Här är några vanliga försäkringsexempel:

Du kan också skapa anpassade försäkringar för att passa dina specifika behov.

Bästa praxis för att skriva Cypress-tester

Att följa bästa praxis kan hjälpa dig att skriva mer underhållbara, tillförlitliga och effektiva Cypress-tester. Här är några rekommendationer:

Avancerade Cypress-tekniker

Stubbing och Mocking

Cypress låter dig stubba nätverksförfrågningar och svar, vilket gör att du kan simulera olika scenarier och testa din applikations felhantering. Detta är särskilt användbart för att testa funktioner som är beroende av externa API:er eller tjänster.

För att stubba en nätverksbegäran kan du använda kommandot `cy.intercept()`. Till exempel stubbar koden nedan en GET-begäran till `/api/users` och returnerar ett hånfullt svar:


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

Du kan sedan vänta på den avlyssnade begäran med `cy.wait('@getUsers')` och verifiera att din applikation hanterar det hånfulla svaret korrekt.

Arbeta med lokal lagring och cookies

Cypress tillhandahåller kommandon för att interagera med lokal lagring och cookies. Du kan använda dessa kommandon för att ställa in, hämta och rensa lokal lagring och cookies i dina tester.

För att ställa in ett lokalt lagringsobjekt kan du använda kommandot `cy.window()` för att komma åt fönsterobjektet och sedan använda metoden `localStorage.setItem()`. Till exempel:


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

För att hämta ett lokalt lagringsobjekt kan du använda kommandot `cy.window()` och sedan använda metoden `localStorage.getItem()`. Till exempel:


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

För att ställa in en cookie kan du använda kommandot `cy.setCookie()`. Till exempel:


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

För att hämta en cookie kan du använda kommandot `cy.getCookie()`. Till exempel:


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

Hantering av filuppladdningar

Cypress tillhandahåller ett plugin som heter `cypress-file-upload` som förenklar filuppladdningar i dina tester. För att installera pluginet, kör följande kommando:

npm install -D cypress-file-upload

Lägg sedan till följande rad i din fil `cypress/support/commands.js`:


import 'cypress-file-upload';

Du kan sedan använda kommandot `cy.uploadFile()` för att ladda upp en fil. Till exempel:


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

Arbeta med IFrames

Att testa IFrames kan vara knepigt, men Cypress tillhandahåller ett sätt att interagera med dem. Du kan använda kommandot `cy.frameLoaded()` för att vänta på att en IFrame ska laddas, och sedan använda kommandot `cy.iframe()` för att hämta IFrames dokumentobjekt.


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

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

Att integrera Cypress i din CI/CD-pipeline är viktigt för att säkerställa kvaliteten på din applikation. Du kan köra Cypress-tester i huvudlöst läge i din CI/CD-miljö. Så här:

  1. Installera Cypress: Se till att Cypress är installerat som ett beroende i ditt projekt.
  2. Konfigurera CI/CD: Konfigurera din CI/CD-pipeline för att köra Cypress-tester efter varje build.
  3. Kör Cypress huvudlöst: Använd kommandot `cypress run` för att köra Cypress-tester i huvudlöst läge.

Exempel på CI/CD-konfiguration (med 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'

Denna konfiguration kommer att köra Cypress-tester när kod pushas till `main`-grenen eller en pull-begäran skapas mot `main`-grenen. Åtgärden `cypress-io/github-action` förenklar processen att köra Cypress-tester i GitHub Actions.

Felsöka Cypress-tester

Cypress tillhandahåller utmärkta felsökningsverktyg som hjälper dig att identifiera och åtgärda problem i dina tester. Här är några tips för att felsöka Cypress-tester:

Cypress vs. andra testramverk

Även om Cypress är ett kraftfullt end-to-end-testramverk är det viktigt att förstå hur det jämförs med andra populära alternativ. Här är en kort översikt:

Valet av ramverk beror på ditt projekts specifika behov och krav. Cypress är ett utmärkt val för moderna webbapplikationer som kräver snabb, pålitlig och utvecklarvänlig end-to-end-testning.

Exempel från den verkliga världen av Cypress i aktion

Låt oss utforska några exempel från den verkliga världen på hur Cypress kan användas för att testa olika typer av webbapplikationer:

Testa en e-handelsapplikation

Du kan använda Cypress för att testa olika användarflöden i en e-handelsapplikation, till exempel:

Här är ett exempel på ett Cypress-test som verifierar att en användare framgångsrikt kan lägga till en produkt i sin kundvagn:


it('Lägger till en produkt i kundvagnen', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testa en social media-applikation

Du kan använda Cypress för att testa användarinteraktioner i en social media-applikation, till exempel:

Här är ett exempel på ett Cypress-test som verifierar att en användare framgångsrikt kan skapa ett nytt inlägg:


it('Skapar ett nytt inlägg', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hej världen!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hej världen!')
})

Testa en bankapplikation

För bankapplikationer kan Cypress användas för att testa kritiska funktioner som:

Ett test för att verifiera en fondöverföring kan se ut så här (med lämplig stubbning för säkerhet):


it('Överför pengar framgångsrikt', () => {
  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')
})

Slutsats

Cypress är ett kraftfullt och mångsidigt end-to-end-testramverk som kan hjälpa dig att säkerställa kvaliteten och tillförlitligheten hos dina webbapplikationer. Dess utvecklarvänliga API, kraftfulla funktioner och utmärkta prestanda gör det till ett populärt val bland utvecklare och QA-ingenjörer världen över. Genom att följa bästa praxis som beskrivs i den här guiden kan du skriva effektiva Cypress-tester som hjälper dig att fånga buggar tidigt i utvecklingsprocessen och leverera högkvalitativ programvara till dina användare.

I takt med att webbapplikationer fortsätter att utvecklas kommer vikten av end-to-end-testning bara att öka. Att omfamna Cypress och integrera det i ditt utvecklingsarbetsflöde kommer att ge dig möjlighet att bygga mer robusta, tillförlitliga och användarvänliga webbupplevelser.