Introducción

En nuestra publicación anterior, presentamos el concepto de comandos personalizados en Cypress y demostramos cómo pueden simplificar y mejorar su marco de pruebas. Esta publicación de seguimiento profundiza en las mejores prácticas para crear y usar comandos personalizados y proporciona ejemplos detallados para garantizar que sus pruebas sean mantenibles, legibles y sólidas.

Por qué son importantes las mejores prácticas

Seguir las mejores prácticas al crear comandos personalizados garantiza que sus pruebas sigan siendo escalables, fáciles de entender y rápidas de actualizar. Los comandos personalizados estructurados adecuadamente pueden reducir significativamente la duplicación de código y mejorar la calidad general de su conjunto de pruebas.

Mejores prácticas para comandos personalizados

1. Nombre los comandos claramente
Los nombres claros y descriptivos hacen que sus comandos sean fáciles de entender y usar. Un buen nombre de comando debe transmitir su propósito sin necesidad de contexto adicional.
Ejemplo:

// 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. Parametrizar comandos
Los comandos deben aceptar parámetros para mejorar su flexibilidad y reutilización. Esto permite utilizar el mismo comando en diferentes contextos con diferentes datos.

Ejemplo:

// 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 en cadena
Asegúrese de que los comandos personalizados devuelvan encadenables de Cypress usando cy.wrap() para habilitar el encadenamiento y mantener el flujo de los comandos de Cypress.

Ejemplo:

// 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 documentos
Agregue comentarios a sus comandos personalizados para describir su propósito y uso. Esto ayuda a otros desarrolladores a comprender su código y usarlo correctamente.

Ejemplo:

// 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 acciones comunes
Encapsule acciones comunes dentro de comandos personalizados para promover la reutilización y reducir la duplicación. Esto también hace que las pruebas sean más legibles al abstraer interacciones complejas.

Ejemplo:

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

Conclusión

Al seguir estas mejores prácticas, puede crear comandos personalizados en Cypress que no solo son potentes sino también fáciles de mantener y de entender. La denominación clara, la parametrización, el encadenamiento, la documentación y la modularización son clave para escribir comandos personalizados eficaces. Implemente estas prácticas en su marco de automatización de pruebas para mejorar la calidad y eficiencia de sus pruebas.

Comience a perfeccionar sus comandos personalizados hoy y lleve sus pruebas de Cypress al siguiente nivel. ¡Feliz prueba!