独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Testes automatizados com Cypress e Cucumber

Recentemente tive a oportunidade de começar a automatizar os testes do meu projeto utilizando Cypress com Cucumber. Por tal motivo, decidi fazer este tutorial explicando como você pode iniciar a automatização de seus testes.

Abaixo você encontrará como configurar o ambiente, os principais comandos, a estruturação do projeto, um exemplo prático de utilização e alguns links úteis. Utilizaremos Cypress com Cucumber e seguiremos o conceito de page objects.

O que é Cypress:

Cypress é um framework utilizado para automação de testes end to end. Atualmente, utiliza JavaScript como linguagem de programação e executa os testes no Chrome.

Suas principais vantagens são de possuir uma curva de aprendizado pequena e ser de fácil instalação e configuração. Em contrapartida, possui limitações por utilizar somente o Chrome como browser e não trocar de janela durante os testes.

O que é Cucumber:

Cucumber é uma ferramenta que pode ser utilizada em conjunto com o Cypress e permite a escrita de testes automatizados no formato Gherkin. É possível utilizar o Cypress sem cucumber, mas não é o foco deste tutorial.

Não é necessário muito esforço para preparar sua máquina, apenas temos que cumprir quatro etapas:

3. Instalar o Cypress com Cucumber:

I) Crie uma pasta onde ficarão os arquivos do seu projeto. Abra o terminal do windows e acesse essa mesma pasta com o seguinte comando:

II) Tendo acessado a pasta do projeto, execute o comando de instalação:

III) Ainda dentro da pasta do seu projeto, execute o seguinte comando para que o Cypress termine de criar os arquivos locais:

4. Configurar o Cucumber no Cypress:

Adicione ao arquivo cypress/plugins/index.js o seguinte script:

O funcionamento do Cypress é baseado em localizar elementos do site (botões, inputs, textos, imagens, etc.) e interagir com os mesmos. Podemos automatizar todas as ações que executamos manualmente ao utilizar a página web (e mais algumas).

Sintaxe: cy.get(‘seletor’)

Este comando é responsável por selecionar o elemento da tela no qual executamos uma ação. Funcionamento semelhante ao de levar o cursor do mouse em cima do que queremos.

Para entender melhor como capturar seletores de elementos, você pode acessar um bom tutorial neste link.

Sintaxe: .click()

O comando click é utilizado para realizar a ação de clicar em um elemento da página e, para isso, deve ser utilizado em conjunto com o comando GET ou outro comando de mesma função. Funcionamento semelhante ao de clicar com o botão esquerdo do mouse no elemento que queremos.

Sintaxe: .type(‘texto’)

Type é utilizado para setar informações em campos. Funcionamento semelhante ao de digitarmos com nosso teclado.

Sintaxe: cy.visit(‘http://dev-testqa.com’)

O comando visit é utilizado para acessar endereços virtuais. Com ele acessamos o site em que iremos realizar os testes.

Sintaxe: .should(‘configurações’)

Should é um comando utilizado para fazer asserções na página. Este é normalmente o último comando a ser utilizado no cenário e serve para validar se o teste passou ou reprovou.

A pasta ‘fixtures’ e os arquivos ‘commands.js’, ‘index,js’ e package-lock.json’ oferecem configurações avançadas que não serão abordadas neste tutorial.

Criando algumas pastas e arquivos adicionais:

Para iniciar a estrutura do projeto, precisamos criar três pastas em cypress/support, pois iremos utilizar o conceito de page object. São elas: elements, pageobjects e steps.

Além disso, pelo próprio VS Code, precisamos criar um arquivo na pasta raíz do projeto com o nome e formato package.json, conforme a imagem abaixo:

Adicione o seguinte código no arquivo package.json:

Com o ambiente configurado e o projeto estruturado, faremos agora um exemplo prático de automatização de testes.

Objetivo: automatizar o processo de testar o login do site da CWI Software.

Passo 1: configurar o arquivo cypress.json. Você pode copiar o código abaixo para seu arquivo e personalizar com as configurações para seu projeto. Abaixo configuramos para nosso teste de exemplo.

Passo 2: criar um arquivo com o cenário de teste escrito em Gherkin. Ele deve ficar dentro de cypress/integration e ter a extensão .feature.

Neste arquivo podemos criar vários cenários de testes. Além disso, podemos ter quantos arquivos .features com cenários forem necessários. Normalmente separamos por fluxos ou testes e nomeamos esses arquivos conforme seus respectivo conteúdo.

Passo 3: criar um arquivo com os passos do teste. Ele deve ter formato .js e ficar dentro de cypress/support/steps. Criamos um arquivo de steps para cada arquivo de feature que temos e utilizamos o mesmo nome nos dois, apenas acrescentando “Steps”.

Passo 4: criar um arquivo com as funções e comandos que executaremos. Deve ter formato .js e ficar dentro de cypress/support/pageobjects.

Passo 5: criar o arquivo no qual faremos a listagem dos elementos da página. Deve ter formato .js e ficar dentro de cypress/support/elements.

Passo 6: executar o teste. Após ter salvo todos os arquivos, execute pelo terminal do próprio VS Code o comando abaixo que configuramos no arquivo package.json:

Você também pode executar o comando completo:

Feito isso, o chrome será aberto e poderemos acompanhar a execução do teste. Teremos o seguinte resultado:

O que foi exposto acima é o básico para iniciar os testes automatizados com Cypress. Entretanto, muitas outras funcionalidades são possíveis, como, por exemplo, o uso de tags, a criação de cenários com exemplos e o teste de APIs.

Cypress continua sendo desenvolvido e futuramente possibilitará testes em outros navegadores além do Chrome. Aprofunde seus estudos e aprimore cada vez mais os seus testes.

Tutorial de seletores CSS

Add a comment

What is your view?

Send

Related posts:

Preparing For The Google Cloud Professional Data Engineer Exam

Hi! You must be interested in passing the Google Cloud Professional Data Engineer Exam. Google recommends that you have 3+ years of experience before attempting the exam. However, I think that if you…

Who gave the girls the Unicorns?

This post is an edit of the talk I gave at the Growing Inclusive Leadership conference I co-created for NatWest. So, it is my job to wrap up the conference. Before I do, I’d like to take some time to…

8 Habits of a Highly Effective Supply Chain Manager

A good well-rounded Supply Chain Manager is always in high demand, but they are in scarce supply in my opinion! You just need to look around how many jobs are available with title of “Supply Chain…