Cypress è ottimo per i test front-end, ma può anche testare le tue API in modo efficace.

Cypress è un popolare framework di test su misura per le applicazioni JavaScript. Sebbene sia progettato principalmente per testare i componenti dell'interfaccia utente e le interazioni con gli elementi dell'interfaccia utente in un browser, lo è anche adatto per testare le API. Puoi utilizzare il framework per testare le API RESTful tramite richieste HTTP e convalidare il file risposte.

Cypress ti consente di scrivere test completi che coprono l'intero spettro del flusso di lavoro della tua applicazione web.

Iniziare con il test delle API utilizzando Cypress

Cypress ti aiuta a verificare che le tue API funzionino come previsto. Questo processo include in genere il test degli endpoint dell'API, dei dati di input e delle risposte HTTP. Puoi verificare l'integrazione con eventuali servizi esterni e confermare che i meccanismi di gestione degli errori funzionino correttamente.

Testare le tue API garantisce che siano funzionali, affidabili e soddisfino le esigenze delle app che dipendono da esse. Aiuta a identificare e correggere tempestivamente i bug, prevenendo che si verifichino problemi in produzione.

instagram viewer

Cipresso è un ottimo strumento di test dell'interfaccia utente, utilizzato da alcuni dei popolari framework JavaScript. La sua capacità di effettuare e testare richieste HTTP lo rende altrettanto efficace nel testare le API.

Lo fa utilizzando Node.js come motore per effettuare richieste HTTP e gestire le relative risposte.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Crea un'API REST Express.js

Per iniziare, creare un server web espressoe installa questo pacchetto nel tuo progetto:

npm install cors

Successivamente, aggiungi il pacchetto Cypress al tuo progetto:

npm install cypress --save-dev

Infine, aggiorna il tuo pacchetto.json file per includere questo script di test:

"test": "npx cypress open"

Definire i controller API

In un caso reale, effettueresti chiamate API per leggere e scrivere dati da un database o da un'API esterna. Tuttavia, per questo esempio, simulerai e testerai tali chiamate API aggiungendo e recuperando i dati utente da un array.

Nella directory principale della cartella del progetto, crea un file controller/userControllers.js file e aggiungi il seguente codice.

Innanzitutto, definire a RegisterUser funzione controller che gestirà il percorso di registrazione dell'utente. Estrarrà i dati dell'utente dal corpo della richiesta, creerà un nuovo oggetto utente e lo aggiungerà al file utenti vettore. Se il processo ha esito positivo, dovrebbe rispondere con un codice di stato 201 e un messaggio che indica che ha registrato l'utente.

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

Aggiungi una seconda funzione—getUsers—per recuperare i dati utente dall'array e restituirli come risposta JSON.

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

Infine, puoi anche simulare tentativi di accesso. Nello stesso file, aggiungi questo codice per verificare se il nome utente e la password specificati corrispondono ai dati utente nel file utenti vettore:

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

Definire le rotte API

Per definire i percorsi per la tua API REST Express, crea un nuovo file percorsi/userRoutes.js file nella directory root e aggiungi questo codice:

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;

Aggiorna il file Server.js

Aggiorna il server.js file per configurare l'API come segue:

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;

Configurare l'ambiente di test

Una volta installata l'API demo, sei pronto per configurare l'ambiente di test. Avvia il server di sviluppo con questo comando da terminale:

node server.js

Successivamente, esegui il comando test script in un terminale separato:

npm run test

Questo comando avvierà il client desktop Cypress, che fornisce l'ambiente di test. Una volta aperto, fai clic su Test E2E pulsante. I test end-to-end assicurano di testare l'API Express nel suo insieme, il che significa che Cypress avrà accesso al server web, ai percorsi e alle funzioni del controller associate.

Quindi, fai clic su Continua per aggiungere file di configurazione di Cypress.

Una volta completato il processo di installazione, dovresti vedere una nuova cartella Cypress nel tuo progetto. Cypress aggiungerà anche a cipresso.config.js file che contiene le impostazioni di configurazione per i tuoi test.

Vai avanti e aggiorna questo file per includere l'URL di base del tuo server come segue:

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

Scrivere i casi di test

Ora sei pronto per scrivere alcuni casi di test. Innanzitutto, seleziona il browser in cui Cypress verrà avviato per eseguire i test dalle opzioni disponibili sul client Cypress.

Quindi, fare clic su Crea nuove specifiche pulsante per creare il file di test e fornire un nome. Quindi fare clic Crea spec.

Ora apri il file cypress/fixtures/example.json file e aggiornarne il contenuto con le seguenti credenziali utente. Le apparecchiature sono file che contengono dati di test statici che è possibile utilizzare nei casi di test.

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

Cypress fornisce a cy.richiesta metodo per effettuare richieste HTTP a un server web. Puoi usarlo per testare diversi tipi di endpoint HTTP che gestiscono diverse operazioni tra cui GET, POST, PUT e DELETE.

Per testare le tre route API definite in precedenza, inizia descrivendo il caso di test per l'endpoint del registro. Questo caso di test dovrebbe verificare che l'endpoint funzioni correttamente registrando con successo un nuovo utente e convalidando le asserzioni.

Apri il cypress/e2e/user.routes.spec.cy.js file e aggiornarne il contenuto con il seguente codice.

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

In questo test, Cypress caricherà i dati del test nel file del dispositivo ed effettuerà richieste POST all'endpoint specificato con i dati nel corpo della richiesta. Se tutte le asserzioni vengono superate, il test case passerà. Altrimenti fallirà.

Vale la pena notare che la sintassi per i test Cypress ricorda da vicino la sintassi utilizzata nei test Mocha, adottati da Cypress.

Ora descrivi il test per il utenti itinerario. Il test dovrebbe verificare che la risposta contenga i dati dell'utente quando vengono effettuate le richieste a questo endpoint. Per ottenere ciò, aggiungi il seguente codice all'interno del file descrivere blocco di prova.

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

Infine, includi un caso di test che testerà l'endpoint di accesso e affermerà che lo stato della risposta è 200, indicando un tentativo di accesso riuscito.

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

Per eseguire i test, tornare alla versione del browser gestita da Cypress e selezionare il file di test specifico che si desidera eseguire.

Il test runner di Cypress eseguirà i test e ne registrerà i risultati, mostrando lo stato di superamento o di fallimento di ciascun caso di test.

Gli esempi precedenti illustrano come testare vari percorsi e le corrispondenti funzioni del controller per garantirne la funzionalità e il comportamento previsto. Sebbene sia essenziale testare la funzionalità delle API, non dovresti limitare l'ambito del test esclusivamente a questo aspetto.

Una strategia completa di test delle API dovrebbe includere anche test su prestazioni, carico e integrazione con altri servizi. Includendo diversi tipi di metodi di prova nella tua strategia, puoi ottenere una copertura di test approfondita e garantire che le tue API siano funzionali e affidabili prima di distribuire il codice in produzione.

Testare l'intera esperienza Web utilizzando Cypress

Cypress è uno strumento fantastico per testare le applicazioni web, coprendo perfettamente i test sia per il front-end che per il back-end.

Con le sue funzionalità di test intuitive, puoi configurare facilmente e rapidamente un ambiente di test tutto in un'unica piattaforma. Puoi quindi utilizzarlo per testare a fondo diversi aspetti della tua applicazione e garantire prestazioni di prim'ordine.