Introdução

Cypress é uma ferramenta poderosa para testes ponta a ponta, oferecendo um conjunto robusto de comandos integrados para interagir com aplicativos da web. No entanto, cada projeto tem necessidades únicas que podem não ser totalmente atendidas pelo conjunto padrão de comandos. É aqui que entram os comandos personalizados. Os comandos personalizados permitem estender a funcionalidade do Cypress, tornando seus testes mais legíveis e fáceis de manter. Nesta postagem, exploraremos como criar e usar comandos personalizados no Cypress para aprimorar sua estrutura de automação de testes.

Por que usar comandos personalizados?

Comandos personalizados oferecem vários benefícios:

1. Reutilização: Encapsula ações comuns que são repetidas em vários testes.
2. Manutenção: Centralize a lógica de ações complexas, para que as alterações só precisem ser feitas em um só lugar.
3. Legibilidade: Melhore a legibilidade de seus testes abstraindo detalhes de implementação.

Configurando Cipreste

Antes de começarmos a criar comandos personalizados, vamos configurar o Cypress, caso ainda não o tenha feito:

npm install cypress --save-dev

Após a instalação, abra o Cypress:

npx cypress open

Criando Comandos Personalizados

Os comandos personalizados do Cypress são definidos no arquivo cypress/support/commands.js. Vejamos alguns exemplos para ver como você pode criar e usar comandos personalizados.

Exemplo 1: comando de login
Suponha que você tenha um formulário de login com o qual precisa interagir com frequência. Você pode criar um comando personalizado para lidar com o processo de login:

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name=email]').type(email);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});

Agora, você pode usar o comando login em seus testes:

// cypress/integration/login.spec.js
describe('Login Tests', () => {
  it('Should login with valid credentials', () => {
    cy.login('[email protected]', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

Exemplo 2: comando personalizado com asserções
Você também pode adicionar asserções personalizadas aos seus comandos. Vamos criar um comando para verificar se um elemento está visível e contém um texto específico:

// cypress/support/commands.js
Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => {
  cy.get(selector).should('be.visible').and('contain.text', text);
});

Uso em um teste:

// cypress/integration/visibility.spec.js
describe('Visibility Tests', () => {
  it('Should display welcome message', () => {
    cy.visit('/home');
    cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard');
  });
});

Melhores práticas para comandos personalizados

1. Nomeie os comandos com clareza: Use nomes descritivos para seus comandos personalizados para tornar os testes mais compreensíveis.
2. Parametrizar comandos: Aceite parâmetros para tornar os comandos flexíveis e reutilizáveis.
3. Chain Commands: Certifique-se de que os comandos retornem encadeamentos Cypress (cy.wrap()) para habilitar o encadeamento.
4. Comandos de documento: Adicione comentários para descrever a finalidade e o uso de cada comando personalizado.

Dicas avançadas

1. Suporte TypeScript: Se estiver usando TypeScript, você pode adicionar definições de tipo para seus comandos personalizados para aprimorar o preenchimento automático e a verificação de tipo.
2. Tratamento de erros: Implemente o tratamento de erros em comandos personalizados para fornecer feedback informativo quando algo der errado.
3. Funções reutilizáveis: Para lógica complexa, crie funções auxiliares que podem ser usadas em comandos personalizados para manter seu arquivo comandos.js limpo e focado.

Conclusão

Os comandos personalizados no Cypress fornecem uma maneira poderosa de estender os recursos da estrutura, tornando seus testes mais reutilizáveis, fáceis de manter e legíveis. Ao encapsular ações comuns e adicionar asserções personalizadas, você pode agilizar seu processo de automação de testes e se concentrar no que é mais importante: garantir que seu aplicativo funcione perfeitamente.

Comece a implementar comandos personalizados em seus projetos Cypress hoje e veja a diferença que eles podem fazer em seu fluxo de trabalho de teste. Bons testes!