Cypress je skvelý pre front-end testovanie, ale dokáže efektívne otestovať aj vaše API.

Cypress je populárny testovací rámec prispôsobený pre aplikácie JavaScript. Aj keď je primárne navrhnutý na testovanie komponentov používateľského rozhrania a interakcií s prvkami používateľského rozhrania v prehliadači, je tiež vhodné na testovanie API. Rámec môžete použiť na testovanie rozhraní RESTful API prostredníctvom požiadaviek HTTP a overenie platnosti odozvy.

Cypress vám umožňuje písať komplexné testy, ktoré pokrývajú celé spektrum pracovného postupu vašej webovej aplikácie.

Začíname s testovaním API pomocou Cypress

Cypress vám pomôže overiť, či vaše rozhrania API fungujú tak, ako očakávate. Tento proces zvyčajne zahŕňa testovanie koncových bodov rozhrania API, vstupných údajov a odpovedí HTTP. Môžete overiť integráciu s akýmikoľvek externými službami a potvrdiť, že mechanizmy na odstraňovanie chýb fungujú správne.

Testovanie vašich rozhraní API zaisťuje, že sú funkčné, spoľahlivé a spĺňajú potreby aplikácií, ktoré sú na nich závislé. Pomáha včas identifikovať a opraviť chyby, čím predchádza problémom vo výrobe.

instagram viewer

Cypress je skvelý nástroj na testovanie používateľského rozhrania, ktorý používajú niektorí z populárne rámce JavaScriptu. Jeho schopnosť vytvárať a testovať požiadavky HTTP ho robí rovnako efektívnym pri testovaní API.

Robí to tak, že používa Node.js ako svoj nástroj na vytváranie požiadaviek HTTP a spracovanie ich odpovedí.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Vytvorte rozhranie REST API Express.js

Začať, vytvorte expresný webový servera nainštalujte tento balík do svojho projektu:

npm install cors

Ďalej pridajte balík Cypress do svojho projektu:

npm install cypress --save-dev

Nakoniec aktualizujte svoj package.json súbor, ktorý obsahuje tento testovací skript:

"test": "npx cypress open"

Definujte ovládače API

V reálnom svete by ste volali API na čítanie a zápis údajov z databázy alebo externého API. V tomto príklade však budete simulovať a testovať takéto volania API pridaním a načítaním používateľských údajov z poľa.

V koreňovom adresári priečinka projektu vytvorte a controllers/userControllers.js súbor a pridajte nasledujúci kód.

Najprv definujte a zaregistrovaťPoužívateľa funkcia ovládača, ktorá bude spravovať trasu registrácie používateľa. Extrahuje údaje používateľa z tela požiadavky, vytvorí nový objekt používateľa a pridá ho do používateľov pole. Ak je proces úspešný, mal by odpovedať stavovým kódom 201 a správou, že používateľa zaregistroval.

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

Pridajte druhú funkciu -getUsers— na načítanie používateľských údajov z poľa a ich vrátenie ako odpoveď JSON.

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

Nakoniec môžete tiež simulovať pokusy o prihlásenie. V tom istom súbore pridajte tento kód, aby ste skontrolovali, či sa dané používateľské meno a heslo zhodujú s akýmikoľvek používateľskými údajmi v súbore používateľov pole:

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

Definujte trasy API

Ak chcete definovať trasy pre vaše Express REST API, vytvorte nové routes/userRoutes.js súbor v koreňovom adresári a pridajte doň tento kód:

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;

Aktualizujte súbor Server.js

Aktualizujte server.js súbor na konfiguráciu API nasledovne:

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;

Nastavte testovacie prostredie

Po zavedení demo API ste pripravení nastaviť testovacie prostredie. Spustite vývojový server pomocou tohto príkazu terminálu:

node server.js

Potom spustite príkaz testovacieho skriptu v samostatnom termináli:

npm run test

Tento príkaz spustí desktopového klienta Cypress, ktorý poskytuje testovacie prostredie. Po otvorení kliknite na Testovanie E2E tlačidlo. End-to-end testy zaisťujú, že testujete Express API ako celok, čo znamená, že Cypress bude mať prístup k webovému serveru, trasám a súvisiacim funkciám ovládača.

