Cypress on loistava käyttöliittymätestaukseen, mutta se voi myös testata sovellusliittymiäsi tehokkaasti.

Cypress on suosittu JavaScript-sovelluksille räätälöity testauskehys. Vaikka se on ensisijaisesti suunniteltu testaamaan käyttöliittymäkomponentteja ja vuorovaikutusta käyttöliittymäelementtien kanssa selaimessa, se on myös sopii hyvin API-testaukseen. Kehyksen avulla voit testata RESTful-sovellusliittymiä HTTP-pyyntöjen kautta ja validoida vastaukset.

Cypressin avulla voit kirjoittaa kattavia testejä, jotka kattavat verkkosovelluksesi työnkulun koko kirjon.

API-testauksen aloittaminen Cypressin avulla

Cypress auttaa sinua varmistamaan, että sovellusliittymäsi toimivat odotetulla tavalla. Tämä prosessi sisältää yleensä sovellusliittymän päätepisteiden, syöttötietojen ja HTTP-vastausten testaamisen. Voit tarkistaa integraation ulkoisten palvelujen kanssa ja varmistaa, että virheenkäsittelymekanismit toimivat oikein.

Sovellusliittymien testaaminen varmistaa, että ne ovat toimivia, luotettavia ja vastaavat niistä riippuvien sovellusten tarpeita. Se auttaa tunnistamaan ja korjaamaan vikoja varhaisessa vaiheessa, mikä estää ongelmien esiintymisen tuotannossa.

instagram viewer

Sypressi on loistava käyttöliittymätestaustyökalu, jota jotkut käyttävät suositut JavaScript-kehykset. Sen kyky tehdä ja testata HTTP-pyyntöjä tekee siitä yhtä tehokkaan sovellusliittymien testaamisessa.

Se tekee tämän käyttämällä Node.js: ää moottorinaan HTTP-pyyntöjen tekemiseen ja niiden vastausten käsittelemiseen.

Löydät tämän projektin koodin siitä GitHub arkisto.

Luo Express.js REST API

Aloita luo Express-verkkopalvelin, ja asenna tämä paketti projektiisi:

npm install cors

Lisää seuraavaksi Cypress-paketti projektiisi:

npm install cypress --save-dev

Päivitä lopuksi oma package.json tiedosto, joka sisältää tämän testiohjelman:

"test": "npx cypress open"

Määritä API-ohjaimet

Tosimaailmassa voit soittaa API-kutsuja lukeaksesi ja kirjoittaaksesi tietoja tietokannasta tai ulkoisesta API: sta. Tässä esimerkissä simuloit ja testaat kuitenkin tällaisia ​​API-kutsuja lisäämällä ja hakemalla käyttäjätietoja taulukosta.

Luo projektikansiosi juurihakemistoon a controllers/userControllers.js tiedosto ja lisää seuraava koodi.

Määritä ensin a rekisteröidyKäyttäjä ohjaintoiminto, joka hallitsee käyttäjän rekisteröintireittiä. Se poimii käyttäjän tiedot pyynnön rungosta, luo uuden käyttäjäobjektin ja lisää sen käyttäjiä joukko. Jos prosessi onnistuu, sen pitäisi vastata tilakoodilla 201 ja viestillä, joka osoittaa, että se on rekisteröinyt käyttäjän.

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

Lisää toinen toiminto -getUsers— noutaa käyttäjätiedot taulukosta ja palauttaa ne JSON-vastauksena.

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

Lopuksi voit myös simuloida kirjautumisyrityksiä. Lisää samaan tiedostoon tämä koodi tarkistaaksesi, vastaavatko annettu käyttäjätunnus ja salasana jotain tiedostossa olevia käyttäjätietoja käyttäjiä joukko:

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

Määritä API-reitit

Voit määrittää Express REST API: n reitit luomalla uuden routes/userRoutes.js tiedosto juurihakemistoon ja lisää siihen tämä koodi:

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;

Päivitä Server.js-tiedosto

Päivitä server.js tiedosto määrittääksesi API seuraavasti:

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;

Määritä testiympäristö

Kun esittelysovellusliittymä on käytössä, olet valmis määrittämään testausympäristön. Käynnistä kehityspalvelin tällä päätekomennolla:

node server.js

Suorita seuraavaksi testikomentosarja erillisessä terminaalissa:

npm run test

Tämä komento käynnistää Cypress-työpöytäohjelman, joka tarjoaa testausympäristön. Kun se on auki, napsauta E2E-testaus -painiketta. Päästä päähän -testit varmistavat, että testaat Express API: n kokonaisuutena, mikä tarkoittaa, että Cypressillä on pääsy verkkopalvelimeen, reitteihin ja niihin liittyviin ohjaintoimintoihin.

