Cypress est idéal pour les tests front-end, mais il peut également tester efficacement vos API.

Cypress est un framework de test populaire adapté aux applications JavaScript. Bien qu'il soit principalement conçu pour tester les composants de l'interface utilisateur et les interactions avec les éléments de l'interface utilisateur dans un navigateur, il est également bien adapté pour tester les API. Vous pouvez utiliser le framework pour tester les API RESTful via des requêtes HTTP et valider le réponses.

Cypress vous permet d'écrire des tests complets qui couvrent tout le spectre du flux de travail de votre application Web.

Premiers pas avec les tests d'API à l'aide de Cypress

Cypress vous aide à vérifier que vos API fonctionnent comme prévu. Ce processus comprend généralement le test des points de terminaison, des données d'entrée et des réponses HTTP de l'API. Vous pouvez vérifier l'intégration avec n'importe quel service externe et confirmer que les mécanismes de gestion des erreurs fonctionnent correctement.

instagram viewer

Tester vos API garantit qu'elles sont fonctionnelles, fiables et répondent aux besoins des applications qui en dépendent. Cela permet d'identifier et de corriger les bogues dès le début, évitant ainsi que des problèmes ne surviennent en production.

Cyprès est un excellent outil de test d'interface utilisateur, utilisé par certains des frameworks JavaScript populaires. Sa capacité à émettre et tester des requêtes HTTP le rend tout aussi efficace pour tester les API.

Pour ce faire, il utilise Node.js comme moteur pour effectuer des requêtes HTTP et gérer leurs réponses.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt.

Créer une API REST Express.js

Pour commencer, créer un serveur web Express, et installez ce package dans votre projet :

npm install cors

Ensuite, ajoutez le package Cypress à votre projet :

npm install cypress --save-dev

Enfin, mettez à jour votre package.json fichier pour inclure ce script de test :

"test": "npx cypress open"

Définir les contrôleurs API

Dans un cas réel, vous effectueriez des appels d’API pour lire et écrire des données à partir d’une base de données ou d’une API externe. Cependant, pour cet exemple, vous allez simuler et tester de tels appels d'API en ajoutant et en récupérant des données utilisateur à partir d'un tableau.

Dans le répertoire racine de votre dossier de projet, créez un contrôleurs/userControllers.js fichier et ajoutez le code suivant.

Tout d'abord, définissez un S'inscrireUtilisateur fonction de contrôleur qui gérera le parcours d’enregistrement des utilisateurs. Il extraira les données de l'utilisateur du corps de la requête, créera un nouvel objet utilisateur et l'ajoutera au utilisateurs tableau. Si le processus réussit, il doit répondre avec un code d'état 201 et un message indiquant qu'il a enregistré l'utilisateur.

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

Ajoutez une deuxième fonction—obtenir des utilisateurs-pour récupérer les données utilisateur du tableau et les renvoyer sous forme de réponse JSON.

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

Enfin, vous pouvez également simuler des tentatives de connexion. Dans le même fichier, ajoutez ce code pour vérifier si le nom d'utilisateur et le mot de passe donnés correspondent à des données utilisateur dans le utilisateurs tableau:

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

Définir les routes API

Pour définir les routes de votre API REST Express, créez un nouveau routes/userRoutes.js fichier dans le répertoire racine et ajoutez-y ce code :

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;

Mettre à jour le fichier Server.js

Mettre à jour le serveur.js fichier pour configurer l'API comme suit :

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;

Configurer l'environnement de test

Une fois l’API de démonstration en place, vous êtes prêt à configurer l’environnement de test. Démarrez le serveur de développement avec cette commande de terminal :

node server.js

Ensuite, exécutez la commande de script de test dans un terminal séparé :

npm run test

Cette commande lancera le client de bureau Cypress, qui fournit l'environnement de test. Une fois ouvert, cliquez sur le Tests E2E bouton. Les tests de bout en bout garantissent que vous testez l'API Express dans son ensemble, ce qui signifie que Cypress aura accès au serveur Web, aux routes et aux fonctions de contrôleur associées.

