Introdução

Em nosso post anterior, apresentamos o conceito de comandos personalizados no Cypress e demonstramos como eles podem simplificar e aprimorar sua estrutura de testes. Esta postagem de acompanhamento se aprofunda nas práticas recomendadas para criar e usar comandos personalizados, fornecendo exemplos detalhados para garantir que seus testes sejam fáceis de manter, legíveis e robustos.

Por que as melhores práticas são importantes

Seguir as práticas recomendadas ao criar comandos personalizados garante que seus testes permaneçam escalonáveis, fáceis de entender e rápidos de atualizar. Comandos personalizados adequadamente estruturados podem reduzir significativamente a duplicação de código e melhorar a qualidade geral do seu conjunto de testes.

Melhores práticas para comandos personalizados

1. Nomeie os comandos com clareza
Nomes claros e descritivos tornam seus comandos fáceis de entender e usar. Um bom nome de comando deve transmitir sua finalidade sem a necessidade de contexto adicional.
Exemplo:

// 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();
});

Uso:

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

2. Comandos de parametrização
Os comandos devem aceitar parâmetros para aumentar a sua flexibilidade e capacidade de reutilização. Isso permite que o mesmo comando seja usado em contextos diferentes com dados diferentes.

Exemplo:

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

Uso:

// cypress/integration/form.spec.js
describe('Form Tests', () => {
  it('Should submit the form with valid data', () => {
    const formData = {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]'
    };
    cy.fillForm(formData);
    cy.get('.success-message').should('be.visible');
  });
});

3. Comandos de cadeia
Certifique-se de que os comandos personalizados retornem encadeamentos Cypress usando cy.wrap() para permitir o encadeamento e manter o fluxo dos comandos Cypress.

Exemplo:

// cypress/support/commands.js
Cypress.Commands.add('selectDropdown', (selector, value) => {
  cy.get(selector).select(value).should('have.value', value);
  return cy.wrap(value);
});

Uso:

// cypress/integration/dropdown.spec.js
describe('Dropdown Tests', () => {
  it('Should select a value from the dropdown', () => {
    cy.visit('/dropdown-page');
    cy.selectDropdown('#dropdown', 'Option 1').then((value) => {
      expect(value).to.equal('Option 1');
    });
  });
});

4. Comandos de documento
Adicione comentários aos seus comandos personalizados para descrever sua finalidade e uso. Isso ajuda outros desenvolvedores a entender seu código e usá-lo corretamente.

Exemplo:

// cypress/support/commands.js

/**
 * Custom command to login to the application
 * @param {string} email - User email
 * @param {string} password - User password
 */
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();
});

5. Modularizar ações comuns
Encapsule ações comuns em comandos personalizados para promover a reutilização e reduzir a duplicação. Isso também torna os testes mais legíveis, abstraindo interações complexas.

Exemplo:

// cypress/support/commands.js
Cypress.Commands.add('addItemToCart', (itemName) => {
  cy.get('.product-list').contains(itemName).click();
  cy.get('.add-to-cart').click();
});

Uso:

// cypress/integration/cart.spec.js
describe('Cart Tests', () => {
  it('Should add an item to the cart', () => {
    cy.visit('/shop');
    cy.addItemToCart('Laptop');
    cy.get('.cart-items').should('contain', 'Laptop');
  });
});

Conclusão

Seguindo essas práticas recomendadas, você pode criar comandos personalizados no Cypress que não são apenas poderosos, mas também fáceis de manter e de entender. Nomenclatura clara, parametrização, encadeamento, documentação e modularização são essenciais para escrever comandos personalizados eficazes. Implemente essas práticas em sua estrutura de automação de testes para melhorar a qualidade e a eficiência de seus testes.

Comece a refinar seus comandos personalizados hoje e leve seus testes Cypress para o próximo nível. Bons testes!