Integração do Cypress com Cucumber/BDD
Após a versão 10 do Cypress, algumas mudanças são necessárias para integrar Cucumber/BDD com o Cypress de maneira eficaz. Neste post, focaremos na versão 13 do Cypress e demonstraremos como integrá-lo com o Cucumber, bem como usar o Page Object Model (POM) junto com o Cucumber para automação de testes eficiente.
Visão Geral
O Cucumber é um conhecido framework de Desenvolvimento Orientado por Comportamento (BDD) que permite aos desenvolvedores implementarem testes de ponta a ponta. O framework Cucumber é projetado para ajudar desenvolvedores e QA a escrever casos de teste de aceitação que sejam facilmente compreendidos por qualquer usuário que acesse o software.
Os casos de teste são escritos com base no comportamento das funções da aplicação, em uma linguagem que é facilmente compreendida por usuários comuns. Essa característica torna o Cucumber uma ferramenta popular de teste BDD, conectando a lacuna entre os proprietários de produtos e os desenvolvedores.
Outro motivo da popularidade do framework é que ele utiliza uma linguagem chamada Gherkin. O Gherkin é a linguagem usada pelos desenvolvedores do Cucumber para definir testes. Por ser escrito em inglês simples, é fácil de entender, mesmo para um usuário não técnico.
A combinação de Cypress e Cucumber proporciona um framework robusto que permite criar testes funcionais de forma simples.
O que é BDD?
Desenvolvimento Orientado por Comportamento (BDD) é uma abordagem de desenvolvimento que promove a comunicação entre os membros da equipe. Essa abordagem colaborativa une os aspectos de negócios e técnicos dos projetos. O BDD simula como uma aplicação deve se comportar do ponto de vista do usuário final. O principal objetivo de implementar testes BDD é melhorar a colaboração entre desenvolvedores, QA, DevOps, PO, BA e outros stakeholders.
O BDD permite que as equipes comuniquem melhor os requisitos, detectem problemas precocemente e mantenham o software facilmente ao longo do tempo. Isso assegura que toda a equipe compreenda os requisitos e se concentre em prevenir problemas potenciais, ao invés de corrigi-los posteriormente. O BDD garante que todos estejam alinhados desde o início e durante todo o processo, o que ajuda na comunicação eficaz e na qualidade entre os membros da equipe.
O que é Cucumber?
O Cucumber é um framework open-source que suporta BDD. O Cucumber suporta a linguagem Gherkin, na qual podemos escrever nossos casos de uso em inglês simples, que a ferramenta lê facilmente. O Cucumber lê os testes escritos em Gherkin e verifica se o código funciona como deveria. Ele faz isso trabalhando nos cenários e passos definidos em Gherkin. Uma vez que todos os casos de teste são executados, um relatório do Cucumber é gerado com cada passo e cenário, mostrando os resultados de sucesso e falha.
O que é Gherkin?
Gherkin é uma linguagem simples e estruturada usada no Cucumber para escrever especificações executáveis do comportamento do software. É projetada para ser facilmente legível por membros técnicos e não técnicos da equipe. O Gherkin usa uma sintaxe específica com palavras-chave como Given, When, Then, And, e But para descrever cenários e passos em um teste.
Os cenários Gherkin são frequentemente escritos em texto simples e descrevem o comportamento esperado de uma funcionalidade de maneira amigável para o usuário.
Exemplo de cenário Gherkin para testar a funcionalidade de login de um site:
Feature: User Login
Scenario: Valid user login
Given the user is on the login page
When the user enters valid credentials
And clicks the login button
Then they should be logged into their account
Neste exemplo, o Gherkin é usado para definir os passos necessários para testar a funcionalidade de login. O Cucumber pode então executar esses passos e verificar se o comportamento corresponde ao resultado esperado.
Sintaxe de escrita do arquivo de feature
Primeiro, você deve explicar a funcionalidade que deseja implementar, geralmente na forma clássica de uma história de usuário: Como um <personagem>, Eu Quero <funcionalidade>, Para <valor de negócio>.
Depois, você pode definir um ou mais cenários de negócio, significando o comportamento geral que você deseja obter com a história de usuário.
Instalando Cypress
Abaixo estão os passos para instalar o Cypress.
Passo 1: Crie uma pasta e gere o arquivo package.json
- Crie um projeto, nomeando-o
cypress_Cucumber_BDD. - Use o comando
npm initpara criar um arquivo package.json.
Passo 2: Execute o comando abaixo para instalar o Cypress
npm install cypress --save-devApós a instalação, veremos que a versão 13 (mais atual até a data de hoje) do Cypress está refletida no package.json:
{
"name": "angelofdiasg.tech",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Angelo F. Dias Gonçalves",
"license": "ISC",
"devDependencies": {
"cypress": "^13.1.0"
}
}
Passo 3: Crie arquivos nas pastas Pages e Steps (utilizando o pageObject)
Para fins de demonstração, cobriremos o seguinte cenário usando o site https://ecommerce-playground.lambdatest.io/index.php?route=account/login.
Implementações (Cenário de Teste)
Para demonstrar o uso do Cypress, primeiro vamos demonstrar o seguinte cenário de teste:
- Abra a URL https://ecommerce-playground.lambdatest.io/index.php?route=account/login.
- Digite seu endereço de e-mail.
- Digite a senha.
- Clique no botão de Login.
- Verifique o título da página.
Crie o Arquivo LoginPage.js
No LoginPage podemos criar o método necessário. No arquivo .spec abaixo, criamos quatro métodos: enterURL(), enterUserNamePassword(username, password), clickSubmitButton() e verifyPageTitle().
class LoginPage {
enterURL() {
cy.visit(
"https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
);
}
enterUserNamePassword(username, password) {
cy.get('[id="input-email"]').type(username);
cy.get('[id="input-password"]').type(password);
return this;
}
clickSubmitButton() {
cy.get('[type="submit"]').eq(0).click();
return this;
}
verifyPageTitle() {
return cy.title().should("eq", "Search -");
}
}
const login = new LoginPage();
export default login;
Crie o Arquivo LoginStep.js
Como estamos usando POM, podemos chamar o método necessário do arquivo de especificação LoginPage.js.
Obs.: há um “espaço” entre o menorquê e o reference no código abaixo (“< reference" ), esse espaço deve ser retirado caso faça cópida direta do código abaixo.
/// < reference types="cypress" />
import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
import login from "../../Pages/LoginPage/LoginPage.cy";
Given("I navigate to the Website", () => {
login.enterURL();
});
When("I entered valid credential", (datatable) => {
datatable.hashes().forEach((element) => {
login.enterUserNamePassword(element.email, element.validpassword);
login.clickSubmitButton();
});
});
And("User click on sign in button", () => {
login.clickSubmitButton();
});
Then("Validate the title after login", () => {
login.verifyPageTitle();
});
Configurando o Cucumber e criando um arquivo de feature
Nesta seção deste tutorial de Cypress Cucumber, vamos instalar e configurar o Cucumber e criar um arquivo de feature para realizar os testes.
Instalando Cucumber
Passo 1: Para instalar o Cucumber, execute este comando
npm install --save-dev cypress-cucumber-preprocessorApós a instalação, a dependência do Cucumber no package.json pode ser vista em “devDependencies”
Passo 2: Adicione o snippet de código abaixo em cypress.config.js
const { defineConfig } = require("cypress");
const cucumber = require("cypress-cucumber-preprocessor").default;
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on("file:preprocessor", cucumber());
},
},
});
Passo 3 (Opcional): Adicione o snippet de código abaixo no package.json
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false
}Configuração nonGlobalStepDefinitions
Esta configuração indica se os arquivos de definições de passos (step definitions) são globais ou não. Quando definido como false, os arquivos de definições de passos não são globais, o que significa que eles não são carregados automaticamente antes de cada cenário. Isso é útil quando você deseja controlar explicitamente quais arquivos de definições de passos são carregados em cada cenário.
Se definido como true, os arquivos de definições de passos são considerados globais e carregados automaticamente antes de cada cenário, independentemente de serem referenciados no cenário ou não.
Essa configuração é útil para projetos maiores, onde você deseja controlar cuidadosamente quais arquivos de definições de passos são carregados em cada cenário, em vez de carregar todos eles globalmente. Isso pode ajudar a melhorar a organização e o desempenho dos testes.
Passo 4: Adicione o snippet de código abaixo no package.json (ou apenas adicione o “step_definitions” dentro do snippet do Passo 3
"cypress-cucumber-preprocessor": {
...
"step_definitions": "cypress/e2e/cucumber/steps"
}Passo 5: Adicione a linha abaixo em cypress.config.js para rodar apenas o arquivo .feature
e2e: {
specPattern: "**/*.feature",
...
}Crie arquivos de .feature na pasta Features
O próximo passo é criar a pasta um arquivo .feature.
No nível da pasta steps, crie a pasta “features” e dentro delas os arquivos .feature com o nome Login.feature.
Feature: I want to login into the site with valid data
Background: Navigate to the Website
Given I navigate to the Website
Scenario: Login as new sign up user with valid data
When I entered valid credential
| email | validpassword |
| lambdatest11@yopmail.com | lambdatest21 |
And User click on sign in button
Then Validate the title after login
Crie o Arquivo LoginStep.js (sem pageObject)
Como estamos usando POM, podemos chamar o método necessário do arquivo de especificação LoginPage.js.
Obs.: há um “espaço” entre o menorquê e o reference no código abaixo (“< reference" ), esse espaço deve ser retirado caso faça cópida direta do código abaixo.
/// < reference types="cypress" />
import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
Given("I navigate to the Website", () => {
cy.visit(
"https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
);
});
When("I entered valid credential {string}, {string}", (e-mail, validpassword) => {
cy.get('[id="input-email"]').type(username);
cy.get('[id="input-password"]').type(password);
});
And("User click on sign in button", () => {
cy.get('[type="submit"]').eq(0).click();
});
Then("Validate the title after login", () => {
cy.title().should("eq", "Search -");
});
Estrutura “planejada” do Projeto
Já utilizando a estrutura do Cypress versão >= 13.
|- cypress/
|- e2e/
|- features/
|- login.feature
|- consultaDados.feature
|- ... (outros cenários em Gherkin)
|- steps/
|- loginSteps.js
|- consultaDadosSteps.js
|- ... (outros steps dos cenários)
|- fixtures/
|- exemplo.json
|- ... (outros arquivos de apoio aos cenários)
|- pages/
|- login.page.js
|- consultaDados.page.js
|- ... (outros arquivos pages dos cenários)
|- support/
|- commands.js
|- e2e.js
Execute os casos de teste do Cypress localmente
Você pode rodar o caso de teste a partir da linha de comando ou do Cypress runner. Vamos executar os casos de teste usando o Cypress runner.
- Abra o Cypress test runner com o comando abaixo:
npx cypress open- O comando acima abrirá o Cypress test runner com os casos de teste existentes. No Cypress runner, podemos selecionar o navegador onde queremos rodar os casos de teste.
Na captura de tela abaixo, podemos ver os arquivos de casos de teste .feature sendo exibidos no Cypress test runner.
Execute o caso de teste
Clicando no arquivo .feature, o caso de teste começa a ser executado.
A captura de tela abaixo mostra quando o caso de teste é executado com sucesso. Podemos ver os passos sob GIVEN, WHEN, AND e THEN executados com sucesso.
Conclusão
O Cucumber é um robusto framework de Desenvolvimento Orientado por Comportamento (BDD) que permite escrever casos de teste que qualquer pessoa pode entender, independentemente do seu conhecimento técnico.
Neste tutorial de Cypress Cucumber, vimos como a combinação de Cypress e Cucumber fornece um framework robusto que permite criar testes funcionais de forma simples.