Cypress je odličan za front-end testiranje, ali također može učinkovito testirati vaše API-je.

Cypress je popularan okvir za testiranje prilagođen za JavaScript aplikacije. Iako je primarno osmišljen za testiranje komponenti korisničkog sučelja i interakcija s elementima korisničkog sučelja u pregledniku, također i jest dobro prilagođen za testiranje API-ja. Okvir možete koristiti za testiranje RESTful API-ja putem HTTP zahtjeva i provjeru valjanosti odgovori.

Cypress vam omogućuje pisanje sveobuhvatnih testova koji obuhvaćaju cijeli spektar tijeka rada vaše web aplikacije.

Početak rada s API testiranjem pomoću Cypressa

Cypress vam pomaže provjeriti rade li vaši API-ji onako kako očekujete. Ovaj proces obično uključuje testiranje krajnjih točaka API-ja, ulaznih podataka i HTTP odgovora. Možete provjeriti integraciju s bilo kojim vanjskim servisom i potvrditi da mehanizmi za obradu pogrešaka rade ispravno.

Testiranje vaših API-ja osigurava da su funkcionalni, pouzdani i da zadovoljavaju potrebe aplikacija koje o njima ovise. Pomaže u ranom prepoznavanju i ispravljanju grešaka, sprječavajući pojavu problema u proizvodnji.

instagram viewer

Čempres je izvrstan alat za testiranje korisničkog sučelja, koji koriste neki od popularni JavaScript okviri. Njegova sposobnost postavljanja i testiranja HTTP zahtjeva čini ga jednako učinkovitim u testiranju API-ja.

To čini korištenjem Node.js kao svog mehanizma za upućivanje HTTP zahtjeva i rukovanje njihovim odgovorima.

Kôd ovog projekta možete pronaći u GitHub spremište.

Napravite Express.js REST API

Započeti, stvoriti Express web poslužitelj, i instalirajte ovaj paket u svoj projekt:

npm install cors

Zatim dodajte Cypress paket svom projektu:

npm install cypress --save-dev

Konačno, ažurirajte svoje paket.json datoteka za uključivanje ove testne skripte:

"test": "npx cypress open"

Definirajte API kontrolere

U stvarnom slučaju, upućivali biste API pozive za čitanje i pisanje podataka iz baze podataka ili vanjskog API-ja. Međutim, za ovaj primjer, simulirati ćete i testirati takve API pozive dodavanjem i dohvaćanjem korisničkih podataka iz polja.

U korijenskom direktoriju mape vašeg projekta kreirajte a kontroleri/userControllers.js datoteku i dodajte sljedeći kod.

Prvo, definirajte a registerUser funkcija kontrolera koja će upravljati rutom registracije korisnika. Izvući će korisničke podatke iz tijela zahtjeva, stvoriti novi korisnički objekt i dodati ga u korisnika niz. Ako je proces uspješan, trebao bi odgovoriti sa statusnim kodom 201 i porukom koja pokazuje da je registrirao korisnika.

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

Dodajte drugu funkciju—getUsers— za dohvaćanje korisničkih podataka iz niza i vraćanje kao JSON odgovor.

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

Na kraju, također možete simulirati pokušaje prijave. U istoj datoteci dodajte ovaj kod kako biste provjerili odgovaraju li dano korisničko ime i lozinka bilo kojim korisničkim podacima u korisnika niz:

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

Definirajte API rute

Da biste definirali rute za svoj Express REST API, izradite novi routes/userRoutes.js datoteku u korijenskom direktoriju i dodajte joj ovaj kod:

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;

Ažurirajte datoteku Server.js

Ažurirajte server.js datoteku za konfiguraciju API-ja na sljedeći način:

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;

Postavite testno okruženje

S demo API-jem spremni ste za postavljanje okruženja za testiranje. Pokrenite razvojni poslužitelj ovom terminalskom naredbom:

node server.js

Zatim pokrenite naredbu testne skripte u zasebnom terminalu:

npm run test

Ova naredba će pokrenuti Cypress desktop klijent, koji pruža okruženje za testiranje. Kada se otvori, kliknite na E2E testiranje dugme. End-to-end testovi osiguravaju da testirate Express API u cjelini, što znači da će Cypress imati pristup web poslužitelju, rutama i povezanim funkcijama kontrolera.

