Automatizando com o cypress e documentando com gherkin: como é possível fazer essa junção?

Foto de Jingtao na Unsplash

Sempre me deparava com o esquecimento dos cenários de teste escritos no começo do projeto na hora de iniciar a automação do sistema. Comecei a pensar, coloco os cenários em um docs no drive e deixo lá abandonado e depois só utilizo quando vou automatizar ou mexer na tela. Mas como posso deixar essa pratica de esquecimento de lado?

Comecei a escrever os cenários de teste nos padrões do Gherkin e através de várias pesquisas na internet, vi que é possível utilizar do mesmo padrão dentro dos testes automatizados do Cypress.

Fica gigantesco? Fica mas pelo menos é organizado de maneira visual e legível o entendimento na hora de fazer o code review de alguma função implementada.

Várias vezes já me peguei fazendo code review e não entendendo nada o que a pessoa estava querendo automatizar, até perguntava para a pessoa e as vezes, nem ela sabia o que tinha feito. Então para ficar organizado e entendível sem a adição de comentário em cada linha, começamos aqui na empresa a prática de juntar o Gherkin com o Cypress e trás muitos beneficios para o time.

Neste artigo, quis trazer de maneira prática como você pode estar realizando a junção dos cenários com a automação.

O que é Gherkin?

Para que você possa entender detalhes sobre o Gherkin, abaixo deixei o link do artigo que está aqui no meu blog falando mais sobre.

Gherkin: Padronização de escrita de cenário de teste.

O que é Cypress?

Cypress nada mais é que uma ferramenta de testes automatizados.

Tenho um artigo aqui no meu blog com detalhes sobre o cypress, clique no link abaixo para entender mais como funciona.

Introdução ao cypress

Benefícios da combinação do Gherkin e Cypress

A combinação do Gherkin e Cypress traz diversos benefícios para a especificação e automação de testes de software, permitindo uma abordagem colaborativa e eficiente.

Separei algumas vantagens dessa união para você ter uma visão geral sobre:

• Comunicação e colaboração aprimoradas: O Gherkin fornece uma linguagem comum e legível por humanos para especificar os testes, permitindo que desenvolvedores, analistas de teste e partes interessadas compreendam e discutam os requisitos de teste de forma mais clara. Isso promove a colaboração e a comunicação efetiva entre as equipes, evitando mal-entendidos e garantindo que todos tenham uma visão compartilhada dos testes a serem realizados.
• Especificação concisa e reutilizável: O Gherkin permite a especificação de cenários de teste de forma concisa e organizada, utilizando palavras-chave como Dado (Given), Quando (When) e Então (Then). Essa abordagem facilita a criação de testes reutilizáveis, onde as etapas podem ser compartilhadas entre diferentes cenários, resultando em uma especificação mais eficiente e de fácil manutenção.
• Automatização eficiente dos testes: O Cypress, por sua vez, é uma ferramenta poderosa para automação de testes de software. Com sua sintaxe intuitiva e recursos avançados, ele permite escrever testes automatizados de forma eficiente, interagindo com a interface do usuário e verificando o comportamento do aplicativo em diferentes cenários. A integração do Gherkin com o Cypress facilita a automação dos testes especificados, permitindo que as etapas descritas no Gherkin sejam mapeadas diretamente para o código de teste automatizado no Cypress.
• Feedback instantâneo e rápido ciclo de desenvolvimento: O Cypress oferece a vantagem de fornecer feedback instantâneo sobre o resultado dos testes, permitindo que os desenvolvedores visualizem e depurem os testes em tempo real. Isso acelera o ciclo de desenvolvimento, tornando-o mais ágil e eficiente. Além disso, a combinação do Gherkin com o Cypress facilita a execução de testes de ponta a ponta, proporcionando uma cobertura abrangente do aplicativo e identificando problemas de forma rápida.
• Manutenção simplificada: A estrutura clara e organizada do Gherkin, combinada com a sintaxe intuitiva do Cypress, facilita a manutenção dos testes automatizados. Alterações nos requisitos ou comportamento do aplicativo podem ser facilmente atualizadas na especificação do Gherkin e refletidas diretamente nos testes automatizados. Isso reduz a carga de trabalho de manutenção e garante que os testes permaneçam atualizados ao longo do ciclo de desenvolvimento.

Dicas de escrita de cenários de teste em Gherkin

Separei neste tópico algumas dicas que acredito serem fundamentais para que você consigo ter uma escrita efetiva dos cenários de teste em Gherkin.

• Utilize a palavra-chave apropriada: O Gherkin é baseado em palavras-chave específicas que definem as etapas de um cenário de teste;
• Seja claro e específico: Descreva as etapas do cenário de forma clara e específica, evitando ambiguidades. Cada etapa deve ser única e representar uma ação clara e mensurável;
• Use nomes descritivos: Ao descrever as etapas do cenário, use nomes descritivos que reflitam o objetivo da ação ou condição. Isso facilitará a compreensão do cenário e a identificação de possíveis problemas durante a execução dos testes;
• Evite detalhes de implementação: O Gherkin é uma linguagem voltada para a especificação e colaboração entre equipes, portanto, evite incluir detalhes de implementação nos cenários de teste. Concentre-se nos comportamentos e resultados esperados, em vez de se aprofundar na lógica interna do sistema;
• Utilize tabelas e exemplos de dados: Quando necessário, utilize tabelas e exemplos de dados para representar variações nos cenários de teste. Isso ajuda a abranger diferentes casos de uso e torna os cenários mais abrangentes;
• Mantenha os cenários pequenos e focados: Procure manter os cenários de teste curtos e focados em um único aspecto do sistema. Isso facilita a compreensão e a manutenção dos testes.

