Το Cypress είναι εξαιρετικό για δοκιμές στο front-end, αλλά μπορεί επίσης να δοκιμάσει αποτελεσματικά τα API σας.

Το Cypress είναι ένα δημοφιλές πλαίσιο δοκιμών προσαρμοσμένο για εφαρμογές JavaScript. Ενώ έχει σχεδιαστεί κυρίως για να δοκιμάζει στοιχεία διεπαφής χρήστη και αλληλεπιδράσεις με στοιχεία διεπαφής χρήστη σε ένα πρόγραμμα περιήγησης, είναι επίσης κατάλληλο για δοκιμή API. Μπορείτε να χρησιμοποιήσετε το πλαίσιο για να δοκιμάσετε τα RESTful API μέσω αιτημάτων HTTP και να τα επικυρώσετε απαντήσεις.

Το Cypress σάς επιτρέπει να γράψετε ολοκληρωμένες δοκιμές που καλύπτουν όλο το φάσμα της ροής εργασιών της διαδικτυακής εφαρμογής σας.

Ξεκινώντας με τη δοκιμή API με χρήση Cypress

Το Cypress σάς βοηθά να επαληθεύσετε ότι τα API σας λειτουργούν όπως περιμένετε. Αυτή η διαδικασία συνήθως περιλαμβάνει τη δοκιμή των τελικών σημείων του API, των δεδομένων εισόδου και των αποκρίσεων HTTP. Μπορείτε να επαληθεύσετε την ενοποίηση με οποιεσδήποτε εξωτερικές υπηρεσίες και να επιβεβαιώσετε ότι οι μηχανισμοί διαχείρισης σφαλμάτων λειτουργούν σωστά.

instagram viewer

Η δοκιμή των API σας διασφαλίζει ότι είναι λειτουργικά, αξιόπιστα και ανταποκρίνονται στις ανάγκες των εφαρμογών που εξαρτώνται από αυτά. Βοηθά στην έγκαιρη αναγνώριση και διόρθωση σφαλμάτων, αποτρέποντας την εμφάνιση προβλημάτων στην παραγωγή.

Κυπαρίσσι είναι ένα εξαιρετικό εργαλείο δοκιμής διεπαφής χρήστη, που χρησιμοποιείται από ορισμένους από τους δημοφιλή πλαίσια JavaScript. Η ικανότητά του να κάνει και να δοκιμάζει αιτήματα HTTP το καθιστά εξίσου αποτελεσματικό στη δοκιμή API.

Το κάνει αυτό χρησιμοποιώντας το Node.js ως μηχανή του για να κάνει αιτήματα HTTP και να χειρίζεται τις απαντήσεις τους.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε ένα Express.js REST API

Για να ξεκινήσετε, δημιουργήστε έναν διακομιστή ιστού Expressκαι εγκαταστήστε αυτό το πακέτο στο έργο σας:

npm install cors

Στη συνέχεια, προσθέστε το πακέτο Cypress στο έργο σας:

npm install cypress --save-dev

Τέλος, ενημερώστε το δικό σας πακέτο.json αρχείο για να περιλαμβάνει αυτό το σενάριο δοκιμής:

"test": "npx cypress open"

Καθορίστε τους ελεγκτές API

Σε μια πραγματική περίπτωση, θα πραγματοποιούσατε κλήσεις API για ανάγνωση και εγγραφή δεδομένων από μια βάση δεδομένων ή ένα εξωτερικό API. Ωστόσο, για αυτό το παράδειγμα, θα προσομοιώσετε και θα δοκιμάσετε τέτοιες κλήσεις API προσθέτοντας και λαμβάνοντας δεδομένα χρήστη από έναν πίνακα.

Στον ριζικό κατάλογο του φακέλου του έργου σας, δημιουργήστε ένα controllers/userControllers.js αρχείο και προσθέστε τον ακόλουθο κώδικα.

Πρώτα, ορίστε α registerUser λειτουργία ελεγκτή που θα διαχειρίζεται τη διαδρομή εγγραφής χρήστη. Θα εξαγάγει τα δεδομένα του χρήστη από το σώμα του αιτήματος, θα δημιουργήσει ένα νέο αντικείμενο χρήστη και θα το προσθέσει στο χρήστες πίνακας. Εάν η διαδικασία είναι επιτυχής, θα πρέπει να απαντήσει με έναν κωδικό κατάστασης 201 και ένα μήνυμα που υποδεικνύει ότι έχει εγγράψει τον χρήστη.

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