Ensuite, cliquez sur Continuer pour ajouter des fichiers de configuration Cypress.

Une fois le processus de configuration terminé, vous devriez voir un nouveau dossier Cypress dans votre projet. Cypress ajoutera également un cypress.config.js fichier qui contient les paramètres de configuration de vos tests.

Allez-y et mettez à jour ce fichier pour inclure l'URL de base de votre serveur comme suit :

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

Écrire les cas de test

Vous êtes maintenant prêt à écrire quelques cas de test. Tout d'abord, sélectionnez le navigateur dans lequel Cypress va se lancer pour exécuter les tests parmi les options disponibles sur le client Cypress.

Ensuite, cliquez sur le Créer une nouvelle spécification pour créer votre fichier de test et fournir un nom. Puis clique Créer une spécification.

Maintenant, ouvrez le cyprès/fixtures/exemple.json et mettez à jour son contenu avec les informations d’identification utilisateur suivantes. Les appareils sont des fichiers contenant des données de test statiques que vous pouvez utiliser dans les scénarios de test.

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

Cypress fournit un cy.demande méthode pour envoyer des requêtes HTTP à un serveur Web. Vous pouvez l'utiliser pour tester différents types de points de terminaison HTTP qui gèrent différentes opérations, notamment GET, POST, PUT et DELETE.

Pour tester les trois routes API que vous avez définies précédemment, commencez par décrire le scénario de test pour le point de terminaison du registre. Ce scénario de test doit vérifier que le point de terminaison fonctionne correctement en enregistrant avec succès un nouvel utilisateur et en validant les assertions.

Ouvrez le cypress/e2e/user.routes.spec.cy.js fichier et mettez à jour son contenu avec le code suivant.

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

Dans ce test, Cypress chargera les données de test dans le fichier de luminaire et effectuera des requêtes POST au point de terminaison spécifié avec les données dans le corps de la requête. Si toutes les assertions réussissent, le scénario de test réussira. Sinon, cela échouera.

Il convient de noter que la syntaxe des tests Cypress ressemble beaucoup à la syntaxe utilisée dans les tests Mocha, adoptée par Cypress.

Maintenant, décrivez le test pour le utilisateurs itinéraire. Le test doit vérifier que la réponse contient des données utilisateur lorsque des demandes sont adressées à ce point de terminaison. Pour y parvenir, ajoutez le code suivant dans le décrire bloc de test.

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

Enfin, incluez un scénario de test qui testera le point de terminaison de connexion et affirmera que l'état de la réponse est 200, indiquant une tentative de connexion réussie.

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

Pour exécuter les tests, revenez à la version du navigateur gérée par Cypress et sélectionnez le fichier de test spécifique que vous souhaitez exécuter.

Le programme d'exécution de tests Cypress exécutera les tests et enregistrera leurs résultats, indiquant l'état de réussite ou d'échec de chaque scénario de test.

Les exemples ci-dessus illustrent comment vous pouvez tester différentes routes et leurs fonctions de contrôleur correspondantes pour garantir leur fonctionnalité et leur comportement attendu. S’il est essentiel de tester la fonctionnalité des API, vous ne devez pas limiter la portée des tests à cet aspect uniquement.

Une stratégie complète de test d'API doit également inclure des tests sur les performances, la charge et l'intégration avec d'autres services. En incluant différents types de méthodes de test Dans votre stratégie, vous pouvez obtenir une couverture de tests approfondie et vous assurer que vos API sont à la fois fonctionnelles et fiables avant de déployer votre code en production.

Tester l'intégralité de votre expérience Web à l'aide de Cypress

Cypress est un outil fantastique pour tester des applications Web, couvrant de manière transparente les tests front-end et back-end.

Grâce à ses fonctionnalités de test conviviales, vous pouvez facilement et rapidement configurer un environnement de test sur une seule plateforme. Vous pouvez ensuite l'utiliser pour tester en profondeur différents aspects de votre application et garantir des performances de premier ordre.