Cypress er fantastisk til front-end-test, men det kan også teste dine API'er effektivt.

Cypress er en populær testramme, der er skræddersyet til JavaScript-applikationer. Selvom det primært er designet til at teste UI-komponenter og interaktioner med UI-elementer i en browser, er det også velegnet til test af API'er. Du kan bruge rammen til at teste RESTful API'er via HTTP-anmodninger og validere svar.

Cypress lader dig skrive omfattende test, der spænder over hele spektret af din webapplikations arbejdsgang.

Kom godt i gang med API-testning ved hjælp af Cypress

Cypress hjælper dig med at bekræfte, at dine API'er fungerer, som du forventer, at de skal. Denne proces omfatter typisk test af API'ens slutpunkter, inputdata og HTTP-svar. Du kan verificere integration med alle eksterne tjenester og bekræfte, at fejlhåndteringsmekanismer fungerer korrekt.

Test af dine API'er sikrer, at de er funktionelle, pålidelige og opfylder behovene i apps, der er afhængige af dem. Det hjælper med at identificere og rette fejl tidligt, hvilket forhindrer problemer i at opstå i produktionen.

instagram viewer

Cypres er et fantastisk UI-testværktøj, der bruges af nogle af de populære JavaScript-rammer. Dens evne til at lave og teste HTTP-anmodninger gør den lige så effektiv til at teste API'er.

Det gør det ved at bruge Node.js som sin motor til at lave HTTP-anmodninger og håndtere deres svar.

Du kan finde dette projekts kode i dens GitHub depot.

Opret en Express.js REST API

For at komme i gang, oprette en Express-webserver, og installer denne pakke i dit projekt:

npm install cors

Tilføj derefter Cypress-pakken til dit projekt:

npm install cypress --save-dev

Opdater endelig din package.json fil for at inkludere dette testscript:

"test": "npx cypress open"

Definer API-controllere

I et tilfælde i den virkelige verden ville du foretage API-kald for at læse og skrive data fra en database eller en ekstern API. I dette eksempel vil du dog simulere og teste sådanne API-kald ved at tilføje og hente brugerdata fra et array.

I rodmappen i din projektmappe skal du oprette en controllere/userControllers.js fil, og tilføj følgende kode.

Først skal du definere en registrer bruger controllerfunktion, der vil styre brugerregistreringsruten. Det vil udtrække brugerens data fra anmodningsteksten, oprette et nyt brugerobjekt og tilføje det til brugere array. Hvis processen lykkes, skal den svare med en 201-statuskode og en meddelelse, der angiver, at den har registreret brugeren.

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!!' });
 }
};

Tilføj en anden funktion—getUsers— for at hente brugerdata fra arrayet og returnere det som JSON-svar.

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

Endelig kan du også simulere loginforsøg. Tilføj denne kode i samme fil for at kontrollere, om det givne brugernavn og adgangskode matcher nogen brugerdata i brugere 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!!' });
 }
};

Definer API-ruterne

For at definere ruterne for din Express REST API skal du oprette en ny routes/userRoutes.js fil i rodmappen, og tilføj denne kode til den:

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;

Opdater Server.js-filen

Opdater server.js fil for at konfigurere API'en som følger:

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;

Konfigurer testmiljøet

Med demo-API'en på plads er du klar til at konfigurere testmiljøet. Start udviklingsserveren med denne terminalkommando:

node server.js

Kør derefter testscript-kommandoen i en separat terminal:

npm run test

Denne kommando vil starte Cypress desktop-klienten, som leverer testmiljøet. Når den er åben, skal du klikke på E2E test knap. End-to-end tests sikrer, at du tester Express API som helhed, hvilket betyder, at Cypress vil have adgang til webserveren, ruterne og de tilhørende controllerfunktioner.

Klik derefter Blive ved for at tilføje Cypress-konfigurationsfiler.

Når opsætningsprocessen er fuldført, bør du se en ny Cypress-mappe i dit projekt. Cypres vil også tilføje en cypress.config.js fil, som indeholder konfigurationsindstillingerne for dine tests.

Gå videre og opdater denne fil til at inkludere din serverbase-URL som følger:

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

Skriv testcaserne

Nu er du klar til at skrive nogle testcases. Først skal du vælge den browser, som Cypress vil starte i for at køre testene fra de tilgængelige muligheder på Cypress-klienten.

Klik derefter på Opret ny spec knappen for at oprette din testfil og angive et navn. Klik derefter Opret spec.

Åbn nu cypress/fixtures/example.json fil, og opdatere dens indhold med følgende brugerlegitimationsoplysninger. Fixtures er filer, der indeholder statiske testdata, som du kan bruge i testcases.

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

Cypres giver en cy.request metode til at lave HTTP-anmodninger til en webserver. Du kan bruge den til at teste forskellige typer HTTP-endepunkter, der administrerer forskellige operationer, herunder GET, POST, PUT og DELETE.

For at teste de tre API-ruter, du definerede tidligere, skal du starte med at beskrive testcasen for registerslutpunktet. Denne testcase skal verificere, at endepunktet fungerer korrekt ved at registrere en ny bruger og validere påstandene.

Åbn cypress/e2e/user.routes.spec.cy.js fil og opdatere dens indhold med følgende kode.

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');
 });
 });
 });

I denne test vil Cypress indlæse testdataene i fixturfilen og lave POST-anmodninger til det angivne slutpunkt med dataene i anmodningsteksten. Hvis alle påstande består, vil testsagen bestå. Ellers vil det mislykkes.

Det er værd at bemærke, at syntaksen for Cypress-tests ligner meget den syntaks, der bruges i Mocha-tests, som Cypress har taget til sig.

Beskriv nu testen for brugere rute. Testen skal verificere, at svaret indeholder brugerdata, når der sendes anmodninger til dette slutpunkt. For at opnå dette skal du tilføje følgende kode i beskrive testblok.

 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);
 });
 });
 });

Til sidst skal du inkludere en testcase, der tester login-slutpunktet og hævder, at svarstatussen er 200, hvilket indikerer et vellykket loginforsøg.

 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);
 });
 });
 });
});

For at køre testene skal du vende tilbage til browserversionen administreret af Cypress og vælge den specifikke testfil, du ønsker at køre.

Cypress-testløberen vil køre testene og registrere deres resultater, der viser bestået eller ikke-bestået status for hver testcase.

Eksemplerne ovenfor illustrerer, hvordan du kan teste forskellige ruter og deres tilsvarende controllerfunktioner for at sikre deres funktionalitet og forventede adfærd. Selvom det er vigtigt at teste funktionaliteten af ​​API'er, bør du ikke begrænse testomfanget udelukkende til dette aspekt.

En omfattende API-teststrategi bør også omfatte test af ydeevne, belastning og integration med andre tjenester. Ved at inkludere forskellige typer af testmetoder i din strategi kan du opnå en grundig testdækning og sikre, at dine API'er er både funktionelle og pålidelige, før du implementerer din kode til produktion.

Test af hele din weboplevelse med Cypress

Cypress er et fantastisk værktøj til at teste webapplikationer, der problemfrit dækker tests for både front-end og back-end.

Med dens brugervenlige testfunktioner kan du nemt og hurtigt opsætte et testmiljø på én platform. Du kan derefter bruge den til grundigt at teste forskellige aspekter af din applikation og garantere en toppræstation.