Cypress Tutorial: A Comprehensive Guide
Tags: cypress, testing, javascript, webdev
Published: 2024-04-03 21:59:44

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**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gurf8mctuc3rbyz6izb.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sou8pc9ien0nhwvx8v1.png)


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”**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94hoqz1nz0fbi1p5djxh.png)


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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7os3gskbdplcqxylowaz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnplg6zaukbhucyrv35p.png)




**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;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nts98u2qxqpxkoglsjys.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ofghha9ijccgxa6qv4m.png)


**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**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pncqa3k513u7up4je016.png)


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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdxd3o51km7l51r1yhpl.png)

**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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4ds0k8kzdejlrlqq6em.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vexuq98jvzf3m3nn1ks9.png)



Exemplo de arquivo **request**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqy4wpp44lxvbzy8wnlm.png)



Exemplo de arquivo **payload**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aye0735z8lrs3kwx1yz7.png)



Espero ter esclarecido as principais dúvidas em relação ao Cypress. Se você quiser saber mais sobre o framework [clique aqui](https://docs.cypress.io/guides/overview/why-cypress).