Napsauta seuraavaksi Jatkaa lisätäksesi Cypress-määritystiedostoja.

Kun asennusprosessi on valmis, sinun pitäisi nähdä projektissasi uusi Cypress-kansio. Cypress lisää myös a cypress.config.js tiedosto, joka sisältää testien kokoonpanoasetukset.

Päivitä tämä tiedosto sisältämään palvelimesi perus-URL seuraavasti:

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

Kirjoita testitapaukset

Nyt olet valmis kirjoittamaan joitain testitapauksia. Valitse ensin selain, jossa Cypress käynnistyy suorittaaksesi testit Cypress-asiakasohjelman vaihtoehdoista.

Napsauta seuraavaksi Luo uusi spesifikaatio -painiketta luodaksesi testitiedoston ja anna nimi. Napsauta sitten Luo spesifikaatio.

Avaa nyt sypressi/fixtures/example.json tiedosto ja päivitä sen sisältö seuraavilla käyttäjätunnuksilla. Fixtures ovat tiedostoja, jotka sisältävät staattista testidataa, jota voit käyttää testitapauksissa.

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

Cypress tarjoaa a cy.request tapa tehdä HTTP-pyyntöjä web-palvelimelle. Voit käyttää sitä testaamaan erilaisia ​​HTTP-päätepisteitä, jotka hallitsevat erilaisia ​​toimintoja, mukaan lukien GET, POST, PUT ja DELETE.

Testaaksesi kolmea aiemmin määrittämääsi API-reittiä, aloita kuvaamalla rekisterin päätepisteen testitapaus. Tämän testitapauksen tulee varmistaa, että päätepiste toimii oikein rekisteröimällä uusi käyttäjä ja vahvistamalla väitteet.

Avaa cypress/e2e/user.routes.spec.cy.js tiedosto ja päivitä sen sisältö seuraavalla koodilla.

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

Tässä testissä Cypress lataa testitiedot kiinnitystiedostoon ja tekee POST-pyynnöt määritettyyn päätepisteeseen pyynnön rungon tiedoilla. Jos kaikki väitteet hyväksytään, testitapaus menee läpi. Muuten se epäonnistuu.

On syytä huomata, että Cypress-testien syntaksi muistuttaa läheisesti Mocha-testeissä käytettyä syntaksia, jonka Cypress on omaksunut.

Kuvaile nyt testiä varten käyttäjiä reitti. Testin tulee varmistaa, että vastaus sisältää käyttäjätietoja, kun tähän päätepisteeseen tehdään pyyntöjä. Voit saavuttaa tämän lisäämällä seuraavan koodin sisään kuvata testilohko.

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

Liitä lopuksi testitapaus, joka testaa kirjautumisen päätepisteen ja vakuuttaa, että vastauksen tila on 200, mikä osoittaa onnistuneen kirjautumisyrityksen.

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

Suorita testit palaamalla Cypressin hallinnoimaan selainversioon ja valitsemalla testitiedosto, jonka haluat suorittaa.

Cypress-testin juoksija suorittaa testit ja kirjaa niiden tulokset näyttäen jokaisen testitapauksen hyväksynnän tai epäonnistumisen.

Yllä olevat esimerkit havainnollistavat, kuinka voit testata erilaisia ​​reittejä ja niitä vastaavia ohjaintoimintoja varmistaaksesi niiden toimivuuden ja odotetun toiminnan. Vaikka sovellusliittymien toimivuuden testaaminen on välttämätöntä, sinun ei pidä rajoittaa testausaluetta vain tähän näkökohtaan.

Kattavaan API-testausstrategiaan tulisi sisältyä myös suorituskyvyn, kuormituksen ja muiden palvelujen integroinnin testejä. Sisällyttämällä erilaisia ​​testausmenetelmiä strategiassasi voit saavuttaa perusteellisen testikattavuuden ja varmistaa, että sovellusliittymäsi ovat sekä toimivia että luotettavia, ennen kuin otat koodisi käyttöön tuotantoon.

Testaa koko verkkokokemuksesi Cypressin avulla

Cypress on loistava työkalu verkkosovellusten testaamiseen, ja se kattaa saumattomasti sekä käyttöliittymän että taustan testit.

Sen käyttäjäystävällisten testausominaisuuksien avulla voit helposti ja nopeasti perustaa testausympäristön yhdelle alustalle. Sen jälkeen voit testata sovelluksesi eri näkökohtia perusteellisesti ja varmistaa huippuluokan suorituskyvyn.