DEV Community

andressaroberts
andressaroberts

Posted on

QAs em uma nova jornada: desafios utilizando Cypress

Por: Andressa Roberts e Lucas Carmichael

Acho que em nossos mundos algumas coisas sempre foram muito difíceis, por isso nossa dedicação foi e é fundamental para que consigamos atingir nossos objetivos a curto, médio e a longo prazo.

Resolvemos compartilhar um pouco do nosso conhecimento e das aventuras desses últimos dias.

Sempre tivemos uma série de questionamentos: "Vamos automatizar tudo?”, “Como iremos fazer isso?”, “O que usaremos para automatizar?”, “Qual o impacto em nossas vidas?”, “Qual o impacto em nossa empresa?”, “Quão aberta é a cabeça do nosso time para conceito de automação?”. Mas pouco sabíamos sobre esse universo na prática.

Eis que, por esses dias, houve uma conversa por “WhatsZap” e nele surgiu a idéia de estudarmos uma ferramenta de automação (juntos), porém os pontos chaves que procuramos encontrar era simplicidade ao escrever os testes, praticidade em criar e definir as estruturas de nossa suíte de teste e a qualidade na entrega de nosso projeto final.

Então decidimos automatizar um projeto com um framework/ferramenta que ainda não tínhamos contato e cremos que muitos QAs por aí ainda não tenham: O Cypress, que utiliza em sua essência a linguagem de programação JavaScript para escrita dos testes. Definimos também um site para ser a “cobaia” de nossas automações, o OrangeHRM Demo, pois a diversidade de elementos para se aprender e brincar é extensa e o mesmo é próprio para realização de teste de software automatizados.
Em nossas impressões iniciais sobre o Cypress, levantamos alguns pontos que consideramos interessantes:

Prós:

  • É FREE e open source.
  • Sua instalação é simples.
  • A estruturação do projeto é fácil e prático o entendimento.
  • É inteligente: cada vez que o teste é salvo estando em execução no seu computador, assim que o CTRL+S é pressionado, é disparado um comando que roda parcialmente ou todo os nossos testes já criados.
  • Tem uma interface gráfica agradável e de fácil utilização.
  • Permite verificar o estado da aplicação antes e depois da ação disparada.

Tela inicial do framework Cypress

Alt Text

Execução dos testes no framework Cypress (Before)

Alt Text

Execução dos testes no framework Cypress (After)

Alt Text

  • As esperas no Cypress são automáticas! Adeus esperas implícitas e explícitas XD
  • Permite realizar testes end-to-end e teste em APIs.
  • É headless mode, ou seja, não requer uma interface gráfica ou browser (aberto) para executar os testes.
  • Vídeos são salvos após a execução dos testes para posterior verificação e evidências.
  • Quando os testes falham o Cypress tira screenshots do estado anterior e posterior de onde falhou.
  • Permite executar teste no próprio navegador (Google Chrome), onde o código da sua aplicação se encontra possivelmente.
  • Comunidade é ativa e cada vez mais crescente.

Contras:

  • Apenas executa teste no navegador Google Chrome, ou extensões do mesmo como (Electron).
  • Grande parte do Material está em inglês (Em terra de Google Translate isso não é mais um problema tão grande!)

Para nos ajudar a organizar as tarefas, estamos utilizando o Trello. Dividimos as funcionalidades e a princípio simplificamos a estrutura em backlog, in progress, code review e done.

Além do Trello e do Cypress em si, também estamos utilizando o gitlab pra disponibilizar o projeto e queremos no final do aprendizado executar nossos testes no processo de CI (Integração Contínua).

Sabemos que por ser relativamente recente, iremos encontrar algumas barreiras, o que pode gerar algumas dificuldades na resolução de possíveis problemas que possamos enfrentar. Mas decidimos dar uma chance e ver se a promessa da próxima ferramenta de teste de última geração para front-end de aplicações web modernas será de fato uma experiência completa, real e agradável.

No próximo texto vamos abordar os procedimentos para instalação e um pouco da estrutura do Cypress.

Fontes que estamos utilizando nesta jornada:

Top comments (1)

Collapse
 
carmichaellucas profile image
Lucas Carmichael

Very Good!