Como fazer testes automatizados Front-End com Cypress?

Cypress tem controle e acesso nativo a todo o aplicativo, e com esse recurso torna o teste muito mais rápido e confiável para quem está automatizando. Isso possibilita a criação dos casos de teste automatizados de forma simultânea com o próprio desenvolvimento da aplicação.

O Cypress controla a aplicação de cima para baixo, onde assim interpreta o que ocorre fora e dentro do navegador que está sendo testado, fornece resultados muito mais consistentes do que o Selenium, por conta de a ferramenta ser capaz de compreender os eventos assim que eles acontecem . Além de operar dentro da camada de rede, a ferramenta interpreta e altera o tráfego da web em tempo real.

O Selenium

Já o Selenium controla a aplicação de forma remota, é necessário um suporte diferente para cada tipo de navegador que será testado, e sua curva de aprendizado é bem alta, sendo necessária a instalação e configuração de inúmeras ferramentas e bibliotecas para que o conjunto do teste possa funcionar corretamente, uma vez que não são instalados localmente na máquina usando tais recursos de forma remota.

O Selenium também necessita de várias ferramentas para auxiliar no controle dos navegadores, mas também é bem mais livre no quesito de linguagens de programação, pois tem suporte para a maioria das linguagens usadas atualmente.

Outras vantagens do Cypress

1. Cypress não usa Selenium: A maioria da ferramentas de testes de ponta a ponta são baseadas em Selenium e é por isso que todas compartilham os mesmos problemas. Enquanto o Selenium dispara comandos remotos através da rede, o Cypress é executado no mesmo ciclo de execução da sua aplicação.
2. Cypress com foco em Testes end-to-end: O Cypress não é um framework de automação geral, nem é uma estrutura de testes unitários para backend, pois ja existem excelentes ferramentas para isso no mercado. Em vez disso, nos especializamos em uma coisa, criando uma ótima experiência enquanto escreve testes de ponta a ponta para seus aplicativos web.
3. Cypress funciona em qualquer estrutura ou site front-end: O Cypress testa tudo o que é executado em um navegador web. Toda a arquitetura em todo do Cypress é construída especialmente para lidar com estruturas JavaScript modernas. Temos centenas de projetos usando as mais recentes estruturas como React, Angular, Vue.js, Nuxt, Elm, etc. O Cypress também funciona funciona igualmente bem em páginas ou aplicativos renderizados por servidores mais antigos.
4. Os testes do Cypress são escritos apenas em JavaScript: Embora possa compilar o JavaScript de qualquer outra linguagem, o código de automação de teste é executado no próprio navegador. Não há ligações de linguagens ou drivers — Só JavaScript
5. Cypress é All In One: Escrever testes E2E requer muitas ferramentas diferentes pra trabalhar em conjunto. Com o Cypress se tem 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 QAs: Cypress está no seu melhor quando se usa ao mesmo tempo em que desenvolve sua aplicação. Dá maior poder de codificar o mais rápido possível.
7. O Cypress roda 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.

Entendendo o que é front-end

Front-end é basicamente a parte que vemos e interagimos em sites e aplicações web e mobile. Nela, o desenvolvedor é responsável pela experiência do usuário (UX) por meio do sentido visual no site ou aplicativo, desenvolvendo a interface gráfica em HTML, CSS e JavaScript (dentre outras linguagens).

Toda essa programação é processada diretamente pelo navegador que o usuário está utilizando, para que o mesmo seja apresentado de acordo com a resolução do equipamento utilizado.

Como instalar Cypress

Vamos começar pela a instalação do Cypres. Alguns dos requisitos básicos são:

• 1. Node.js, para baixar clique aqui. (Após baixar, basta realizar next/next até o final.).
• 2. npm (gerenciador de pacotes JavaScript). Já vem com o Node.js
• 3. Cypress
• 4. Editor de texto ou IDE (utilizaremos o VS Code, clique aqui para baixar).

