Contents

Hur man testar Express.js REST API:er med Cypress

Cypress är ett populärt testramverk som är skräddarsytt för JavaScript-applikationer. Det är främst utformat för att testa UI-komponenter och interaktioner med UI-element i en webbläsare, men det är också väl lämpat för testning av API:er. Du kan använda ramverket för att testa RESTful API:er via HTTP-förfrågningar och validera svaren.

Cypress gör det möjligt att skapa omfattande testsviter som omfattar en webbapplikations hela funktionsområde, från start till slutförande.

Komma igång med API-testning med Cypress

Cypress möjliggör validering av en applikations programmeringsgränssnitt (API) för att säkerställa att det fungerar enligt den avsedda designen. Som en del av denna process testas API:ns ändpunkter, inmatningsparametrar och HTTP-svar (Hypertext Transfer Protocol). Dessutom verifieras kompatibiliteten med externa system och funktionaliteten hos felhanteringsmekanismerna bekräftas.

/sv/images/cypress-homepage.jpg

Det är av största vikt att säkerställa funktionalitet, tillförlitlighet och lämplighet för applikationsintegration av era API:er genom testning. Tidig identifiering och korrigering av eventuella problem kommer att förhindra att potentiella problem uppstår i en live-miljö.

Cypress är ett utmärkt testverktyg för UI som används av några av de populära JavaScript-ramverken. Dess förmåga att göra och testa HTTP-förfrågningar gör det lika effektivt för att testa API:er.

Applikationen utnyttjar Node.js som underliggande teknik för att utföra HTTP-förfrågningar och hantera motsvarande svar effektivt.

Källkoden för detta projekt är tillgänglig via dess dedikerade GitHub-förvar.

Skapa ett Express.js REST API

För att initiera processen, etablera en Express-webbserver som grund och införliva detta paket i ditt projekts ramverk.

 npm install cors 

För att införliva funktionerna i Cypress i ditt nuvarande projekt måste du följa en rad steg som involverar installation och konfiguration av nödvändiga beroenden. Denna process innebär att Cypress-paketet läggs till som en tillgång i projektets konfigurationsfil eller repository, att dess version och plats i systemet specificeras och att det integreras korrekt med andra komponenter och moduler i applikationen. När detta är gjort kan du börja använda Cypress för att automatisera och testa olika aspekter av ditt arbetsflöde för programvaruutveckling, inklusive användarinteraktioner, API-anrop och nätverksförfrågningar.

 npm install cypress --save-dev 

Ändra slutligen din package.json fil för att införliva det ovannämnda testskriptet.

 "test": "npx cypress open" 

Definiera API-kontrollerna

För att visa hur vår applikation fungerar i ett praktiskt scenario kommer vi att simulera processen att göra API-anrop för att interagera med en databas eller ett externt API. Även om den faktiska implementeringen skulle innebära sådana interaktioner, kommer vi för tydlighetens skull att använda en array för att lagra och hämta användardata inom ramen för detta exempel.

I den primära katalogen i ditt projekts mappstruktur skapar du en “controllers”-underkatalog och i den genererar du en “userControllers.js”-fil. Inkludera följande innehåll i den här filen.

Låt oss börja med att skapa en

 const users = [];