Προσθέστε μια δεύτερη συνάρτηση—getUsers—για να ανακτήσετε δεδομένα χρήστη από τη συστοιχία και να τα επιστρέψετε ως απόκριση JSON.

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

Τέλος, μπορείτε επίσης να προσομοιώσετε τις προσπάθειες σύνδεσης. Στο ίδιο αρχείο, προσθέστε αυτόν τον κωδικό για να ελέγξετε εάν το όνομα χρήστη και ο κωδικός πρόσβασης που δίνεται ταιριάζουν με οποιαδήποτε δεδομένα χρήστη στο χρήστες πίνακας:

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

Καθορίστε τις διαδρομές API

Για να ορίσετε τις διαδρομές για το Express REST API, δημιουργήστε μια νέα routes/userRoutes.js αρχείο στον ριζικό κατάλογο και προσθέστε αυτόν τον κώδικα σε αυτόν:

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;

Ενημερώστε το Αρχείο Server.js

Ενημερώστε το server.js αρχείο για να διαμορφώσετε το API ως εξής:

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;

Ρυθμίστε το περιβάλλον δοκιμής

Με το demo API στη θέση του, είστε έτοιμοι να ρυθμίσετε το περιβάλλον δοκιμών. Ξεκινήστε τον διακομιστή ανάπτυξης με αυτήν την εντολή τερματικού:

node server.js

Στη συνέχεια, εκτελέστε την εντολή δοκιμαστικής δέσμης ενεργειών σε ξεχωριστό τερματικό:

npm run test

Αυτή η εντολή θα εκκινήσει τον υπολογιστή-πελάτη υπολογιστή Cypress, ο οποίος παρέχει το περιβάλλον δοκιμής. Μόλις ανοίξει, κάντε κλικ στο Δοκιμή E2E κουμπί. Οι δοκιμές από άκρο σε άκρο διασφαλίζουν ότι δοκιμάζετε το Express API στο σύνολό του, πράγμα που σημαίνει ότι το Cypress θα έχει πρόσβαση στον διακομιστή ιστού, τις διαδρομές και τις σχετικές λειτουργίες ελεγκτή.

Στη συνέχεια, κάντε κλικ Να συνεχίσει για να προσθέσετε αρχεία διαμόρφωσης Cypress.

Μόλις ολοκληρωθεί η διαδικασία εγκατάστασης, θα πρέπει να δείτε έναν νέο φάκελο Cypress στο έργο σας. Το Cypress θα προσθέσει επίσης ένα cypress.config.js αρχείο που περιέχει τις ρυθμίσεις διαμόρφωσης για τις δοκιμές σας.

Συνεχίστε και ενημερώστε αυτό το αρχείο ώστε να περιλαμβάνει τη διεύθυνση URL της βάσης του διακομιστή σας ως εξής:

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

Γράψτε τις δοκιμαστικές περιπτώσεις

Τώρα είστε έτοιμοι να γράψετε μερικές δοκιμαστικές περιπτώσεις. Αρχικά, επιλέξτε το πρόγραμμα περιήγησης στο οποίο θα εκκινήσει το Cypress για να εκτελέσετε τις δοκιμές από τις διαθέσιμες επιλογές στον πελάτη Cypress.

Στη συνέχεια, κάντε κλικ στο Δημιουργία νέας προδιαγραφής κουμπί για να δημιουργήσετε το δοκιμαστικό σας αρχείο και δώστε ένα όνομα. Στη συνέχεια κάντε κλικ Δημιουργία προδιαγραφής.

Τώρα, ανοίξτε το cypress/fixtures/example.json αρχείο και ενημερώστε το περιεχόμενό του με τα ακόλουθα διαπιστευτήρια χρήστη. Τα φωτιστικά είναι αρχεία που περιέχουν δεδομένα στατικών δοκιμών που μπορείτε να χρησιμοποιήσετε στις περιπτώσεις δοκιμών.

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

Κυπαρίσσι παρέχει α cy.αίτημα μέθοδο για την υποβολή αιτημάτων HTTP σε έναν διακομιστή ιστού. Μπορείτε να το χρησιμοποιήσετε για να δοκιμάσετε διαφορετικούς τύπους τερματικών σημείων HTTP που διαχειρίζονται διαφορετικές λειτουργίες, συμπεριλαμβανομένων των GET, POST, PUT και DELETE.

