Cypress eignet sich hervorragend für Front-End-Tests, kann aber auch Ihre APIs effektiv testen.

Cypress ist ein beliebtes Test-Framework, das auf JavaScript-Anwendungen zugeschnitten ist. Obwohl es in erster Linie dazu gedacht ist, UI-Komponenten und Interaktionen mit UI-Elementen in einem Browser zu testen, ist es auch so gut geeignet zum Testen von APIs. Mit dem Framework können Sie RESTful-APIs über HTTP-Anfragen testen und validieren Antworten.

Mit Cypress können Sie umfassende Tests schreiben, die das gesamte Spektrum des Workflows Ihrer Webanwendung abdecken.

Erste Schritte mit API-Tests mit Cypress

Cypress hilft Ihnen zu überprüfen, ob Ihre APIs wie erwartet funktionieren. Dieser Prozess umfasst normalerweise das Testen der Endpunkte, Eingabedaten und HTTP-Antworten der API. Sie können die Integration mit beliebigen externen Diensten überprüfen und bestätigen, dass Fehlerbehandlungsmechanismen ordnungsgemäß funktionieren.

Das Testen Ihrer APIs stellt sicher, dass sie funktionsfähig und zuverlässig sind und die Anforderungen der Apps erfüllen, die von ihnen abhängig sind. Es hilft, Fehler frühzeitig zu erkennen und zu beheben und so das Auftreten von Problemen in der Produktion zu verhindern.

instagram viewer

Zypresse ist ein großartiges UI-Testtool, das von einigen verwendet wird beliebte JavaScript-Frameworks. Aufgrund seiner Fähigkeit, HTTP-Anfragen zu stellen und zu testen, ist es auch beim Testen von APIs effektiv.

Dazu wird Node.js als Engine verwendet, um HTTP-Anfragen zu stellen und deren Antworten zu verarbeiten.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erstellen Sie eine Express.js-REST-API

Um zu beginnen, Erstellen Sie einen Express-Webserver, und installieren Sie dieses Paket in Ihrem Projekt:

npm install cors

Als nächstes fügen Sie das Cypress-Paket zu Ihrem Projekt hinzu:

npm install cypress --save-dev

Aktualisieren Sie abschließend Ihre package.json Datei, um dieses Testskript einzubinden:

"test": "npx cypress open"

Definieren Sie die API-Controller

In einem realen Fall würden Sie API-Aufrufe durchführen, um Daten aus einer Datenbank oder einer externen API zu lesen und zu schreiben. In diesem Beispiel simulieren und testen Sie jedoch solche API-Aufrufe, indem Sie Benutzerdaten zu einem Array hinzufügen und daraus abrufen.

Erstellen Sie im Stammverzeichnis Ihres Projektordners eine controllers/userControllers.js Datei und fügen Sie den folgenden Code hinzu.

Definieren Sie zunächst a registerUser Controller-Funktion, die die Benutzerregistrierungsroute verwaltet. Es extrahiert die Daten des Benutzers aus dem Anforderungshauptteil, erstellt ein neues Benutzerobjekt und fügt es dem hinzu Benutzer Array. Wenn der Vorgang erfolgreich ist, sollte er mit dem Statuscode 201 und einer Meldung antworten, die angibt, dass der Benutzer registriert wurde.

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

Fügen Sie eine zweite Funktion hinzu:getUsers– um Benutzerdaten aus dem Array abzurufen und als JSON-Antwort zurückzugeben.

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

Schließlich können Sie auch Anmeldeversuche simulieren. Fügen Sie in derselben Datei diesen Code hinzu, um zu überprüfen, ob der angegebene Benutzername und das angegebene Passwort mit den Benutzerdaten in der Datei übereinstimmen Benutzer Array:

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

Definieren Sie die API-Routen

Um die Routen für Ihre Express-REST-API zu definieren, erstellen Sie eine neue Routen/userRoutes.js Datei im Stammverzeichnis und fügen Sie diesen Code hinzu:

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;

Aktualisieren Sie die Datei Server.js

Aktualisieren Sie die server.js Datei, um die API wie folgt zu konfigurieren:

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;

Richten Sie die Testumgebung ein

Wenn die Demo-API installiert ist, können Sie die Testumgebung einrichten. Starten Sie den Entwicklungsserver mit diesem Terminalbefehl:

node server.js

Führen Sie als Nächstes den Testskriptbefehl in einem separaten Terminal aus:

npm run test

Dieser Befehl startet den Cypress-Desktop-Client, der die Testumgebung bereitstellt. Sobald es geöffnet ist, klicken Sie auf E2E-Tests Taste. End-to-End-Tests stellen sicher, dass Sie die Express-API als Ganzes testen, was bedeutet, dass Cypress Zugriff auf den Webserver, die Routen und die zugehörigen Controller-Funktionen hat.

