Prueba: Productos – Editar Producto

Objetivo

Validar que el sistema permita editar un producto existente desde el módulo Gestión Financiera → Productos, modificando sus datos principales dentro del modal de edición, y que los cambios se guarden correctamente al cerrar el modal.

Precondiciones

• Usuario autenticado mediante el comando cy.login().
• Acceso al dashboard del sistema (/dashboard)..
• Existencia de al menos un producto previamente registrado en el sistema.
• Acceso al módulo de Productos mediante la ruta /productos

---

Pasos Generales

1. Iniciar sesión y acceder al dashboard.
2. Ingresar al módulo Productos.
3. Abrir el modal de edición de un producto existente.
4. Modificar los campos principales
5. Guardar los cambios realizados.
6. Verificar que el modal se cierre correctamente tras la actualización.

---

Resultado Esperado

• El modal de edición debe abrirse correctamente al seleccionar un producto.
• Los campos deben poder editarse sin errores.
• Los nuevos valores deben reemplazar los anteriores sin generar conflictos de validación.
• Al guardar, el modal debe cerrarse automáticamente, indicando que la edición fue exitosa.
• El sistema debe reflejar los nuevos datos actualizados en la lista de productos.

---

Explicación Detallada del Código

Variables del producto a editar

const nuevoCodigo = "COD-EDIT-001";
const nuevoNombre = "Producto Editado Test";
const nuevaDescripcion = "Este es un producto editado desde Cypress";
const nuevoPrecio = "25000";

Explicación

| Se definen las nuevas propiedades que reemplazarán los valores actuales del producto:

• Código: identificador único modificado para prueba.
• Nombre: texto del producto editado.
• Descripción: campo extendido con una nueva observación

• Precio: nuevo valor que sustituye el precio anterior.

• Los valores se eligen estáticamente para poder verificar visualmente la actualización posterior.
  

---

Navegación al módulo de productos

cy.visit("/productos");
cy.url().should("include", "/productos");

Explicación

• Se navega directamente al módulo de Productos.
• Se valida mediante cy.url().should("include", "/productos") que la URL actual corresponda al módulo esperado, confirmando la correcta navegación.
  

---

Apertura del modal de edición

cy.get('button[data-target^="#productoModalEdit-"]').first().click();

Explicación

• Se selecciona el primer botón de edición disponible dentro del listado de productos.
• El selector data-target^="#productoModalEdit-" permite identificar los botones de edición que abren los modales para cada producto.
• Se hace clic en el primer resultado para iniciar la edición.
  

---

Edición de campos dentro del modal

cy.get("div.modal.fade.show:visible").within(() => {
  // --- Editar código ---
  cy.get("input[id^='editCodigoProducto']")
    .should("be.visible")
    .click()
    .clear()
    .type(nuevoCodigo, { delay: 50 });

  // --- Editar nombre ---
  cy.get("input[id^='editNombreProducto']")
    .should("be.visible")
    .click()
    .clear()
    .type(nuevoNombre);

  // --- Editar descripción ---
  cy.get("textarea[id^='editDescripcion']")
    .should("be.visible")
    .click()
    .clear()
    .type(nuevaDescripcion);

  // --- Editar precio ---
  cy.get("input[id^='precioProductoEdit']")
    .should("be.visible")
    .click()
    .clear()
    .type(nuevoPrecio);

  // --- Guardar cambios ---
  cy.get("div.modal-footer button.btn.btn-primary")
    .should("be.visible")
    .click();
});

Explicación

• Se utiliza el comando within() para limitar el alcance de las acciones al modal actualmente visible (div.modal.fade.show:visible).
• Cada campo se identifica por su prefijo dinámico (id^=), lo que permite seleccionar correctamente el elemento sin importar el ID completo.

| Los pasos incluyen:

• Código del producto: se borra y se escribe el nuevo valor con una ligera demora ({ delay: 50 }) para simular escritura humana.
• Nombre del producto: reemplazo total del nombre.
• Descripción: texto descriptivo
• Precio: valor numérico actualizado.
• Guardar cambios: se hace clic en el botón de confirmación dentro del pie del modal.
  

---

Validación del cierre del modal

cy.get("div.modal.fade.show").should("not.exist");

Explicación

• Se comprueba que, tras guardar, el modal desaparezca del DOM.
• La ausencia de div.modal.fade.show indica que la operación fue exitosa y que el sistema cerró el modal automáticamente.
  

---

Resultados de la ejecución de la prueba

Escenario	Acción Principal	Código Nuevo	Nombre Nuevo	Precio Nuevo	Estado
1	Editar producto base	COD-EDIT-001	Producto Editado Test	25,000	PASS

---