Para garantir que tudo está instalado, abra o cmd e digite os comandos abaixo:

• node –version

C:\Users\luan>node --version
v12.18.4

• npm –version

C:\Users\luan>npm --version
6.14.6

Instalando o cypress via cmd:

1. Criar uma pasta onde irá instalar o projeto cypress.
2. Executar o comando npm init -ypara criar o arquivo package.json.

C:\Users\luan\cypress-fullstack>npm init -y
Wrote to C:\Users\luan\cypress-fullstack\package.json:

{
  "name": "cypress-fullstack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Executar o comando npm install cypresspara baixar e instalar as dependências do cypress.

C:\Users\luan\cypress-fullstack>npm install cypress
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

> cypress@6.3.0 postinstall C:\Users\luan\cypress-fullstack\node_modules\cypress
> node index.js --exec install


Installing Cypress (version: 6.4.0)

  √  Downloaded Cypress
  √  Unzipped Cypress
  √  Finished Installation C:\Users\luan\AppData\Local\Cypress\Cache\6.4.0

Abra a pasta no VS Code ou no editor de texto de sua preferência. -Caso utilize o VS Code, pode-se digitar code . no cmd.

Note que ainda está faltando os arquivos necessários do Cypress, portanto realize os passos após o print abaixo:

Edite o arquivo package.json inserindo o comando abaixo em “scripts”:

“open”: “cypress open”

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "open": "cypress open"
}

Execute o comando npm run open via cmd.

O Cypress abrirá uma interface bastante amigável para acompanhar a execução dos testes enquanto os arquivos specs são editados.

Verifique que os arquivos padrões do cypress foram criados.

Uma vez realizada a instalação e configuração do Cypress, é hora de iniciar um teste automatizado em uma aplicação FrondEnd.

Primeiro teste automatizado front-end com Cypress

Nesta sessão será criado um passo a passo de como automatizar um login usando o visit do Cypress. Para isso será utilizada uma plataforma de testes simulando um e-commerce, o Automation Practice (um website disponibilizado para realizar testes).

1. Crie um arquivo na pasta “integration” com o nome front.spec.js.
2. Primeiro temos que importar o cypress inserindo o código abaixo:

/// <reference types="cypress" />

Em seguida criaremos o escopo do teste usando o it:

it('Deve realizar Login com sucesso', () => {
 
})

Dentro do it usaremos o visit do cypress para acessar a página, ficando da seguinte forma:

it('Deve realizar Login com sucesso', () => {
    cy.visit('http://automationpractice.com/index.php')
})

Executar o teste clicando sobre o arquivo criado:

Usando o próprio Cypress, iremos pegar os elementos e interagir com eles, começando pelo botão Sign in.

Siga os passos abaixo:

Ainda com a interface do Cypress aberta, clicar no ícone (ícone de uma mira com nome Open Selector Playground) na parte superior da página para selecionar e “pegar” os elementos com o get do Cypress. Com esse funcionalidade habilitada, clique no botão Sign in e teremos o seguinte comportamento:

Note que ele preenche o cy.get com a propriedade class do elemento, sendo uma ótima forma para interagir. Clique no ícone  (ícone de duas folhas em branco com nome Copy to clipboard) para copiar o cy.get completo.

• Retorne ao código e cole o caminho copiado. Complete para que o Cypress clique no botão, ficando da seguinte forma:

it('Deve realizar Login com sucesso', () => {
    cy.visit('http://automationpractice.com/index.php')
    cy.get('.login').click()
})

Agora vamos repetir o processo cy.get nos campos Email address, Password e botão Sign in. Cole os caminhos no código e solicite ao Cypress para digitar o e-mail e senha de acesso e clicar no botão, ficando assim:

it('Deve realizar Login com sucesso', () => {
    cy.visit('http://automationpractice.com/index.php')
    cy.get('.login').click()
    cy.get('#email').type('teste2021@teste.com.br')
    cy.get('#passwd').type('teste')
    cy.get('#SubmitLogin > span').click()
})