Klicken Sie anschließend auf Weitermachen um Cypress-Konfigurationsdateien hinzuzufügen.

Sobald der Einrichtungsvorgang abgeschlossen ist, sollte in Ihrem Projekt ein neuer Cypress-Ordner angezeigt werden. Cypress wird auch eine hinzufügen cypress.config.js Datei, die die Konfigurationseinstellungen für Ihre Tests enthält.

Fahren Sie fort und aktualisieren Sie diese Datei so, dass sie Ihre Server-Basis-URL enthält:

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

Schreiben Sie die Testfälle

Jetzt können Sie einige Testfälle schreiben. Wählen Sie zunächst aus den auf dem Cypress-Client verfügbaren Optionen den Browser aus, in dem Cypress zum Ausführen der Tests gestartet wird.

Klicken Sie anschließend auf Neue Spezifikation erstellen Klicken Sie auf die Schaltfläche, um Ihre Testdatei zu erstellen, und geben Sie einen Namen ein. Dann klick Spezifikation erstellen.

Öffnen Sie nun die cypress/fixtures/example.json Datei und aktualisieren Sie ihren Inhalt mit den folgenden Benutzeranmeldeinformationen. Fixtures sind Dateien, die statische Testdaten enthalten, die Sie in den Testfällen verwenden können.

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

Cypress bietet eine cy.request Methode, um HTTP-Anfragen an einen Webserver zu stellen. Sie können damit verschiedene Arten von HTTP-Endpunkten testen, die verschiedene Vorgänge verwalten, einschließlich GET, POST, PUT und DELETE.

Um die drei zuvor definierten API-Routen zu testen, beschreiben Sie zunächst den Testfall für den Registerendpunkt. Dieser Testfall sollte überprüfen, ob der Endpunkt ordnungsgemäß funktioniert, indem ein neuer Benutzer erfolgreich registriert und die Behauptungen validiert werden.

Öffne das cypress/e2e/user.routes.spec.cy.js Datei und aktualisieren Sie ihren Inhalt mit dem folgenden Code.

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

Bei diesem Test lädt Cypress die Testdaten in die Fixture-Datei und sendet POST-Anfragen an den angegebenen Endpunkt mit den Daten im Anfragetext. Wenn alle Behauptungen erfolgreich sind, wird der Testfall bestanden. Andernfalls wird es scheitern.

Es ist erwähnenswert, dass die Syntax für Cypress-Tests stark der Syntax ähnelt, die in Mocha-Tests verwendet wird, die Cypress übernommen hat.

Beschreiben Sie nun den Test für Benutzer Route. Der Test sollte überprüfen, ob die Antwort Benutzerdaten enthält, wenn Anfragen an diesen Endpunkt gestellt werden. Um dies zu erreichen, fügen Sie den folgenden Code hinzu beschreiben Testblock.

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

Fügen Sie abschließend einen Testfall hinzu, der den Anmeldeendpunkt testet und bestätigt, dass der Antwortstatus 200 ist, was auf einen erfolgreichen Anmeldeversuch hinweist.

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

Um die Tests auszuführen, kehren Sie zur von Cypress verwalteten Browserversion zurück und wählen Sie die spezifische Testdatei aus, die Sie ausführen möchten.

Der Cypress-Testläufer führt die Tests durch, zeichnet ihre Ergebnisse auf und zeigt den Bestanden- oder Fehlerstatus jedes Testfalls an.

Die obigen Beispiele veranschaulichen, wie Sie verschiedene Routen und ihre entsprechenden Controller-Funktionen testen können, um deren Funktionalität und erwartetes Verhalten sicherzustellen. Obwohl es wichtig ist, die Funktionalität von APIs zu testen, sollten Sie den Testumfang nicht nur auf diesen Aspekt beschränken.

Eine umfassende API-Teststrategie sollte auch Tests zu Leistung, Auslastung und Integration mit anderen Diensten umfassen. Durch Einbeziehung verschiedene Arten von Testmethoden Im Rahmen Ihrer Strategie können Sie eine umfassende Testabdeckung erreichen und sicherstellen, dass Ihre APIs sowohl funktionsfähig als auch zuverlässig sind, bevor Sie Ihren Code in der Produktion bereitstellen.

Testen Sie Ihr gesamtes Web-Erlebnis mit Cypress

Cypress ist ein fantastisches Tool zum Testen von Webanwendungen, das Tests sowohl für das Front-End als auch für das Backend nahtlos abdeckt.

Mit seinen benutzerfreundlichen Testfunktionen können Sie einfach und schnell eine Testumgebung auf einer Plattform einrichten. Anschließend können Sie damit verschiedene Aspekte Ihrer Anwendung gründlich testen und eine erstklassige Leistung garantieren.