Για να ελέγξετε τις τρεις διαδρομές API που καθορίσατε νωρίτερα, ξεκινήστε περιγράφοντας την περίπτωση δοκιμής για το τελικό σημείο του καταχωρητή. Αυτή η δοκιμαστική περίπτωση θα πρέπει να επαληθεύει ότι το τελικό σημείο λειτουργεί σωστά με την επιτυχή εγγραφή ενός νέου χρήστη και την επικύρωση των ισχυρισμών.

Ανοιξε το cypress/e2e/user.routes.spec.cy.js αρχείο και ενημερώστε το περιεχόμενό του με τον ακόλουθο κώδικα.

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

Σε αυτήν τη δοκιμή, το Cypress θα φορτώσει τα δεδομένα της δοκιμής στο αρχείο εξάρτησης και θα κάνει αιτήματα POST στο καθορισμένο τελικό σημείο με τα δεδομένα στο σώμα αιτήματος. Εάν περάσουν όλοι οι ισχυρισμοί, η δοκιμαστική περίπτωση θα περάσει. Διαφορετικά, θα αποτύχει.

Αξίζει να σημειωθεί ότι η σύνταξη για τα τεστ Cypress μοιάζει πολύ με τη σύνταξη που χρησιμοποιείται στα τεστ Mocha, τα οποία έχει υιοθετήσει η Cypress.

Τώρα, περιγράψτε τη δοκιμή για το χρήστες Διαδρομή. Η δοκιμή θα πρέπει να επαληθεύει ότι η απάντηση περιέχει δεδομένα χρήστη όταν υποβάλλονται αιτήματα σε αυτό το τελικό σημείο. Για να το πετύχετε αυτό, προσθέστε τον ακόλουθο κώδικα μέσα στο περιγράφω μπλοκ δοκιμής.

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

Τέλος, συμπεριλάβετε μια δοκιμαστική περίπτωση που θα ελέγξει το τελικό σημείο σύνδεσης και θα επιβεβαιώσει ότι η κατάσταση απόκρισης είναι 200, υποδεικνύοντας μια επιτυχημένη προσπάθεια σύνδεσης.

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

Για να εκτελέσετε τις δοκιμές, επιστρέψτε στην έκδοση του προγράμματος περιήγησης που διαχειρίζεται η Cypress και επιλέξτε το συγκεκριμένο αρχείο δοκιμής που θέλετε να εκτελέσετε.

Ο δρομέας δοκιμής Cypress θα εκτελέσει τις δοκιμές και θα καταγράψει τα αποτελέσματά τους, δείχνοντας την κατάσταση επιτυχίας ή αποτυχίας κάθε περίπτωσης δοκιμής.

Τα παραπάνω παραδείγματα δείχνουν πώς μπορείτε να δοκιμάσετε διάφορες διαδρομές και τις αντίστοιχες λειτουργίες ελεγκτή για να διασφαλίσετε τη λειτουργικότητά τους και την αναμενόμενη συμπεριφορά τους. Αν και είναι απαραίτητο να ελέγξετε τη λειτουργικότητα των API, δεν θα πρέπει να περιορίσετε το πεδίο δοκιμών αποκλειστικά σε αυτήν την πτυχή.

Μια ολοκληρωμένη στρατηγική δοκιμών API θα πρέπει επίσης να περιλαμβάνει δοκιμές για την απόδοση, το φορτίο και την ενοποίηση με άλλες υπηρεσίες. Συμπεριλαμβάνοντας διαφορετικών τύπων μεθόδων δοκιμής στη στρατηγική σας, μπορείτε να επιτύχετε διεξοδική δοκιμαστική κάλυψη και να διασφαλίσετε ότι τα API σας είναι λειτουργικά και αξιόπιστα πριν από την ανάπτυξη του κώδικά σας στην παραγωγή.

Δοκιμάζοντας ολόκληρη την εμπειρία σας στο Web χρησιμοποιώντας το Cypress

Το Cypress είναι ένα φανταστικό εργαλείο για τη δοκιμή εφαρμογών web, που καλύπτει απρόσκοπτα δοκιμές τόσο για το front-end όσο και για το back-end.

Με τις φιλικές προς τον χρήστη δυνατότητες δοκιμών, μπορείτε εύκολα και γρήγορα να ρυθμίσετε ένα περιβάλλον δοκιμών σε μία πλατφόρμα. Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε για να δοκιμάσετε διεξοδικά διάφορες πτυχές της εφαρμογής σας και να εγγυηθείτε κορυφαία απόδοση.