Ďalej kliknite ďalej pridať konfiguračné súbory Cypress.

Po dokončení procesu nastavenia by ste mali vo svojom projekte vidieť nový priečinok Cypress. Cypress tiež pridá a cypress.config.js súbor, ktorý obsahuje konfiguračné nastavenia pre vaše testy.

Pokračujte a aktualizujte tento súbor tak, aby obsahoval základnú adresu URL vášho servera:

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

Napíšte testovacie prípady

Teraz ste pripravení napísať niekoľko testovacích prípadov. Najprv vyberte prehliadač, v ktorom sa Cypress spustí na spustenie testov z možností dostupných na klientovi Cypress.

Ďalej kliknite na Vytvorte novú špecifikáciu vytvorte testovací súbor a zadajte názov. Potom kliknite Vytvorte špecifikáciu.

Teraz otvorte cypress/fixtures/example.json súbor a aktualizujte jeho obsah pomocou nasledujúcich používateľských poverení. Svietidlá sú súbory, ktoré obsahujú statické testovacie údaje, ktoré môžete použiť v testovacích prípadoch.

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

Cypress poskytuje a cy.žiadosť spôsob odosielania požiadaviek HTTP na webový server. Môžete ho použiť na testovanie rôznych typov koncových bodov HTTP, ktoré spravujú rôzne operácie vrátane GET, POST, PUT a DELETE.

Ak chcete otestovať tri trasy API, ktoré ste definovali skôr, začnite opísaním testovacieho prípadu pre koncový bod registra. Tento testovací prípad by mal overiť, že koncový bod funguje správne úspešnou registráciou nového používateľa a overením tvrdení.

Otvor cypress/e2e/user.routes.spec.cy.js súbor a aktualizujte jeho obsah nasledujúcim kódom.

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

V tomto teste Cypress načíta testovacie údaje v súbore prípravku a odošle požiadavky POST do určeného koncového bodu s údajmi v tele požiadavky. Ak prejdú všetky tvrdenia, prejde testovací prípad. V opačnom prípade zlyhá.

Stojí za zmienku, že syntax testov Cypress sa veľmi podobá syntaxi používanej v testoch Mocha, ktorú Cypress prijal.

Teraz popíšte test pre používateľov trasu. Test by mal overiť, či odpoveď obsahuje používateľské údaje, keď sú na tento koncový bod zaslané požiadavky. Aby ste to dosiahli, pridajte nasledujúci kód do popísať testovací 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);
 });
 });
 });

Nakoniec zahrňte testovací prípad, ktorý otestuje koncový bod prihlásenia a potvrdí, že stav odpovede je 200, čo znamená úspešný pokus o prihlásenie.

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

Ak chcete spustiť testy, vráťte sa do verzie prehliadača spravovanej Cypress a vyberte konkrétny testovací súbor, ktorý chcete spustiť.

Testovací bežec Cypress spustí testy a zaznamená ich výsledky, pričom ukáže stav úspešného alebo neúspešného každého testovacieho prípadu.

Vyššie uvedené príklady ilustrujú, ako môžete testovať rôzne trasy a ich zodpovedajúce funkcie ovládača, aby ste zaistili ich funkčnosť a očakávané správanie. Aj keď je nevyhnutné otestovať funkčnosť rozhraní API, nemali by ste obmedziť rozsah testovania iba na tento aspekt.

Komplexná stratégia testovania API by mala zahŕňať aj testy výkonu, zaťaženia a integrácie s inými službami. Zahrnutím rôzne typy testovacích metód vo svojej stratégii môžete dosiahnuť dôkladné testovacie pokrytie a zabezpečiť, aby vaše rozhrania API boli funkčné a spoľahlivé pred nasadením kódu do produkcie.

Testovanie celého webu pomocou Cypress

Cypress je fantastický nástroj na testovanie webových aplikácií, ktorý hladko pokrýva testy pre front-end aj back-end.

Vďaka užívateľsky prívetivým testovacím funkciám môžete jednoducho a rýchlo nastaviť testovacie prostredie na jednej platforme. Potom ho môžete použiť na dôkladné testovanie rôznych aspektov vašej aplikácie a zaručiť špičkový výkon.