Automação de testes full stack com Cypress

Automação de testes é um tema muito interessante, mas que ainda gera muitas dúvidas nas pessoas. Por isso, criei esse tutorial usando Cypress para automatizar testes com API REST e com front-end usando a linguagem JavaScript.

Um fator interessante para a utilização do Cypress é que conseguimos partir do zero ao primeiro script de automação em poucos minutos e é verdade esse “bilete”. Vamos começar?

Entendendo o que é Cypress

O Cypress é um framework para automação de testes end-to-end, onde atualmente usa a linguagem JavaScript e roda em vários navegadores como Chrome, Firefox, Edge, entre outros.

Suas principais vantagens são:

• Instalação e configuração rápida e fácil;
• Roda em vários navegadores;
• Boa quantidade de retorno de erros;
• Rápido e seguro.

Instalações necessárias para iniciar um projeto Cypress

• Node.js, para baixar clique aqui.
  • Após baixar, basta realizar next/next até o final.
• npm (gerenciador de pacotes JavaScript).
  • Já vem com o Node.js
• Cypress
• 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:

• Criar uma pasta onde irá instalar o projeto cypress.
• Executar o comando npm init -y para 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 cypress para 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.

Automação de testes API REST com Cypress

Vamos começar nosso tutorial de automação de testes com Cypress com as API REST. Vamos entender de forma simples e objetiva como funcionam as API REST, o que precisamos para iniciar um projeto de automação de testes com Cypress usando JavaScript e passo a passo para realizar o primeiro teste automatizado com uma chamada GET.

Entendendo o que é API REST

As API’s servem para que haja comunicação entre aplicações e usuários de forma simplificada, utilizando padrões de requisições que executam determinadas funções. Elas podem ser representadas em alguns formatos, sendo os mais conhecidos e utilizados: XML, JSON e YAML.

Já o REST é a Transferência de Estado Representacional onde contém regras que permitem que as aplicações se comuniquem. O REST usa como protocolo de comunicação o HTTP, tendo inúmeras formas de requisições (verbos) sendo os mais utilizados: GET, POST, PUT e DELETE:

• GET: recupera a representação de objetos e retorna status 200 quando com sucesso.
• POST: cria objetos e retorna o código 201 quando com sucesso.
• PUT: atualiza ou cria objetos retornando 200 ou 201.
• DELETE: exclui objetos retornando status 200.

Primeiro script de teste automatizado com API REST

Nesta sessão iremos seguir um passo a passo de como automatizar um GET simples usando o request do Cypress. Para isso, usaremos Dummy api example no caminho http://dummy.restapiexample.com/api/v1/employees

• Crie um arquivo na pasta “integration” com o nome rest.spec.js.
  • 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 um GET simples', () => {
 
})

• Dentro do it usaremos o request do cypress para realizar o GET já pegando o resultado da requisição e mostrando no console do chrome, ficando da seguinte forma:

it('Deve realizar um GET simples', () => {
    cy.request({
        method: 'GET',
        url: 'http://dummy.restapiexample.com/api/v1/employees',
    }).then(res => {
        console.log(res)
    })
})

• A execução do teste retorna status sucesso 200 e ficará da seguinte forma:

• Inspecionar a página e na aba “Console” irá trazer o objeto de retorno da requisição, conforme aprendemos no início dessa documentação.

• Agora só falta realizarmos validação de que:
  • O status da requisição foi realizado com sucesso e retornou 200;
  • O retorno não foi vazio;
  • O primeiro elemento possui as propriedades: id, employee_name, employee_salary, employee_age e profile_image;

it('Deve realizar um GET simples', () => {
    cy.request({
        method: 'GET',
        url: 'http://dummy.restapiexample.com/api/v1/employees',
    }).then(res => {
        expect(res.status).to.be.equal(200)
        expect(res.body.data).is.not.empty
        expect(res.body.data[0]).to.have.property('id')
        expect(res.body.data[0]).to.have.property('employee_name')
        expect(res.body.data[0]).to.have.property('employee_salary')
        expect(res.body.data[0]).to.have.property('employee_age')
        expect(res.body.data[0]).to.have.property('profile_image')
    })
})

Legal, né?

Automação de testes front-end com Cypress

Agora vamos entender de forma simples e objetiva sobre o front-end, o que precisamos para iniciar um projeto de automação de testes com Cypress usando JavaScript e passo a passo para realizar o primeiro teste automatizado em uma plataforma de teste em e-commerce.

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.

Primeiro script de teste automatizado front-end

Nesta sessão iremos seguir um passo a passo de como automatizar um login usando o visit do Cypress. Para isso usaremos uma plataforma de testes simulando um e-commerce, o Automation Practice.

• Crie um arquivo na pasta “integration” com o nome front.spec.js.
  • 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()
})

• Agora só falta realizarmos validação de que:

• O login foi realizado com sucesso por meio de qualquer elemento da tela após o login. Aqui vamos fazer a validação de que o botão MY WISHLISTS existe.

cy.get('.lnk_wishlist > a > span').should('exist')

Note que ao fim ele verifica o botão com a característica “existe” para garantir que o login foi realizado com sucesso.

Gostou desse tutorial? O Automation Practice pode ser muito útil para esse e outros testes!

Cypress: uma ferramenta poderosa de automação de testes!

Parabéns, você chegou ao fim do nosso tutorial básico para iniciar um projeto de testes automatizados full stack, tornando sua vida mais ágil e assertiva!

Me conta o que achou do tutorial? Deixe suas dúvidas e sugestões nos comentários! 

Ah, e não esqueça de conferir nossas vagas clicando aqui!