Zatim kliknite Nastaviti za dodavanje Cypress konfiguracijskih datoteka.

Nakon završetka postupka postavljanja, trebali biste vidjeti novu mapu Cypress u svom projektu. Čempres će također dodati a čempres.config.js datoteku koja sadrži konfiguracijske postavke za vaše testove.

Samo naprijed i ažurirajte ovu datoteku kako biste uključili osnovni URL vašeg poslužitelja na sljedeći način:

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

Napišite testne slučajeve

Sada ste spremni napisati neke testne slučajeve. Najprije odaberite preglednik u kojem će se Cypress pokrenuti za izvođenje testova iz opcija dostupnih na Cypress klijentu.

Zatim kliknite na Stvorite novu spec gumb za izradu testne datoteke i unesite naziv. Zatim kliknite Izradi spec.

Sada otvorite čempres/fiksture/example.json datoteku i ažurirajte njezin sadržaj sljedećim korisničkim vjerodajnicama. Fiksture su datoteke koje sadrže statičke testne podatke koje možete koristiti u testnim slučajevima.

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

Čempres pruža a cy.zahtjev metoda za upućivanje HTTP zahtjeva web poslužitelju. Možete ga koristiti za testiranje različitih vrsta HTTP krajnjih točaka koje upravljaju različitim operacijama uključujući GET, POST, PUT i DELETE.

Za testiranje tri API rute koje ste definirali ranije, počnite opisivanjem testnog slučaja za krajnju točku registra. Ovaj testni slučaj trebao bi potvrditi da krajnja točka radi ispravno uspješnom registracijom novog korisnika i potvrđivanjem tvrdnji.

Otvori čempres/e2e/user.routes.spec.cy.js datoteku i ažurirajte njezin sadržaj sljedećim kodom.

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

U ovom testu, Cypress će učitati testne podatke u datoteku fixture i napraviti POST zahtjeve prema navedenoj krajnjoj točki s podacima u tijelu zahtjeva. Ako sve tvrdnje prođu, test će proći. Inače će propasti.

Vrijedno je napomenuti da sintaksa za Cypress testove vrlo nalikuje sintaksi koja se koristi u Mocha testovima, a koju je Cypress usvojio.

Sada opišite test za korisnika ruta. Test bi trebao potvrditi da odgovor sadrži korisničke podatke kada se zahtjevi upućuju ovoj krajnjoj točki. Da biste to postigli, dodajte sljedeći kod unutar opisati ispitni blok.

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

Na kraju, uključite testni slučaj koji će testirati krajnju točku prijave i potvrditi da je status odgovora 200, što ukazuje na uspješan pokušaj prijave.

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

Za pokretanje testova vratite se na verziju preglednika kojom upravlja Cypress i odaberite određenu testnu datoteku koju želite pokrenuti.

Cypress test runner će pokrenuti testove i zabilježiti njihove rezultate, pokazujući prolaznost ili neuspjeh statusa svakog testa.

Gornji primjeri ilustriraju kako možete testirati različite rute i njihove odgovarajuće funkcije kontrolera kako biste osigurali njihovu funkcionalnost i očekivano ponašanje. Iako je neophodno testirati funkcionalnost API-ja, ne biste trebali ograničiti opseg testiranja samo na ovaj aspekt.

Sveobuhvatna strategija testiranja API-ja također bi trebala uključivati ​​testove performansi, opterećenja i integracije s drugim uslugama. Uključivanjem različite vrste metoda ispitivanja u svojoj strategiji možete postići temeljitu pokrivenost testom i osigurati da su vaši API-ji funkcionalni i pouzdani prije implementacije koda u proizvodnju.

Testiranje vašeg cjelokupnog web iskustva pomoću Cypressa

Cypress je fantastičan alat za testiranje web aplikacija, besprijekorno pokrivajući testove za front-end i back-end.

Uz njegove značajke testiranja prilagođene korisniku, možete jednostavno i brzo postaviti okruženje za testiranje na jednoj platformi. Zatim ga možete koristiti za temeljito testiranje različitih aspekata svoje aplikacije i jamčenje vrhunske izvedbe.