Solucionando a Teoria do Caos com Cypress.io

Solucionando a Teoria do
Caos com Cypress.io

Teoria do Caos
“A Teoria do Caos trata de sistemas complexos e dinâmicos rigorosamente
deterministas, mas que apresentam um fenômeno fundamental de
instabilidade chamado sensibilidade às condições iniciais que, modulando uma
propriedade suplementar de recorrência, torna-os não previsíveis na prática a
longo prazo.”

Teoria do Caos
A ideia é que uma pequena variação nas condições em determinado ponto de
um sistema dinâmico pode ter consequências de proporções inimagináveis.
À exemplo, o bater de asas de uma borboleta no Brasil pode provocar um
furacão no Texas.
Fazendo uma analogia com o Desenvolvimento de Software...

Automatizando Testes com
Cypress.io
Patrick Monteiro

O PROBLEMA
Com a busca de uma cultura DevOps dentro da W3AS notou-se a evolução em
diversos pontos de nosso processo de desenvolvimento.
O Back-end e Front-end evoluíram bastante, porém tínhamos um gargalo na
etapa de testes de nossos projetos.
Por mais que existam testes implementados no back e front, não resolvemos
esse tempo gasto nos testes que simulam o ambiente real.

A SOLUÇÃO
Para solucionar o problema, buscamos integrar ao desenvolvimento de novos
sistemas o teste conhecido como End-to-End(E2E).
O E2E é uma metodologia utilizada para testar se o fluxo de um aplicativo está
sendo executado corretamente do início ao fim.
Um exemplo de teste E2E teria como objetivos:
● Acessar um sistema com login e senha;
● Acessar um módulo do sistema;
● Realizar um crud completo;
● Verificar itens inseridos ou removidos;
● Sair do sistema

A FERRAMENTA
Para desenvolver os testes E2E, buscamos uma ferramenta moderna, simples
e eficaz.
O Cypress.io caiu como uma luva para nosso time, tanto de desenvolvimento
quanto para a equipe de testes pela sua simplicidade desde a instalação, até a
execução.
Com o cypress é possível produzir testes rapidamente, bastando ter
conhecimento mínimo em HTML, CSS e JavaScript.

A FERRAMENTA
Cypress permite que você escreve todos os tipos de testes:
● Testes de ponta a ponta;
● Testes de integração;
● Teste unitários;

Cypress.io
O Cypress testa seu código, e não sua paciência!
Ele apresenta um novo padrão de testes front-end que todo desenvolvedor e
engenheiro de controle de qualidade precisa.

Cypress.io
O ecossistema Cypress consiste em um Test Runner instalado localmente, de
código aberto e um serviço de Dashboard para gravar seus testes.
Após a criação do conjunto de testes, é possível integrar o Cypress ao seu
provedor de CI. E o Cypress ainda facilita disponibilizando algumas imagens
Docker.
Provedor de CI:
AppVeyor, BitBucket, BuildKite, CircleCI,
CodeShip Basic, CodeShip Pro, Concourse,
Docker, GitLab, Jenkins, Semaphore, Shippable,
Solano, TravisCI, VSTS CI/TeamFoundation...

O teste foi quebrado
por muito tempo...

Cypress.io
Os testes de ponta a ponta(E2E) não eram fáceis. Foi a parte que os
desenvolvedores odiaram por muito tempo.
O Cypress veio a facilitar a configuração, gravação, execução e depuração de
testes. Tudo em uma única ferramenta!

Características do Cypress
1 - Cypress não usa Selenium
A maioria das ferramentas de teste E2E é baseada no Selenium, e é por isso
que todas compartilham os mesmos problemas. Para tornar o Cypress
diferente, uma nova arquitetura foi construída a partir do zero.
Enquanto o Selenium executa comandos através da rede, o Cypress é
executado no mesmo ciclo de execução da sua aplicação.

2 - Cypress se concentra em fazer testes end-to-end REALMENTE bem
Cypress não é um framework de automação geral, nem é uma estrutura de
teste de unidade para seus serviços de back-end. Já existem ótimas
ferramentas por aí que fazem isso.
O Cypress cria uma experiência enquanto você escreve testes de ponta a ponta
para seus aplicativos Web.

3 - Cypress funciona em qualquer estrutura de front-end ou site
Cypress testa tudo o que é executado em um navegador da web. Toda
arquitetura em torno do Cypress é construída especialmente para lidar com
estruturas JavaScript modernas.
Estruturas com React, Angular, Vue, Elm, etc funcionam bem com Cypress,
assim como páginas e aplicativos renderizados por servidores mais antigos.

4 - Testes são escritos apenas em JavaScript
Embora você possa compilar o JavaScript de qualquer outro idioma, o código
de teste é executado no próprio navegador.
Não há ligação de idioma ou driver, sempre será apenas JavaScript.

5 - Cypress é tudo em um
Escrever testes E2E requer muitas ferramentas diferentes para trabalhar em
conjunto.
Com Cypress você obtém várias ferramentas em uma. Não há necessidade de
instalar 10 ferramentas e bibliotecas separadas para configurar seu conjunto
de testes.

6 - Cypress é para desenvolvedores e engenheiros de QA.
Um dos objetivos do Cypress era tornar o desenvolvimento orientado a testes
uma realidade para testes E2E. Ele permite você usá-lo enquanto constrói sua
aplicação.