Mapeamento dos passos do Gherkin para testes automatizados no Cypress

Para mapear os passos do Gherkin para testes automatizados no Cypress, é necessário criar os scripts de teste que executarão as ações descritas nos cenários de Gherkin.

Vou te explicar com detalhes como poderá implementar o Gherkin no Cypress de maneira simples, veja abaixo:

• Dado (Given): No passo “Dado”, você descreve o estado inicial ou as pré-condições do cenário. No Cypress, isso pode ser mapeado para a função `cy.visit()` para carregar a página inicial do aplicativo ou para outras ações que configurem o estado inicial necessário para o teste.
• Quando (When): No passo “Quando”, você descreve a ação que deve ser executada. No Cypress, isso pode ser mapeado para uma sequência de comandos Cypress, como `cy.get()` para localizar elementos da interface, `cy.click()` para clicar em botões ou links, ou `cy.type()` para inserir texto em campos de entrada.
• Então (Then): No passo “Então”, você descreve o resultado esperado após a ação ser executada. No Cypress, isso pode ser mapeado para asserções usando comandos como `cy.contains()` para verificar se um elemento contém um texto específico, `cy.should()` para verificar propriedades ou estados de elementos, ou `cy.url()` para verificar a URL atual da página.
• E (And) e Mas (But): Os passos “E” e “Mas” são usados para adicionar detalhes adicionais às etapas de Dado, Quando ou Então. No Cypress, eles podem ser mapeados para comandos adicionais que complementam as ações ou verificações já definidas nos passos anteriores.

A sacada para mapear os passos do Gherkin para testes automatizados no Cypress é identificar os elementos da interface corretos usando seletores, como IDs, classes ou atributos, e realizar as ações e verificações apropriadas nesses elementos.

Exemplos de testes funcionais, de interface, de API e de integração

Teste funcional

Um teste funcional seria uma validação de software na qual determinada funcionalidade é verificada, sem levar em conta a estrutura do código-fonte, os detalhes de implementação ou os cenários de execução.

Criei um exemplo ilustrativo de como poderá ser feito esse tipo de teste usando Gherkin e Cypress.

Crie um arquivo .feature, exemplo login.feature e adicione os cenários escritos abaixo:

Feature: Login
  Scenario: Successful login
    Given I am on the login page
    When I enter valid credentials
    And I click the login button
    Then I should be logged in

  Scenario: Failed login
    Given I am on the login page
    When I enter invalid credentials
    And I click the login button
    Then I should see an error message

Agora, crie um arquivo .spec.js, exemplo login.spec.js para poder executar o teste escrito abaixo:

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

Given("I am on the login page", () => {
  cy.visit("/login");
});

When("I enter valid credentials", () => {
  cy.get("#username").type("myusername");
  cy.get("#password").type("mypassword");
});

When("I enter invalid credentials", () => {
  cy.get("#username").type("invalidusername");
  cy.get("#password").type("invalidpassword");
});

When("I click the login button", () => {
  cy.get("#login-button").click();
});

Then("I should be logged in", () => {
  cy.get(".user-profile").should("be.visible");
});

Then("I should see an error message", () => {
  cy.get(".error-message").should("be.visible");
});

Teste de interface

Teste de interface seria uma série de ações utilizadas para medir o desempenho e a funcionalidade global dos elementos visuais de uma aplicação.

Criei um exemplo ilustrativo de como poderá ser feito esse tipo de teste usando Gherkin e Cypress.

Crie um arquivo .feature, exemplo interface.feature e adicione os cenários escritos abaixo:

Feature: Interface
  Scenario: Navigating to the home page
    Given I am on the home page
    Then I should see the website logo
    And I should see a navigation menu

  Scenario: Searching for a product
    Given I am on the home page
    When I enter "cypress" in the search field
    And I click the search button
    Then I should see search results
    And the results should include "Cypress Testing Tool"

  Scenario: Adding a product to the cart
    Given I am on the product page
    When I click the "Add to Cart" button
    Then the cart should have 1 item
    And the cart total should be updated

Agora, crie um arquivo .spec.js, exemplo interface.spec.js para poder executar o teste escrito abaixo:

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

Given("I am on the home page", () => {
  cy.visit("/");
});

Given("I am on the product page", () => {
  cy.visit("/product/123");
});

Then("I should see the website logo", () => {
  cy.get(".logo").should("be.visible");
});

Then("I should see a navigation menu", () => {
  cy.get(".navigation-menu").should("be.visible");
});

When("I enter {string} in the search field", (searchTerm) => {
  cy.get("#search-input").type(searchTerm);
});

