Cypress é ótimo para testes front-end, mas também pode testar suas APIs de maneira eficaz.

Cypress é uma estrutura de teste popular adaptada para aplicativos JavaScript. Embora seja projetado principalmente para testar componentes de UI e interações com elementos de UI em um navegador, também é adequado para testar APIs. Você pode usar a estrutura para testar APIs RESTful por meio de solicitações HTTP e validar o respostas.

Cypress permite escrever testes abrangentes que abrangem todo o espectro do fluxo de trabalho do seu aplicativo web.

Primeiros passos com testes de API usando Cypress

Cypress ajuda você a verificar se suas APIs funcionam conforme o esperado. Esse processo normalmente inclui testar os endpoints da API, os dados de entrada e as respostas HTTP. Você pode verificar a integração com quaisquer serviços externos e confirmar se os mecanismos de tratamento de erros funcionam corretamente.

Testar suas APIs garante que elas sejam funcionais, confiáveis ​​e atendam às necessidades dos aplicativos que dependem delas. Ajuda a identificar e corrigir bugs desde o início, evitando que problemas ocorram na produção.

instagram viewer

Cipreste é uma ótima ferramenta de teste de UI, usada por alguns dos estruturas JavaScript populares. Sua capacidade de fazer e testar solicitações HTTP o torna igualmente eficaz no teste de APIs.

Ele faz isso usando Node.js como mecanismo para fazer solicitações HTTP e lidar com suas respostas.

Você pode encontrar o código deste projeto em seu GitHub repositório.

Crie uma API REST Express.js

Para começar, crie um servidor web Expresse instale este pacote em seu projeto:

npm install cors

Em seguida, adicione o pacote Cypress ao seu projeto:

npm install cypress --save-dev

Por fim, atualize seu pacote.json arquivo para incluir este script de teste:

"test": "npx cypress open"

Defina os controladores de API

Em um caso real, você faria chamadas de API para ler e gravar dados de um banco de dados ou de uma API externa. No entanto, neste exemplo, você simulará e testará essas chamadas de API adicionando e buscando dados do usuário em uma matriz.

No diretório raiz da pasta do seu projeto, crie um controladores/userControllers.js arquivo e adicione o seguinte código.

Primeiro, defina um registrarUsuário função de controlador que gerenciará a rota de registro do usuário. Ele extrairá os dados do usuário do corpo da solicitação, criará um novo objeto de usuário e o adicionará ao Usuários variedade. Se o processo for bem-sucedido, ele deverá responder com um código de status 201 e uma mensagem indicando que registrou o usuário.

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

Adicione uma segunda função—getUsers—para recuperar dados do usuário da matriz e retorná-los como resposta JSON.

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

Por último, você também pode simular tentativas de login. No mesmo arquivo, adicione este código para verificar se o nome de usuário e a senha fornecidos correspondem a algum dado do usuário no Usuários variedade:

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

Defina as rotas da API

Para definir as rotas para sua API Express REST, crie um novo rotas/userRoutes.js arquivo no diretório raiz e adicione este código a ele:

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;

Atualizar o arquivo Server.js

Atualize o servidor.js arquivo para configurar a API da seguinte maneira:

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;

Configure o ambiente de teste

Com a API de demonstração instalada, você está pronto para configurar o ambiente de teste. Inicie o servidor de desenvolvimento com este comando de terminal:

node server.js

Em seguida, execute o comando de script de teste em um terminal separado:

npm run test

Este comando iniciará o cliente de desktop Cypress, que fornece o ambiente de teste. Depois de aberto, clique no Teste E2E botão. Os testes ponta a ponta garantem que você teste a API Express como um todo, o que significa que o Cypress terá acesso ao servidor web, às rotas e às funções do controlador associadas.

A seguir, clique Continuar para adicionar arquivos de configuração do Cypress.

Assim que o processo de configuração for concluído, você deverá ver uma nova pasta Cypress em seu projeto. Cypress também adicionará um cipreste.config.js arquivo que contém as definições de configuração para seus testes.

Vá em frente e atualize este arquivo para incluir o URL base do servidor da seguinte forma:

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

Escreva os casos de teste

Agora você está pronto para escrever alguns casos de teste. Primeiro, selecione o navegador no qual o Cypress será iniciado para executar os testes a partir das opções disponíveis no cliente Cypress.

A seguir, clique no Criar nova especificação botão para criar seu arquivo de teste e fornecer um nome. Então clique Criar especificação.

Agora, abra o cipreste/fixtures/example.json arquivo e atualize seu conteúdo com as seguintes credenciais de usuário. Fixtures são arquivos que contêm dados de teste estáticos que você pode usar nos casos de teste.

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

Cipreste fornece um cy.solicitação método para fazer solicitações HTTP a um servidor web. Você pode usá-lo para testar diferentes tipos de endpoints HTTP que gerenciam diferentes operações, incluindo GET, POST, PUT e DELETE.

Para testar as três rotas de API definidas anteriormente, comece descrevendo o caso de teste para o endpoint de registro. Este caso de teste deve verificar se o endpoint está funcionando corretamente registrando com sucesso um novo usuário e validando as asserções.

Abra o cipreste/e2e/user.routes.spec.cy.js arquivo e atualize seu conteúdo com o código a seguir.

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

Neste teste, o Cypress carregará os dados de teste no arquivo de fixture e fará solicitações POST para o endpoint especificado com os dados no corpo da solicitação. Se todas as asserções forem aprovadas, o caso de teste será aprovado. Caso contrário, irá falhar.

É importante notar que a sintaxe dos testes Cypress se assemelha muito à sintaxe usada nos testes Mocha, que o Cypress adotou.

Agora, descreva o teste para o Usuários rota. O teste deve verificar se a resposta contém dados do usuário quando solicitações são feitas para esse endpoint. Para conseguir isso, adicione o seguinte código dentro do descrever bloco de teste.

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

Por fim, inclua um caso de teste que testará o endpoint de login e afirmará que o status da resposta é 200, indicando uma tentativa de login bem-sucedida.

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

Para executar os testes, retorne à versão do navegador gerenciado pelo Cypress e selecione o arquivo de teste específico que deseja executar.

O executor de testes Cypress executará os testes e registrará seus resultados, mostrando o status de aprovação ou reprovação de cada caso de teste.

Os exemplos acima ilustram como você pode testar várias rotas e suas funções de controlador correspondentes para garantir sua funcionalidade e comportamento esperado. Embora seja essencial testar a funcionalidade das APIs, você não deve limitar o escopo do teste apenas a esse aspecto.

Uma estratégia abrangente de testes de API também deve incluir testes de desempenho, carga e integração com outros serviços. Ao incluir diferentes tipos de métodos de teste em sua estratégia, você pode obter uma cobertura completa de testes e garantir que suas APIs sejam funcionais e confiáveis ​​antes de implantar seu código na produção.

Testando toda a sua experiência na Web usando Cypress

Cypress é uma ferramenta fantástica para testar aplicativos da web, cobrindo perfeitamente testes de front-end e back-end.

Com seus recursos de teste fáceis de usar, você pode configurar um ambiente de teste de maneira fácil e rápida, tudo em uma plataforma. Você pode então usá-lo para testar completamente diferentes aspectos do seu aplicativo e garantir um desempenho de alto nível.