A Cypress kiválóan alkalmas a front-end tesztelésre, de hatékonyan tesztelheti az API-kat is.

A Cypress egy népszerű tesztelési keretrendszer, amelyet JavaScript-alkalmazásokhoz szabtak. Bár elsősorban a felhasználói felület összetevőinek és a UI elemekkel való interakciók tesztelésére szolgál a böngészőben, ez is az kiválóan alkalmas API-k tesztelésére. A keretrendszer segítségével tesztelheti a RESTful API-kat HTTP-kéréseken keresztül, és ellenőrizheti a válaszokat.

A Cypress segítségével átfogó teszteket írhat, amelyek lefedik webalkalmazása munkafolyamatának teljes spektrumát.

Kezdő lépések az API tesztelésével a Cypress használatával

A Cypress segít ellenőrizni, hogy az API-k az elvárásoknak megfelelően működnek-e. Ez a folyamat általában magában foglalja az API végpontjainak, a bemeneti adatoknak és a HTTP-válaszoknak a tesztelését. Ellenőrizheti az integrációt bármely külső szolgáltatással, és ellenőrizheti, hogy a hibakezelési mechanizmusok megfelelően működnek.

Az API-k tesztelése biztosítja, hogy működőképesek, megbízhatóak, és megfelelnek a tőlük függő alkalmazások igényeinek. Segít a hibák korai felismerésében és kijavításában, megelőzve a problémák előfordulását a termelés során.

instagram viewer

Ciprus egy nagyszerű felhasználói felület tesztelő eszköz, amelyet néhányan használnak népszerű JavaScript keretrendszerek. A HTTP-kérelmek készítésére és tesztelésére való képessége ugyanolyan hatékonysá teszi az API-k tesztelésében.

Ezt úgy teszi, hogy a Node.js-t használja motorjaként a HTTP-kérésekhez és a válaszok kezeléséhez.

A projekt kódja megtalálható benne GitHub adattár.

Hozzon létre egy Express.js REST API-t

A kezdéshez hozzon létre egy Express webszervert, és telepítse ezt a csomagot a projektbe:

npm install cors

Ezután adja hozzá a Cypress csomagot a projekthez:

npm install cypress --save-dev

Végül frissítse package.json fájl, amely tartalmazza ezt a tesztszkriptet:

"test": "npx cypress open"

Határozza meg az API-vezérlőket

Valós esetben API-hívásokat kell indítania, hogy adatokat olvasson és írjon egy adatbázisból vagy egy külső API-ból. Ebben a példában azonban az ilyen API-hívásokat szimulálni és tesztelni kell felhasználói adatok hozzáadásával és egy tömbből való lekérésével.

A projektmappa gyökérkönyvtárában hozzon létre a controllers/userControllers.js fájlt, és adja hozzá a következő kódot.

Először határozza meg a registerUser vezérlő funkció, amely kezeli a felhasználó regisztrációs útvonalát. Kivonja a felhasználó adatait a kérés törzséből, létrehoz egy új felhasználói objektumot, és hozzáadja azt a felhasználókat sor. Ha a folyamat sikeres, akkor egy 201-es állapotkóddal és egy üzenettel kell válaszolnia, amely jelzi, hogy regisztrálta a felhasználót.

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

Második funkció hozzáadása –getUsers– felhasználói adatok lekérése a tömbből, és visszaadása JSON-válaszként.

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

Végül szimulálhatja a bejelentkezési kísérleteket is. Ugyanabban a fájlban adja hozzá ezt a kódot, hogy ellenőrizze, hogy a megadott felhasználónév és jelszó megegyezik-e a fájlban található felhasználói adatokkal felhasználókat sor:

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

Határozza meg az API-útvonalakat

Az Express REST API útvonalainak meghatározásához hozzon létre egy újat routes/userRoutes.js fájlt a gyökérkönyvtárba, és adja hozzá ezt a kódot:

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;

Frissítse a Server.js fájlt

Frissítse a server.js fájlt az API konfigurálásához az alábbiak szerint:

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;

Állítsa be a tesztkörnyezetet

A bemutató API-val készen áll a tesztelési környezet beállítására. Indítsa el a fejlesztőkiszolgálót ezzel a terminálparanccsal:

node server.js

Ezután futtassa a tesztszkript parancsot egy külön terminálon:

npm run test

Ez a parancs elindítja a Cypress asztali klienst, amely a tesztelési környezetet biztosítja. Miután megnyílt, kattintson a gombra E2E tesztelés gomb. A végpontok közötti tesztek biztosítják, hogy az Express API egészét tesztelje, ami azt jelenti, hogy a Cypress hozzáfér a webszerverhez, az útvonalakhoz és a kapcsolódó vezérlőfunkciókhoz.

