Iniciando em cypress!

Diego Souza — Fri, 13 Jan 2023 00:50:36 +0000

Iniciando em cypress

O que é cypress?

Cypress é uma ferramenta de automação focado em e2e que utiliza Javascript como sua linguagem. Utilizado em automação de Front-end de páginas web, mas possibilitando o seu uso para testes de API.

Instalação

Node

Verificar se o npm está instalado corretamente, podendo verificar a versão instalada: npm -v.
Verificar a versão do node: node -v.
Instalar as versões pares do Node, as versões LTS. exemplo: 16.13.1.
Iniciar o projeto: npm init. Será feita algumas perguntas para criação do package.json.
Na configuração do package.json, informar 'npx cypress open' no 'test command'
'npx cypress open' é um executor dos pacotes npm

Cypress

npm i cypress --save-dev

Como iniciar o Cypress

Existem duas formas de se executar o cypress, a primeira é utilizando 'npm run test' que vai abrir a ferramenta do cypress, e a segunda é utilizando 'npx cypress run' que vai rodar os testes no terminal.

Mesmo seguindo todas as configurações passo a passo, é comum em algumas máquinas ocorrer na primeira execução do Cypress o erro: “Command timed out after 30000 miliseconds”. Para isso, temos duas alternativas:

Executar novamente, com o comando npm run test ou npx cypress open;
Aumentar esse tempo de verificação na variável VERIFY_TEST_RUNNER_TIMEOUT_MS de 30000 para 100000 no arquivo verify.js que fica no caminho: node_modulescypresslib asks

Pastas

fixtures: Utilizada para os arquivos de dados fixos, como mocks que serão utilizados nos testes.
e2e: Utilizada para os arquivos de testes.
plugins: Utilizada para arquivos que eu posso criar/editar para modificar ou estender o comportamento interno no Cypress.
support: Utilizada para arquivos de importação e comandos personalizados que podemos criar dentro do Cypress.

Características positivas do Cypress

Execução rápida dos testes.
Verifica quais navegadores tenho instalado na máquina, facilitando na execução.
Possibilidade de acompanhar toda a linha do tempo dos testes, como o estado anterior, o que aconteceu após a ação etc.

Principais comandos

describe: é uma função que tem 2 parâmetros, o primério é o nome da suite de testes, o segundo é uma função onde eu posso executar qualquer coisa
beforeEach: é um comando que é executado antes do inicio de cada cenário de testes.
it: é um item de testes ou cenário de teste.
.visit: resposável por abrir o link informado.
.contains: resposável por identificar elementos pelo texto.
.get: resposável por identificar elementos pela classe, tag, id etc.
.type: responsável por realizar a ação de escrita.
.click: responsável por realizar a ação de click.
.should: responsável por realizar as validações.
.only: faz com que seja executado somente o cenário que tenha esse comando.
.on: usado para eventos, como por exemplo windows.alert.
.request: responsável por estruturar e validar as requests.
.expect: responsável por realizar as validações.

Pacotes úteis

mochawesome é um gerador de relatório personalizado. Com ele podemos fazer configurações, verificar se o log será gerado em html, json, onde será gerado, qual o formato de data para ser utilizado no nome, o título, dentre outros parâmetros

npm i -D mochawesome

Após a instalação. deverá configurar o arquivo cypress.json

{
 "reporter": "mochawesome",
 "reporterOptions": {
 "reportDir": "cypress/report/mochawesome-report",
 "overwrite": true,
 "html": true,
 "json": false,
 "timestamp": "mmddyyyy_HHMMss",
 "charts": "false" ,
 "code": "false",
 "reporterTitle": "Automação com cypress"
 },
 "projectId": "zb9ibc"
}

Não chega a ser um pacote, mas uma funcionalidade do cypress, onde você consegue ter um histórico de testes, relatórios mais detalhados sobre os testes executados. Utilizar o comando sempre que for executar os testes informando a key do projeto.

npx cypress run --record --key 'key'

Criar comandos

Criar comandos facilita na criação dos testes, além de eliminar código repetido. Deverá ser criado na pasta support e importar no arquivo index.js.

Cypress.Commands.add('login', (nome, senha) => {
 cy.get('input[formcontrolname="userName"]').type(nome);
 cy.get('input[formcontrolname="password"]').type(senha);
 cy.contains('button', 'login').click();
})

Testes de API

Também é possível realizar os testes de API, a sintaxe e as validações são bem tranquilas e parecidas com as que temos no mercado.

 addUser() {
 return cy.request({
 method: "POST",
 url: "usuarios",
 body: payloadAddUser,
 failOnStatusCode: false,
 });
 }

 it("Cadastrado com sucesso", () => {
 Login.loginAdm().then((token) => {
 POSTProduto.addProduct(token.body.authorization).then((response) => {
 expect(response.status).to.eq(201);
 expect(response.body.message).to.eq("Cadastro realizado com sucesso");
 DELETEProduto.deleteProduct(
 response.body._id,
 token.body.authorization
 );
 });
 });
 })

Proteger dados sensíveis

É possível guardar configurações nas próprias variáveis de ambiente do cypress, como o cypress.json, porém, ele é um arquivo que precisamos enviar para o repositório. Vamos utilizar o cypress.env.json, que também é um arquivo de configuração, mas que não precisamos enviar para nosso repositório, deixando-o no gitignore.

Boas práticas

Evitar flaky tests: São testes que ocorrem erros de forma aleatória, não necessariamente são falhas. Exemplo: era esperada que a request fosse realizada em 3 segundos, mas demorou 5, não quer dizer que houve uma falha, mas sim uma demora que pode ou não acontecer.

Definir uma baseurl

Utilizar variáveis de ambiente para dados sensíveis

cy.login(Cypress.env('userName'), Cypress.env('password'))

Utilizar {log: false} para dados sensíveis

type(senha, {log: false});

stub: muito útil para 'mockar' um status esperado.

cy.intercept('POST', `https://serverest.dev/`, {
 statusCode: 400
 }).as('stubPost')
adicionar wait no cenário(it) para que o teste aguarde a interceptação
cy.wait('@stubPost')

mock: muito útil quando queremos saber se o endpoint vai ser chamado corretamente, se os parâmetros esperados estão corretos etc.

DEV Community: Diego Souza