¿Qué son y cómo se implementan los custom commands en Cypress?

Cypress, una herramienta poderosa para pruebas automáticas, ofrece la posibilidad de crear comandos personalizados o custom commands. Esta alternativa se presenta ante la tradicional metodología Page Object Model, brindando una manera más flexible y personalizable de extender funcionalidades en nuestras pruebas.

¿Cómo creamos un comando personalizado en Cypress?

Para empezar a trabajar con comandos personalizados en Cypress, primero necesitamos identificar el archivo donde guardaremos estos comandos. En este caso, es un archivo de comandos que, por defecto, viene con ejemplos y la documentación necesaria.

El proceso de creación de un comando personalizado implica los siguientes pasos:

1. Definición del Comando: Se accede al objeto global de Cypress y se utiliza el método add para añadir un nuevo comando.
2. Estructura del Comando: Se define una función que recibe los parámetros necesarios para la operación, como sería en un caso de login con correo electrónico y contraseña.

Aquí un ejemplo de cómo podría lucir un comando para iniciar sesión:

fullscreen
Cypress.Commands.add('login', (email, password) => {
  const emailInput = 'input[name=email]';
  const passwordInput = 'input[name=password]';
  const loginButton = 'button[type=submit]';
  
  cy.visit('/login');
  cy.get(emailInput).type(email);
  cy.get(passwordInput).type(password);
  cy.get(loginButton).click();
});

¿Cómo utilizamos estos comandos personalizados en nuestras pruebas?

Una vez definido, podemos utilizar nuestros comandos personalizados en las pruebas de manera sencilla y clara, logrando que nuestro código sea más legible y fácil de mantener:

fullscreen
describe('Login Tests', () => {
  it('Realiza un login con un usuario erróneo', () => {
    cy.login('usuario@inexistente.com', 'contrasenaIncorrecta');
    // Aquí, puedes agregar validaciones para ver si el login falló correctamente.
  });
});

¿Es posible sobreescribir comandos ya existentes en Cypress?

Sí, Cypress permite sobreescribir comandos preexistentes para personalizarlos aún más. Un ejemplo común es el comando type, que se podría modificar para añadir funcionalidades como ocultar contraseñas en los logs de Cypress:

fullscreen
Cypress.Commands.overwrite('type', (originalFn, element, text, options = {}) => {
  if (options.sensitive) {
    options.log = false;
    Cypress.log({
      name: 'type',
      message: '*'.repeat(text.length),
    });
  }
  return originalFn(element, text, options);
});

Con este enfoque, uno puede controlar cómo y cuándo ciertas informaciones se ven reflejadas en los logs durante la ejecución de las pruebas, protegiendo información sensible como contraseñas.

¿Cuál es la ventaja de usar comandos personalizados?

Uno de los principales beneficios de los comandos personalizados es su capacidad de reutilización y simplicidad para añadir lógica compleja en pocos pasos. Son especialmente útiles cuando necesitas realizar la misma serie de interacciones en múltiples pruebas o cuando deseas simplificar acciones en componentes que no requieren un modelo de página completo, como ventanas modales o validaciones específicas.

Con los comandos personalizados, Cypress no solo permite la extensión del framework sino que también ofrece la flexibilidad de personalizar o sobreescribir comportamientos ya implementados, lo que puede ser una herramienta poderosa para personalizar las pruebas según las necesidades del proyecto.

¡Te animamos a seguir explorando y creando tus propios comandos personalizados! Con ellos podrás abordar retos específicos de tu aplicación de manera eficiente y creativa.