Cypress este excelent pentru testarea front-end, dar vă poate testa și API-urile în mod eficient.

Cypress este un cadru de testare popular, adaptat aplicațiilor JavaScript. Deși este conceput în primul rând pentru a testa componentele UI și interacțiunile cu elementele UI într-un browser, este și potrivite pentru testarea API-urilor. Puteți utiliza cadrul pentru a testa API-urile RESTful prin solicitări HTTP și pentru a valida răspunsuri.

Cypress vă permite să scrieți teste cuprinzătoare care acoperă întregul spectru al fluxului de lucru al aplicației dvs. web.

Noțiuni introductive cu testarea API folosind Cypress

Cypress vă ajută să verificați dacă API-urile funcționează așa cum vă așteptați. Acest proces include de obicei testarea punctelor finale ale API, a datelor de intrare și a răspunsurilor HTTP. Puteți verifica integrarea cu orice serviciu extern și puteți confirma că mecanismele de tratare a erorilor funcționează corect.

Testarea API-urilor vă asigură că sunt funcționale, fiabile și satisfac nevoile aplicațiilor care depind de ele. Ajută la identificarea și remedierea erorilor de la început, prevenind apariția problemelor în producție.

instagram viewer

Chiparos este un instrument excelent de testare a interfeței de utilizare, folosit de unii dintre cadre JavaScript populare. Capacitatea sa de a face și testa solicitări HTTP îl face la fel de eficient în testarea API-urilor.

Face acest lucru folosind Node.js ca motor pentru a face cereri HTTP și a gestiona răspunsurile acestora.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu.

Creați un API REST Express.js

Pentru a incepe, creați un server web Express, și instalați acest pachet în proiectul dvs.:

npm install cors

Apoi, adăugați pachetul Cypress la proiectul dvs.:

npm install cypress --save-dev

În cele din urmă, actualizați-vă pachet.json fișier pentru a include acest script de testare:

"test": "npx cypress open"

Definiți controlerele API

Într-un caz real, ați face apeluri API pentru a citi și scrie date dintr-o bază de date sau dintr-un API extern. Cu toate acestea, pentru acest exemplu, veți simula și testa astfel de apeluri API prin adăugarea și preluarea datelor utilizatorului dintr-o matrice.

În directorul rădăcină al folderului de proiect, creați un controllers/userControllers.js fișier și adăugați următorul cod.

Mai întâi, definiți a registerUser funcția de controler care va gestiona ruta de înregistrare a utilizatorului. Acesta va extrage datele utilizatorului din corpul solicitării, va crea un nou obiect utilizator și îl va adăuga la utilizatorii matrice. Dacă procesul are succes, acesta ar trebui să răspundă cu un cod de stare 201 și un mesaj care indică faptul că a înregistrat utilizatorul.

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

Adăugați o a doua funcție—getUsers— pentru a prelua datele utilizatorului din matrice și a le returna ca răspuns JSON.

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

În cele din urmă, puteți simula și încercările de conectare. În același fișier, adăugați acest cod pentru a verifica dacă numele de utilizator și parola date corespund datelor utilizatorului din utilizatorii matrice:

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

Definiți rutele API

Pentru a defini rutele pentru API-ul Express REST, creați un nou routes/userRoutes.js fișier în directorul rădăcină și adăugați acest cod la acesta:

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;

Actualizați fișierul Server.js

Actualizați server.js fișier pentru a configura API-ul după cum urmează:

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;

Configurați mediul de testare

Cu API-ul demonstrativ, sunteți gata să configurați mediul de testare. Porniți serverul de dezvoltare cu această comandă de terminal:

node server.js

Apoi, rulați comanda scriptului de testare într-un terminal separat:

npm run test

Această comandă va lansa clientul desktop Cypress, care oferă mediul de testare. După ce este deschis, faceți clic pe Testarea E2E buton. Testele end-to-end vă asigură că testați API-ul Express în ansamblu, ceea ce înseamnă că Cypress va avea acces la serverul web, rutele și funcțiile asociate controlerului.

