Skippa manuell testning — med Cypress

Är du en utvecklare som sitter i ett stort team med uppbackning av testutvecklare som skriver automatiska tester är denna artikel kanske inget för dig. Är du däremot en av dessa testutvecklare, eller en utvecklare i ett team utan tillgång till detta? Ja då kan denna artikel rädda dig från leda och själslig ☠️ när din projektledare tvingar dig att genomföra manuell testning.

En 😎 utvecklare är en kodande utvecklare

Jag har tidigare skrivit om vikten av automatiserade gränssnitts-tester, hur du kommer igång och kan skippa manuell testning med Puppeteer.

Sedan dess har jag börjat använda Cypress istället för Puppeteer. För även Puppeteer är ett väldigt bra och kraftfullt bibliotek så innebär det också att man måste göra mer uppsättning, och tänka, före man är igång och kan få ut full nytta av det. Det är bättre att spara 🧠 till viktigare saker, som exempelvis att testa rätt. Jag har själv sett omfattande test-sviter skrivna med Puppeteer som varit väldigt krångliga, odynamiska och haft stora logiska luckor i vad som verkligen testats.

Hur Cypress beskriver skillnaden i end-to-end-testning före och efter dito

Cypress sammanfattar själva på ett bra sätt skillnaden i komplexiteten i uppsättningen av gränssnitts-tester före och efter dito.

Cypress är ett stabilt verktyg med god dokumentation! Självklart finns det funktionalitet i 🧰 för all typ av användarinteraktion. Ta skärmdumpar och spela in video när testerna körs. Dessutom kommer det med ett användargränssnitt med förhandsvisning och aktivitetslogg — i vilken du kan gå steg-för-steg igenom testerna för att se var eller vad som gör att de fallerar.

Användargränssnitt med aktivitestlogg till vänster och visning till höger

Kom igång

Att komma igång med Cypress är otroligt enkelt och går att få till på ett par minuter. Ingen tid för ☕ och 🍪

Installera:

npm install --save-dev cypress

Konfigurera (cypress.json):

{
  "baseUrl": "https://www.fremtind.no"
}

Skriv test (cypress/integration/example.spec.js):

describe('Router', () => {
  const title = 'Forside';
  const metaTitle = `${title} - Fremtind`;
  it('home route', () => {
    cy.visit('/')
    cy.title().should('eq', metaTitle);
    cy.contains('h1', title)
  })
})

Kör tester:

cypress run --headed

Byggprocess

För att försäkra sig om att testerna körs och slippa manuella steg är det en god idé att automatisera dessa i din byggprocess. Cypress stödjer alla typer av byggprocesser och i dokumentationen finns exempel för många av de vanligaste. Kör bara testerna.

npx cypress run --headless

Universell utformning

Glöm aldrig att testa för brister i universell utformning. När statiska analyserna görs automatiskt kan du frigöra värdefull ⏱️ till testning med skärmläsare eller andra mer svårtestade saker. Detta görs enkelt med axe-core och cypress-axe.

describe('A11y', () => {
  it('home route has no violations', () => {
    cy.visit('/')
    cy.injectAxe()
    cy.checkA11y()
  })
})

Lycka till, jag vet att ni fixa göra det! 🤓

Se lediga jobb hos Fremtind