Cypress Tutorial: A Comprehensive Guide

Samuel Freitas — Wed, 03 Apr 2024 21:59:44 +0000

Cypress é um framework de testes, de código aberto e de fácil configuração.

Totalmente baseado em uma nova arquitetura, isenta de outros frameworks de testes, o Cypress apresenta um painel próprio que exibe exatamente o que está acontecendo durante a execução dos testes. À medida que o script é escrito, é possível acompanhá-lo, auxiliando o Analista de Testes (QA) na visualização de quais partes do código necessitam de ajustes.

Quais testes podem ser feitos com Cypress?

Cinco tipos de testes de software podem ser realizados com o framework. São eles:

End-to-End
Interface de Usuário
API’s
Componentes
Unidade

Quais tecnologias podem ser usadas pelo Cypress?
Para realizar testes com o framework, as seguintes tecnologias podem ser utilizadas:

JS
Javascript/Typescript
CoffeScript
Moca
Chai
Assíncrono

Iniciando um projeto com o Cypress

Para um Projeto Cypress, antes de qualquer coisa, é preciso preparar o ambiente com Node.JS e Visual Studio Code (VS Code). Em seguida, crie uma pasta com o nome do seu projeto e inicie um console para executar o comando: npm init –y. Ele criará o arquivo package.json.

Em seguida, no console, execute o comando: code. para abrir o projeto no VS Code.

Com o projeto criado, iremos abrir o terminal do VS Code e executar o comando: npm install cypress, que é o comando para instalar o Cypress no nosso projeto. Em seguida, será possível visualizar a versão instalada do framework no arquivo package.json, e nele iremos adicionar o script “cypress:open”:”cypress open”.

No terminal do VS Code, execute o comando: npm run cypress:open. Com o dashboard aberto, o projeto será iniciado com testes exemplos do próprio Cypress. Se você clicar em algum arquivo .spec.js, ele já irá executar os testes desse arquivo.

Entendendo a Estrutura
Para utilizar o Cypress da forma correta, é importante compreender alguns aspectos da sua estrutura, como:

Normalmente os arquivos de testes ficam na pasta integration;
Na pasta support fica o arquivo js que é o arquivo que guardara o caminho do seu elemento de tela;
O arquivo commands é utilizado para criação de comandos do seu projeto;
Na pasta fixture ficam os arquivos .json usados nos testes;

O arquivo json é utilizado para configurações do projeto, por exemplo, a nossa baseUrl.

Criando um Arquivo de Testes
Para criarmos um arquivo de testes, basta adicionar um arquivo com nome do seu teste e com a extensão .spec.js.

Na estrutura, iremos adicionar o describe para dar o contexto dos nossos testes, e o it para criar o teste.

Principais comandos do Cypress

Para facilitar o uso do framework, listarei agora alguns dos principais comandos do Cypress.

Para encontrar elementos em tela:

GET: cy.get(‘[data-cy=name]’)
CONTAINS: cy.contains(“Cadastrar”)

Para interagir com elementos de tela:

- Type:
utilizado para escrever
cy.get(‘[data-cy=name]’).type(“Joaozinho”);

- Click:
utilizado para clicar no elemento selecionado
cy.get(locators.CADASTRO.btnCadastrar).click()

- Selecionar:
utilizado para selecionar um elemento
cy.get(Loc.CADASTRO.campoUF).select(“RS”);

- Check/Uncheck:
utilizado para aplicar o check
cy.get(‘[type=”checkbox”]’).check()

Asserções para nossos testes:

- Should
cy.get(locators.MENU.nomeUsuarioLogado).should(“contain.text”, “Joaozinho”);

- Expect
expect(response.body).has.property(“id”);

Exemplo de Teste Funcional

Na imagem abaixo, podemos ver um exemplo de teste funcional no Cypress. No primeiro bloco realizamos as interações de um cadastro; no segundo clicamos no botão de cadastro que chama o método post; e no último bloco realizamos as validações do nosso teste.

Exemplo de Estrutura de Teste de API
Nos testes de API, por sua vez, dividimos a estrutura do teste em três partes: na pasta test ficará o arquivo .spec.js, na pasta request ficará a estrutura da nossa requisição; e na pasta payload fica o corpo de nossa requisição. Podemos ver esse exemplo nas imagens abaixo:

No nosso arquivo .spec fica a validação do nosso teste.

Exemplo de arquivo request:

Exemplo de arquivo payload:

Espero ter esclarecido as principais dúvidas em relação ao Cypress. Se você quiser saber mais sobre o framework clique aqui.

DEV Community: Samuel Freitas

Cypress Tutorial: A Comprehensive Guide