Apoi, faceți clic Continua pentru a adăuga fișiere de configurare Cypress.

Odată ce procesul de configurare este finalizat, ar trebui să vedeți un nou folder Cypress în proiectul dvs. Cypress va adăuga, de asemenea, un cypress.config.js fișier care conține setările de configurare pentru testele dvs.

Continuați și actualizați acest fișier pentru a include adresa URL de bază a serverului, după cum urmează:

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

Scrieți cazurile de testare

Acum sunteți gata să scrieți câteva cazuri de testare. Mai întâi, selectați browserul în care se va lansa Cypress pentru a rula testele din opțiunile disponibile pe clientul Cypress.

Apoi, faceți clic pe Creați specificații noi pentru a crea fișierul de testare și pentru a furniza un nume. Apoi apasa Creați specificații.

Acum, deschideți cypress/fixtures/example.json fișier și actualizați conținutul acestuia cu următoarele acreditări de utilizator. Fixările sunt fișiere care conțin date de testare statice pe care le puteți utiliza în cazurile de testare.

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

Cypress oferă a cy.cerere metodă de a face cereri HTTP către un server web. Îl puteți folosi pentru a testa diferite tipuri de puncte finale HTTP care gestionează diferite operațiuni, inclusiv GET, POST, PUT și DELETE.

Pentru a testa cele trei rute API pe care le-ați definit mai devreme, începeți prin a descrie cazul de testare pentru punctul final al registrului. Acest caz de testare ar trebui să verifice dacă punctul final funcționează corect, înregistrând cu succes un nou utilizator și validând afirmațiile.

Deschide cypress/e2e/user.routes.spec.cy.js fișier și actualizați conținutul acestuia cu următorul cod.

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

În acest test, Cypress va încărca datele de testare în fișierul fixture și va face solicitări POST către punctul final specificat cu datele din corpul cererii. Dacă toate afirmațiile trec, cazul de testare va trece. În caz contrar, va eșua.

Este demn de remarcat faptul că sintaxa pentru testele Cypress seamănă foarte mult cu sintaxa folosită în testele Mocha, pe care Cypress le-a adoptat.

Acum, descrieți testul pentru utilizatorii traseu. Testul ar trebui să verifice dacă răspunsul conține date utilizator atunci când solicitările sunt făcute către acest punct final. Pentru a realiza acest lucru, adăugați următorul cod în cadrul descrie bloc de testare.

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

În cele din urmă, includeți un caz de testare care va testa punctul final de conectare și va afirma că starea răspunsului este 200, indicând o încercare de conectare reușită.

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

Pentru a rula testele, reveniți la versiunea de browser gestionată de Cypress și selectați fișierul de test specific pe care doriți să îl rulați.

Testerul Cypress va rula testele și va înregistra rezultatele acestora, arătând starea de promovare sau nereușită a fiecărui caz de testare.

Exemplele de mai sus ilustrează modul în care puteți testa diferite rute și funcțiile corespunzătoare ale controlerului pentru a asigura funcționalitatea și comportamentul așteptat. Deși este esențial să testați funcționalitatea API-urilor, nu ar trebui să limitați domeniul de testare doar la acest aspect.

O strategie cuprinzătoare de testare API ar trebui să includă și teste privind performanța, încărcarea și integrarea cu alte servicii. Prin includerea diferite tipuri de metode de testare în strategia dvs., puteți obține o acoperire completă a testelor și vă puteți asigura că API-urile sunt funcționale și fiabile înainte de a vă implementa codul în producție.

Testarea întregii experiențe web folosind Cypress

Cypress este un instrument fantastic pentru testarea aplicațiilor web, acoperind perfect testele atât pentru front-end, cât și pentru back-end.

Cu funcțiile sale de testare ușor de utilizat, puteți configura ușor și rapid un mediu de testare într-o singură platformă. Apoi îl puteți folosi pentru a testa în detaliu diferite aspecte ale aplicației dvs. și pentru a garanta performanțe de top.