PT | EN
Publicado dia 18 de maio de 2021

Cypress: passo a passo para começar a usar

| Tempo de leitura 4 minutos Tempo de leitura 4 minutos
Cypress: passo a passo para começar a usar

No último encontro da Comunidade de Prática de Qualidade de Software da SoftDesign*, compartilhei com os colegas meus conhecimentos sobre o Cypress. Ele é um framework de testes, de có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 está acontecendo durante a execução dos testes. À medida que o script é escrito, é 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.

cypress 1

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

cypress 2

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

cypress 3

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.

cypress 4

cypress 5

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;

cypress 6

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

cypress 7

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.

cypress 8

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

cypress 9

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.

cypress 10

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:

cypress 11

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

cypress 12

Exemplo de arquivo request:

cypress 13

Exemplo de arquivo payload:

cypress 14

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


*A Comunidade de Prática de Qualidade da SoftDesign é composta por Analistas de Testes (QA) e demais profissionais interessados. Mensalmente, o grupo se reúne online para compartilhar conhecimento e gerar aprendizado.

Foto do autor

Ederson Meira dos Santos

Analista de Testes na SoftDesign, já foi desenvolvedor e agora atua nos times garantindo a qualidade dos produtos. Cursa Análise e Desenvolvimento de Sistemas no IFRS.

Quer saber mais sobre
Design, Estratégia e Tecnologia?