exports.registerUser = async (req, res) => {
  const { username, password } = req.body;

  try {
    const newUser = { username, password };
    users.push(newUser);
    res.status(201).send({ message: 'User registered successfully' });
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
};

Ändra den befintliga getAllUsers funktionen för att inkludera en ytterligare funktionalitet som hämtar användardata från matrisen och returnerar den i form av ett JSON-svar. Den nya funktionen kallas getUsers .

 exports.getUsers = async (req, res) => {
  try {
    res.json(users);
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
}; 

Sammanfattningsvis kan man utföra simulerade inloggningsförsök genom att införliva en specifik koddel i det medföljande skriptet. Denna extra funktionalitet gör det möjligt att validera om en viss uppsättning autentiseringsuppgifter korrekt motsvarar information som lagras i en “users”-array.

 exports.loginUser = async (req, res) => {
  const { username, password } = req.body;

  try {
    const user = users.find((u) =>
           u.username === username && u.password === password);

    if (user) {
      res.status(200).send({ message: 'Login successful' });
    } else {
      res.status(401).send({ message: 'Invalid credentials' });
    }
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
}; 

Definiera API-rutterna

För att fastställa routningskonfigurationen för din Express-baserade RESTful-applikation bör du skapa en ny fil med namnet “routes/userRoutes.js” som ligger i den primära katalogen för ditt projekt. Denna specifika fil kommer att innehålla följande innehåll:

 const express = require('express');
const router = express.Router();
const userControllers = require('../controllers/userControllers');

const baseURL = '/v1/api/';

router.post(baseURL \\+ 'register', userControllers.registerUser);
router.get(baseURL \\+ 'users', userControllers.getUsers);
router.post(baseURL \\+ 'login', userControllers.loginUser);

module.exports = router; 

Uppdatera filen Server.js

Ändra innehållet i filen server.js genom att justera dess konfiguration i enlighet med följande specifikationer:

 const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

const userRoutes = require('./routes/userRoutes');
app.use('/', userRoutes);

app.listen(port, () => {
  console.log(`Server is listening at http://localhost:${port}`);
});

module.exports = app;

Konfigurera testmiljön

För att skapa testmiljön för demonstrationens API (Application Programming Interface), påbörja initialiseringen av utvecklingsservern genom att utföra ovannämnda terminalinstruktion.

 node server.js 

Kör sedan testskriptet med hjälp av den körbara filen “test” från ett annat terminalfönster eller konsol:

 npm run test 

Genom att utföra denna instruktion initieras installationen av Cypress desktop-applikation, som fungerar som en utvärderingsplattform. När installationen är klar ska du navigera till fliken “E2E Testing” och aktivera den genom att klicka på den angivna knappen. End-to-end-utvärderingarna omfattar en omfattande utvärdering av hela Express API, inklusive webbservern, ruttkonfigurationer och tillhörande styrfunktionsmoduler.

/sv/images/cypress-testing-ui-client.jpg

Klicka på “Fortsätt” för att införliva Cypress konfigurationsfiler.

/sv/images/cypress-configuration-files.jpg

När den inledande installationsproceduren har slutförts bör användaren kunna se att det finns en nyskapad Cypress-katalog i projektet. Dessutom genererar Cypress automatiskt en cypress.config.js-fil som innehåller testsvitens konfigurationsparametrar.

Du får gärna modifiera detta dokument genom att inkludera din servers basadress på följande sätt:

 const { defineConfig } = require("cypress");

module.exports = defineConfig({
  chromeWebSecurity: false,
  e2e: {
    baseUrl: 'http://localhost:5000',
    setupNodeEvents(on, config) {
     },
  },
}); 

Skriv testfall

För att börja skriva testfall med Cypress, börja med att välja önskad webbläsare för testning bland de tillgängliga alternativen i Cypress-gränssnittet.

/sv/images/testing-browsers-options.jpg

När du klickar på knappen “Create new spec”, ange en titel för ditt testfall och klicka sedan på alternativet “Create spec”.

/sv/images/new-spec-file.jpg

Redigera innehållet i filen “cypress/fixtures/example.json” genom att använda de angivna användaruppgifterna. Fixture-filer fungerar som lagringsplatser för stationära testdata som kan användas inom testsviter.

 {
  "username": "testuser",
  "password": "password123"
} 

Cypress erbjuder en mångsidig metod för att utföra HTTP-förfrågningar genom det inbyggda kommandot cy.request . Denna funktion gör det möjligt för utvecklare att interagera med olika typer av HTTP-slutpunkter som hanterar olika funktioner som GET, POST, PUT och DELETE.

För att validera funktionaliteten hos de tre tidigare implementerade API-slutpunkterna måste vi börja med att formulera ett testscenario för registreringsprocessen. Det primära målet med detta testscenario är att bekräfta att endpointen fungerar som avsett genom att effektivt skapa ett nytt användarkonto och verifiera de tillhörande påståendena.

Öppna filen “cypress/e2e/user.routes.spec.cy.js” och ersätt det befintliga innehållet med kodavsnittet nedan:javascriptdescribe(‘User Routes’, () => {it(‘bör ha ett ordentligt navigeringsfält på mobila enheter’, (done) => {cy.visit(’/’)cy. get(’#app-title’).should(‘have.text’, ‘Min webbplats’);cy.get(’.burger’).click();cy.get(’#menu-toggle’).should(‘be.visible’);cy.get(’#profile-btn’).click({ force: true });cy.url().should(‘include’, ‘/dashboard’);cy.get(’#nav-links li:nth-child(1) a’).

 describe('User Routes', () => {
  it('registers a new user', () => {
     cy.fixture('example').then((testUser) => {
       cy.request({
        method: 'POST',
        url: `${baseUrl}/v1/api/register`,
         body: testUser,
       }).then((response) => {
         expect(response.status).to.eq(201);
         expect(response.body.message).to.eq('User registered successfully');
      });
    });
  }); 

Under genomförandet av denna utvärdering ska Cypress använda informationen i fixturfilen för att generera en serie POST-förfrågningar riktade mot den angivna slutpunkten, åtföljda av de uppgifter som finns i förfrågningskroppen. Om vart och ett av påståendena valideras som korrekt, ska testinstansen anses vara framgångsrik och anses vara godkänd. Omvänt, om något påstående inte uppfyller de fastställda kriterierna, ska det övergripande testfallet anses vara misslyckat och markeras som underkänt.

Cypress tester är strukturerade med en syntax som liknar den som används av Mocha-tester, eftersom Cypress har integrerat detta testramverk.

För att validera att svaret som genereras av användare slutpunkten ger relevant användarinformation vid mottagande av en begäran på nämnda plats, är det absolut nödvändigt att införliva följande åtgärder inom den omfattande beskriva testsviten.

   it('gets users data and the username matches test data', () => {
    cy.fixture('example').then((expectedUserData) => {
      cy.request({
        method: 'GET',
        url: `${baseUrl}/v1/api/users`,
      }).then((response) => {
        expect(response.status).to.eq(200);
        const username = response.body[0].username;
        expect(username).to.eq(expectedUserData.username);
      });
    });
  }); 

Slutligen, införliva ett testscenario för att utvärdera inloggningsslutpunkten och hävda att HTTP-svarsstatusen är 200, vilket innebär ett lyckat inloggningsförsök.

   it('logs in a user', () => {
     cy.fixture('example').then((loginData) => {
      cy.request({
        method: 'POST',
        url: `${baseUrl}/v1/api/login`,
         body: loginData,
       }).then((response) => {
        expect(response.status).to.eq(200);
      });
    });
  });
}); 

För att utföra testerna, navigera tillbaka till webbapplikationen som övervakas av Cypress och välj det testskript som du vill utföra bland de tillgängliga.

/sv/images/spec-files-on-cypress-client.jpg

Exekveringen av Cypress test runner ska resultera i testning och dokumentation av resultaten för varje enskilt testfall, och visa om de har godkänts eller misslyckats.

/sv/images/user-routes-test-cases-1.jpg

För att på ett heltäckande sätt kunna utvärdera prestanda och tillförlitlighet hos ett API är det viktigt att utöka testomfattningen till att inte bara undersöka dess funktionella aspekter. Genom att undersöka ytterligare lager av interaktion mellan applikationens programmeringsgränssnitt och andra komponenter som är involverade i behandlingen av förfrågningar eller svar, kan en mer omfattande bedömning av systemets övergripande effektivitet och ändamålsenlighet uppnås.

En väl avvägd strategi för API-testning omfattar inte bara funktionalitet utan även aspekter som prestanda, skalbarhet och integration med externa system. Därför är det viktigt att införliva ett brett spektrum av testmetoder i teststrategin för att uppnå fullständig testtäckning och säkerställa tillförlitligheten och stabiliteten hos applikationens API:er innan de används i en skarp miljö.

Testa hela webbupplevelsen med Cypress

Cypress är en exceptionell resurs för enkel utvärdering av webbaserade applikationer, och omfattar omfattande utvärderingar av både användargränssnitt och komponenter på serversidan.

Genom att använda våra intuitiva testverktyg kan man enkelt skapa en omfattande testmiljö inom en enda plattform. Detta möjliggör omfattande utvärdering av olika aspekter av din programvara, vilket säkerställer optimal funktionalitet och exceptionell prestanda.