Ezután kattintson Folytatni Cypress konfigurációs fájlok hozzáadásához.

A telepítési folyamat befejezése után egy új Cypress mappát kell látnia a projektben. Cypress is hozzá a cypress.config.js fájl, amely tartalmazza a tesztek konfigurációs beállításait.

Folytassa és frissítse ezt a fájlt, hogy tartalmazza a szerver alap URL-címét az alábbiak szerint:

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

Írja meg a teszteseteket

Most készen áll néhány teszteset megírására. Először válassza ki azt a böngészőt, amelyben a Cypress elindul a tesztek futtatásához a Cypress kliensben elérhető lehetőségek közül.

Ezután kattintson a Hozzon létre új specifikációt gombot a tesztfájl létrehozásához, és adjon meg egy nevet. Ezután kattintson Specifikáció létrehozása.

Most nyissa meg a cypress/fixtures/example.json fájlt, és frissítse a tartalmát a következő felhasználói hitelesítő adatokkal. A fixture statikus tesztadatokat tartalmazó fájlok, amelyeket a tesztesetekben használhat.

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

A Cypress biztosítja a cy.kérés módszer HTTP-kérések küldésére a webszervernek. Használhatja különböző típusú HTTP-végpontok tesztelésére, amelyek különböző műveleteket kezelnek, beleértve a GET, POST, PUT és DELETE műveleteket.

A korábban meghatározott három API-útvonal teszteléséhez először írja le a regisztervégpont tesztesetét. Ennek a tesztesetnek egy új felhasználó sikeres regisztrálásával és az állítások érvényesítésével ellenőriznie kell, hogy a végpont megfelelően működik-e.

Nyissa meg a cypress/e2e/user.routes.spec.cy.js fájlt, és frissítse a tartalmát a következő kóddal.

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

Ebben a tesztben a Cypress betölti a tesztadatokat a fixture fájlba, és POST kéréseket küld a megadott végponthoz a kérelem törzsében lévő adatokkal. Ha minden állítás megfelel, a teszteset sikeres lesz. Ellenkező esetben meghiúsul.

Érdemes megjegyezni, hogy a Cypress tesztek szintaxisa nagyon hasonlít a Mocha tesztekben használt szintaxisra, amelyet a Cypress alkalmazott.

Most írja le a tesztet a felhasználókat útvonal. A tesztnek ellenőriznie kell, hogy a válasz felhasználói adatokat tartalmaz-e, amikor erre a végpontra kérelmeznek. Ennek eléréséhez adja hozzá a következő kódot a leírni tesztblokk.

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

Végül tartalmazzon egy tesztesetet, amely teszteli a bejelentkezési végpontot, és megerősíti, hogy a válasz állapota 200, ami a sikeres bejelentkezési kísérletet jelzi.

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

A tesztek futtatásához térjen vissza a Cypress által kezelt böngészőverzióhoz, és válassza ki a futtatni kívánt konkrét tesztfájlt.

A Cypress tesztfutó futtatja a teszteket, és rögzíti az eredményeiket, megmutatva minden teszteset sikeres vagy sikertelen állapotát.

A fenti példák bemutatják, hogyan tesztelheti a különböző útvonalakat és a hozzájuk tartozó vezérlőfunkciókat, hogy biztosítsa azok működőképességét és várható viselkedését. Bár alapvető fontosságú az API-k működésének tesztelése, ne korlátozza a tesztelési hatókört kizárólag erre a szempontra.

Az átfogó API-tesztelési stratégiának tartalmaznia kell a teljesítményre, a terhelésre és a más szolgáltatásokkal való integrációra vonatkozó teszteket is. Beleértve különböző típusú vizsgálati módszerek stratégiájában alapos tesztlefedettséget érhet el, és biztosíthatja, hogy az API-k működőképesek és megbízhatóak legyenek, mielőtt a kódot üzembe helyezné.

A teljes webes élmény tesztelése a Cypress segítségével

A Cypress egy fantasztikus eszköz a webalkalmazások tesztelésére, zökkenőmentesen lefedi a teszteket mind az előtérben, mind a háttérben.

Felhasználóbarát tesztelési funkcióival egyszerűen és gyorsan beállíthat egy tesztelési környezetet egyetlen platformon. Ezt követően alaposan tesztelheti az alkalmazás különböző szempontjait, és garantálhatja a kiváló teljesítményt.