Cypress is geweldig voor front-end testen, maar het kan ook uw API's effectief testen.
Cypress is een populair testframework dat is afgestemd op JavaScript-toepassingen. Hoewel het in de eerste plaats is ontworpen om UI-componenten en interacties met UI-elementen in een browser te testen, is het dat ook zeer geschikt voor het testen van API's. U kunt het raamwerk gebruiken om RESTful API's te testen via HTTP-verzoeken en deze te valideren reacties.
Met Cypress kunt u uitgebreide tests schrijven die het volledige spectrum van de workflow van uw webapplicatie bestrijken.
Aan de slag met API-testen met Cypress
Cypress helpt u te verifiëren dat uw API's werken zoals u verwacht. Dit proces omvat doorgaans het testen van de eindpunten, invoergegevens en HTTP-reacties van de API. U kunt de integratie met externe services verifiëren en bevestigen dat de mechanismen voor foutafhandeling correct werken.
Door uw API's te testen, zorgt u ervoor dat ze functioneel en betrouwbaar zijn en voldoen aan de behoeften van apps die ervan afhankelijk zijn. Het helpt om bugs in een vroeg stadium te identificeren en op te lossen, waardoor problemen in de productie worden voorkomen.
Cipres is een geweldige UI-testtool, gebruikt door enkele van de populaire JavaScript-frameworks. De mogelijkheid om HTTP-verzoeken te maken en te testen maakt het net zo effectief bij het testen van API's.
Het doet dit door Node.js te gebruiken als engine om HTTP-verzoeken te doen en hun antwoorden af te handelen.
U kunt de code van dit project vinden in zijn GitHub opslagplaats.
Maak een Express.js REST API
Starten, maak een Express-webserveren installeer dit pakket in uw project:
npm install corsVoeg vervolgens het Cypress-pakket toe aan uw project:
npm install cypress --save-devUpdate ten slotte uw pakket.json bestand om dit testscript op te nemen:
"test": "npx cypress open"Definieer de API-controllers
In een realistisch geval zou je API-aanroepen doen om gegevens uit een database of een externe API te lezen en te schrijven. In dit voorbeeld simuleert en test u dergelijke API-aanroepen echter door gebruikersgegevens toe te voegen en op te halen uit een array.
Maak in de hoofdmap van uw projectmap een controllers/userControllers.js bestand en voeg de volgende code toe.
Definieer eerst a registreerGebruiker controllerfunctie die de gebruikersregistratieroute beheert. Het haalt de gegevens van de gebruiker uit de aanvraagtekst, maakt een nieuw gebruikersobject aan en voegt dit toe aan de gebruikers reeks. Als het proces succesvol is, moet het reageren met een statuscode 201 en een bericht dat aangeeft dat de gebruiker is geregistreerd.
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!!' });
}
};
Voeg een tweede functie toe—getUsers—om gebruikersgegevens uit de array op te halen en deze als JSON-antwoord terug te sturen.
exports.getUsers = async (req, res) => {
try {
res.json(users);
} catch (error) {
console.error(error);
res.status(500).send({ message: 'An error occurred!!' });
}
};Tenslotte kunt u ook inlogpogingen simuleren. Voeg in hetzelfde bestand deze code toe om te controleren of de opgegeven gebruikersnaam en het wachtwoord overeenkomen met de gebruikersgegevens in het gebruikers reeks:
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!!' });
}
};
Definieer de API-routes
Om de routes voor uw Express REST API te definiëren, maakt u een nieuwe routes/userRoutes.js bestand in de hoofdmap en voeg deze code eraan toe:
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;
Werk het Server.js-bestand bij
Update de server.js bestand om de API als volgt te configureren:
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;
Zet de testomgeving op
Nu de demo-API is geïnstalleerd, bent u klaar om de testomgeving in te richten. Start de ontwikkelingsserver met dit terminalcommando:
node server.jsVoer vervolgens de opdracht testscript uit in een aparte terminal:
npm run testMet deze opdracht wordt de Cypress-desktopclient gestart, die de testomgeving biedt. Zodra het is geopend, klikt u op de E2E-testen knop. End-to-end tests zorgen ervoor dat u de Express API als geheel test, wat betekent dat Cypress toegang krijgt tot de webserver, de routes en de bijbehorende controllerfuncties.
Klik vervolgens Doorgaan om Cypress-configuratiebestanden toe te voegen.
Zodra het installatieproces is voltooid, zou u een nieuwe Cypress-map in uw project moeten zien. Cypress zal ook een cypress.config.js bestand dat de configuratie-instellingen voor uw tests bevat.
Ga je gang en update dit bestand als volgt om je serverbasis-URL op te nemen:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
chromeWebSecurity: false,
e2e: {
baseUrl: 'http://localhost: 5000',
setupNodeEvents(on, config) {
},
},
});
Schrijf de testgevallen
Nu ben je klaar om enkele testcases te schrijven. Selecteer eerst de browser waarin Cypress wordt gestart om de tests uit te voeren via de beschikbare opties op de Cypress-client.
Klik vervolgens op de Maak nieuwe spec om uw testbestand te maken en een naam op te geven. Dan klikken Maak spec.
Open nu de cipres/armaturen/example.json bestand en update de inhoud ervan met de volgende gebruikersreferenties. Fixtures zijn bestanden die statische testgegevens bevatten die u in de testgevallen kunt gebruiken.
{
"username": "testuser",
"password": "password123"
}Cipres biedt een cy.verzoek methode om HTTP-verzoeken naar een webserver te sturen. U kunt het gebruiken om verschillende typen HTTP-eindpunten te testen die verschillende bewerkingen beheren, waaronder GET, POST, PUT en DELETE.
Om de drie API-routes die u eerder hebt gedefinieerd te testen, begint u met het beschrijven van de testcase voor het registereindpunt. Deze testcase moet verifiëren dat het eindpunt correct werkt door met succes een nieuwe gebruiker te registreren en de beweringen te valideren.
Open de cypress/e2e/user.routes.spec.cy.js bestand en update de inhoud met de volgende 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');
});
});
});In deze test laadt Cypress de testgegevens in het armatuurbestand en maakt POST-verzoeken naar het opgegeven eindpunt met de gegevens in de verzoektekst. Als alle beweringen slagen, zal de testcase slagen. Anders zal het mislukken.
Het is vermeldenswaard dat de syntaxis voor Cypress-tests sterk lijkt op de syntaxis die wordt gebruikt in Mocha-tests, die Cypress heeft overgenomen.
Beschrijf nu de test voor de gebruikers route. De test moet verifiëren dat het antwoord gebruikersgegevens bevat wanneer verzoeken aan dit eindpunt worden gedaan. Om dit te bereiken, voegt u de volgende code toe aan de beschrijven test blok.
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);
});
});
});Voeg ten slotte een testcase toe die het inlogeindpunt test en bevestig dat de antwoordstatus 200 is, wat een succesvolle inlogpoging aangeeft.
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);
});
});
});
});Om de tests uit te voeren, keert u terug naar de browserversie die door Cypress wordt beheerd en selecteert u het specifieke testbestand dat u wilt uitvoeren.
De Cypress-testloper voert de tests uit en registreert de resultaten, waarbij de status van elke testcase wordt weergegeven.
De bovenstaande voorbeelden illustreren hoe u verschillende routes en de bijbehorende controllerfuncties kunt testen om hun functionaliteit en verwacht gedrag te garanderen. Hoewel het essentieel is om de functionaliteit van API's te testen, mag u de testscope niet uitsluitend tot dit aspect beperken.
Een uitgebreide API-teststrategie moet ook tests omvatten op het gebied van prestaties, belasting en integratie met andere services. Door op te nemen verschillende soorten testmethoden In uw strategie kunt u een grondige testdekking bereiken en ervoor zorgen dat uw API's zowel functioneel als betrouwbaar zijn voordat u uw code in productie neemt.
Test uw volledige webervaring met Cypress
Cypress is een fantastisch hulpmiddel voor het testen van webapplicaties en omvat naadloos tests voor zowel de front-end als de back-end.
Met de gebruiksvriendelijke testfuncties zet u eenvoudig en snel een testomgeving op, allemaal op één platform. U kunt het vervolgens gebruiken om verschillende aspecten van uw applicatie grondig te testen en topprestaties te garanderen.