7 - Cypress corre muito, muito mais rápido
Esses aprimoramentos arquitetônicos liberam a capacidade de fazer TDD com
testes completos de ponta a ponta pela primeira vez.
O Cypress foi construído para que o teste e o desenvolvimento possam ocorrer
simultaneamente. Você pode desenvolver mais rápido enquanto conduz todo o
processo de desenvolvimento com testes porque:
● você pode ver sua aplicação;
● você ainda tem acesso às ferramentas do desenvolvedor;
● e as alterações são refletidas em tempo real;
No final você terá desenvolvido mais, seu código será melhor e completamente
Testado!

Instalando Cypress.io
Instalar Cypress através do npm em seus projetos é super fácil:
npm install cypress --save-dev

Configurando Scripts
Após o Download, é necessário configurar os scripts em sua aplicação:
npm run test - Executa em background os testes.
npm run test:e2e - Abre o dashboard do Cypress.

Estrutura de pastas
Para que o Cypress gere a estrutura de pastas necessárias para executar os
testes, basta rodar o comando anterior npm run test:e2e. Ele identifica que não
existe um arquivo cypress.json e nem uma estrutura de pastas com os testes,
e cria automaticamente.

Estrutura de Pastas
● fixtures = basicamente são dados fixos para utilizarmos em nossos testes
● integration = onde ficarão nossos testes
● plugins = permitem que você toque, modifique ou estenda o
comportamento interno do cypress
● support = commandos personalizados e importação de arquivos

Adicionando um
arquivo de teste

Adicionando um arquivo de Teste
Supondo que você tenha instalado com sucesso o Test Runner e abriu o
aplicativo Cypress, agora é hora de escrever nosso primeiro teste. Em
cypress/integrations crie um arquivo:
CadastroUsuario.spec.js
Rapidamente o Test Runner exibe imediatamente na lista de testes de
integração. O Cypress monitora seus arquivos de especificação para quaisquer
alterações e exibe automaticamente elas.

Iniciando um teste
Mesmo que não tenhamos escrito nenhum teste, vamos clicar nele na lista e
assistir ao Cypress iniciar seu navegador.

Escrevendo um teste simples
Agora é hora de escrever nosso primeiro teste no ambiente de
desenvolvimento.
Em nosso arquivo CadastroUsuario.spec.js adicionaremos o código:
O contexto no cypress é equivalente aos cenários testes, e as iterações são
equivalentes as ações dos cenários de testes.

Utilizando o Cypress sem npm
Se você estiver em um ambiente sem node e npm instalados, o cypress
permite baixar a última versão compactadas, sem a necessidade de
dependências.

Utilizando o Cypress sem npm
Basta descompactar o arquivo, e dentro do diretório executar o Cypress.exe

Criando o diretório
Criamos um diretório para nosso projeto chamado TesteUsuario, e abrimos
com o Test Runner do Cypress.
Ao abrir, o Cypress identifica que não há a estrutura de pastas e arquivo
Cypress.json e os cria.

Configurando nossa baseUrl
Para facilitar o desenvolvimento dos testes e evitar trechos repetitivos,
podemos configurar uma baseUrl para nossos testes.
Essa configuração é feita no arquivo cypress.json:

Configurando nossa baseUrl
Agora ao visitar nossa aplicação, não precisamos mais digitar o endereço por
completo, apenas a rota:
Neste caso, estamos visitando a rota inicial da aplicação.

Escrevendo os Testes
Para acessar o formulário, iremos configurar uma nova iteração com uma
outra url:

Escrevendo os Testes
Note que o acesso é feito muito rápido, para adicionar um delay, podemos
utilizar o comando cy.wait()

Escrevendo os testes
O Cypress possui uma ferramenta de seleção, que nos permite identificar
elementos no DOM para acessarmos com mais facilidade.

Agora tentamos preencher um campo do formulário, começamos pelo campo
Nome.
O primeiro passo é identificar o input do Nome no HTML, para isso usamos o
comando cy.get() e passamos o elemento e propriedade que será buscado no
HTML.

Após identificar o input no HTML, é necessário dar o focus() neste elemento.
Para isso usamos o comando focus():
Por fim, iremos preencher nosso input com um dado através do comando
type():

Agora iremos validar o valor do input com o que foi inserido através do
comando should():

Para os inputs de Sobrenome e Endereço, iremos seguir os mesmos passos
do teste escrito para o campo Nome.

Para os inputs de Sobrenome, Endereço e CPF, iremos seguir os mesmos
passos do teste escrito para o campo Nome.

O campo de Gênero tem um funcionamento diferente, pois ele não é um input
e sim um select.
Ou seja, ele não recebe uma entrada de texto.
Ele precisa da ação de click do mouse,
e posteriormente o click no item que se
deseja escolher.

No caso do Idioma a seleção é feita pelo click também, só que dessa vez o
click é realizado em um dos botões apresentados.

Para finalizar nosso cadastro, precisamos clicar no botão de confirmação.
Nada que não já saibamos fazer.

Porém nosso teste não chega ao fim por aí,
precisamos ainda validar se o cadastro foi
feito com sucesso e a mensagem foi
apresentada ao usuário!

Solucionando a Teoria do Caos com Cypress.io

Mais conteúdo relacionado

Mais procurados

Semelhante a Solucionando a Teoria do Caos com Cypress.io

Mais de Patrick Monteiro

Solucionando a Teoria do Caos com Cypress.io