Att skriva testfall i Cypress

Grunden för ett testfall i automatiserade verktyg är att kunna tillämpa rätt testramverk och som jag berättade i förra artikeln använder Cypress både Mocha.js och Chai.js ramverk som kommer med vid installationen och som är baserade på JavaScript bibliotek.

Vad är Mocha.js

Mocha.js är ett JavaScript-testramverk med öppen källkod som körs på Node.js och i webbläsaren och som har ett mycket enkelt syntax för att skriva tester. Mocha.js kör testerna i en serie för att leverera flexibel och korrekt rapportering. Cypress har adopterat Mochas syntax för utveckling av testfall och använder den grundläggande syntaxen som Mocha erbjuder.

Nedan är några av de viktigaste delarna som du huvudsakligen kommer att använda i dina Cypress tester:

• describe() : Här grupperar du dina tester.
• it() : Här skriver du din enskilda testfall, varje it() är ett testfall och flera it() kan finnas i en och samma describe().

• before() : Den körs en gång före alla tester.
• after() : Den körs en gång efter alla tester.
• beforeEach() : Den körs före varje test.
• afterEach() : Den körs efter varje test.
• .only() : För att köra en specificerad svit eller test,
• .skip() : För att hoppa över en angiven svit eller test.

Vad är Chai.js

Chai.js är ett BDD/TDD (Behavioral-Driven Development/Test-Driven Development) assertions bibliotek som också är baserad på JavaScript och med öppen källkod. Chai.js har precis som Mocha.js en syntax att följa och som är integrerat i Cypress. Varje testfall måste ha ett påstående och för att testet ska kunna bli godkänt måste påståendet uppfyllas vid varje körning, därför är Chai.js biblioteket en grundläggande del av varje testfall i Cypress.

Chai har flera syntax som gör att du kan välja det som passar just ditt påstående bäst:

• Should

  
  

• Expect

  
  
  

• Assert
  

Att sätta dessa ramverk i praktiken

Ett automatiserat testfall består vanligtvis av 3 steg:

• Förutsättning

• Handling

• Förväntning

Om vi nu utgår ifrån den strukturen ovan och skapar ett scenario som vi ska automatisera med hjälp av Cypress blir resultatet följande:

• Besök en hemsida

• Klicka på en länk

• Verifiera att du hamnar på rätt plats

Ett försteg blir då att under Integration mappen i Cypress strukturen skapar man en fil med namnet firstTest.spec.js som kommer innehålla vårt första testfall.

Steg 1 - Besök en hemsida

Cypress har en metod som heter visit() som accepterar en URL.

Steg 2 - Handling

Cypress har metoden get() och click() som används för att hitta och interagera med HTML attribut.

Steg 3 - Förväntning

Nu kommer Chai.js biblioteket till användning, i vårt fall så vill vi verifiera en text på en knapp och på så sätt kan vi säkerställa att vår handling i steg 2 har förväntat resultat.

Det som passade bäst för vårt scenario och framför allt kunna uppfylla vårt påstående var syntaxen should, vi skickade in helt enkelt argumentet som ska föreställa den texten på knappen som vi ville verifiera.

Exekvera testet

Nu är vi äntligen klara och det är dags att testköra testet. Enklaste och snabbaste sättet att göra det är genom Cypress Test Runner. I terminalfönstret använder du kommando npx cypress open. Väl inne i Cypress Test runner kan man nu se testfallet som vi precis har skapat och genom att trycka på testfall namnet öppnas webbläsaren och exekveringen startas.

Sammanfattning

I enkla steg har vi lyckats installera Cypress, förstå strukturen samt skriva ett första testfall, och det är just det som gör Cypress unikt bland de olika testverktygen. Du får ett komplett testverktyg för End-to-End GUI testning som klarar det mesta för den moderna webbapplikationen.