When("I click the search button", () => {
  cy.get("#search-button").click();
});

Then("I should see search results", () => {
  cy.get(".search-results").should("be.visible");
});

Then("the results should include {string}", (expectedProduct) => {
  cy.get(".search-results").contains(expectedProduct).should("be.visible");
});

When("I click the {string} button", (buttonText) => {
  cy.contains(buttonText).click();
});

Then("the cart should have {int} item", (expectedItemCount) => {
  cy.get(".cart-items").should("have.length", expectedItemCount);
});

Then("the cart total should be updated", () => {
  cy.get(".cart-total").should("not.be.empty");
});

Teste de API

Teste de API seria verificar se as APIs criadas atendem às expectativas quanto a funcionalidade, desempenho, confiabilidade e segurança.

Criei um exemplo ilustrativo de como poderá ser feito esse tipo de teste usando Gherkin e Cypress.

Crie um arquivo .feature, exemplo api.feature e adicione os cenários escritos abaixo:

Feature: API
  Scenario: Getting user information
    Given I have a valid API token
    When I make a GET request to "/users/1"
    Then the response status should be 200
    And the response body should contain "John Doe"
    And the response body should contain "john.doe@example.com"

Agora, crie um arquivo .spec.js, exemplo api.spec.js para poder executar o teste escrito abaixo:

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

Given("I have a valid API token", () => {
  // Set the API token as a Cypress environment variable
  Cypress.env("apiToken", "YOUR_API_TOKEN");
});

When("I make a GET request to {string}", (url) => {
  cy.request({
    method: "GET",
    url: url,
    headers: {
      Authorization: `Bearer ${Cypress.env("apiToken")}`,
    },
  }).as("apiResponse");
});

Then("the response status should be {int}", (statusCode) => {
  cy.get("@apiResponse").its("status").should("equal", statusCode);
});

Then("the response body should contain {string}", (expectedContent) => {
  cy.get("@apiResponse").its("body").should("contain", expectedContent);
});

Teste de integração

Teste de integração tem como objetivo encontrar falhas de integração entre as unidades, e não mais em testar as funcionalidades da mesma.

Criei um exemplo ilustrativo de como poderá ser feito esse tipo de teste usando Gherkin e Cypress.

Crie um arquivo .feature, exemplo integracao.feature e adicione os cenários escritos abaixo:

Feature: Integration
  Scenario: Logging in and accessing a protected page
    Given I am on the login page
    When I enter my username and password
    And I click the login button
    Then I should be redirected to the dashboard page
    And I should see the welcome message

Agora, crie um arquivo .spec.js, exemplo integracao.spec.js para poder executar o teste escrito abaixo:

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

Given("I am on the login page", () => {
  cy.visit("/login");
});

When("I enter my username and password", () => {
  cy.get("#username").type("myusername");
  cy.get("#password").type("mypassword");
});

And("I click the login button", () => {
  cy.get("button[type='submit']").click();
});

Then("I should be redirected to the dashboard page", () => {
  cy.url().should("include", "/dashboard");
});

Then("I should see the welcome message", () => {
  cy.get(".welcome-message").should("contain", "Welcome, myusername!");
});

Você está procurando uma maneira eficiente e colaborativa de especificar e automatizar seus testes de software? Se sim, este ebook é perfeito para você!

O Guia Completo do Gherkin é o recurso definitivo para aprender a usar o poderoso Gherkin em conjunto com o Cypress para criar testes automatizados eficazes. Através deste ebook, você será guiado por todos os aspectos essenciais da especificação colaborativa de testes, desde a sintaxe legível por humanos do Gherkin até a criação de cenários de teste detalhados.

Com a combinação do Gherkin e do Cypress, você será capaz de escrever testes automatizados poderosos e de fácil manutenção. Você aprenderá a mapear os passos do Gherkin para código de teste no Cypress, executar testes, gerar relatórios detalhados e solucionar problemas em seu processo de automação.

Este ebook também irá fornecer estudos de caso reais, onde você verá exemplos práticos de como o Gherkin e o Cypress foram aplicados com sucesso em projetos de diferentes empresas. Além disso, você descobrirá recursos e ferramentas adicionais para aprimorar ainda mais sua automação de testes.

Ao adquirir o Guia Completo do Gherkin, você terá acesso a:

• Explicações claras e concisas sobre o Gherkin e o Cypress
• Tutoriais passo a passo para escrever e executar testes automatizados
• Melhores práticas e dicas avançadas para maximizar sua eficiência
• Exemplos práticos e estudos de caso de projetos reais
• Recursos adicionais, ferramentas e comunidades online para aprendizado contínuo

Não perca a oportunidade de aprimorar seus conhecimentos em automação de testes e elevar a qualidade do seu software. Adquira agora o Guia Completo do Gherkin e comece a colher os benefícios da especificação colaborativa de testes com o poderoso Cypress!

Garanta sua cópia agora mesmo e transforme a maneira como você desenvolve e testa seu software!

Gherkin e Cypress: Guia Completo para Automação de Testes de Software - Eloisa Potrich | Hotmart