APEX 03 - 11 - Pruebas de Extremo a Extremo de nuestras aplicaciones APEX con Cypress

Realiza pruebas de interfaz de usuario de tus aplicaciones APEX con Cypress

Los equipos internos de Oracle que crean aplicaciones en Oracle APEX consideran que la herramienta de prueba gratuita y de código abierto, Cypress UI, es una forma productiva de crear pruebas repetibles de extremo a extremo de las interfaces de usuario de sus aplicaciones. 

Es compatible con populares navegadores modernos como Chrome, Edge, Firefox y Electron, y ofrece herramientas de inspección intuitivas para ayudar a los desarrolladores a escribir y depurar pruebas rápidamente. Las pruebas en Cypress complementan las pruebas unitarias como parte de una verificación de control de calidad.

Crea pruebas de interfaz de usuario utilizando comandos similares al inglés

Cypress proporciona un amplio conjunto de funciones integradas que hacen que los scripts de prueba sean fáciles de escribir y leer. Usando como funciones escritas en inglés, las pruebas abren páginas web, interactúan con los componentes de la interfaz de usuario en esas páginas y hacen afirmaciones del estilo: ¿Qué debería haber pasado después de hacer esto? 

Cypress contiene funciones automáticas de “wait and retry" lo que simplifica drásticamente la escritura de pruebas de aplicaciones web, donde a menudo el momento de las interacciones con el servidor puede ser impredecible.

Como desarrolladores, podemos utilizan nuestro editor de código favorito, como Visual Studio Code, para crear scripts de prueba. VS Code proporciona un excelente soporte para completar código para ingresar rápidamente los comandos de Cypress, y Cypress proporciona múltiples formas de crear comandos reutilizables para evitar repetir los pasos más utilizados. 

La prueba que se muestra en la Figura 1 abre una aplicación APEX simple llamada HR proporcionando su URL, lee el nombre de usuario y la contraseña de variables de entorno, las escribe en los campos de la página de inicio de sesión de APEX y luego hace clic en el botón Login. Después, luego de asegurarse de que el navegador cambie a la página /home como se esperaba, la prueba escribe una búsqueda de varias palabras: blake Manager KING en el cuadro de búsqueda de un Informe interactivo y presiona [Enter] para realizar la búsqueda. 

Valida que la búsqueda funcionó como se esperaba al verificar la región antes y después de la búsqueda con el texto como BLAKE y ADAMS. Antes de la búsqueda, ambos deberían estar presentes en la página pero después de la búsqueda sólo debería quedar BLAKE.

Figura 1: Un código de pruebas simple con Cypress UI en Visual Studio Code

Observa que los comandos de Cypress comienzan con cy y siguen un patrón: llama a cy.get() para acceder a un componente de la interfaz de usuario por id o localizador, luego usa las funciones como type() o click() o select() para interactuar con el componente como un usuario final haría. Las afirmaciones sobre lo que debería haber sucedido utilizan la función should() y aquellas sobre los valores esperados utilizan la función expect(). Esto permite que la prueba se lea casi como un párrafo en inglés.

it('Ejercicio de búsqueda en la página home', () => {
  const username = Cypress.env('username') 
  const password = Cypress.env('password')   
  cy.get('#P9999_USERNAME').type(username) 
  cy.get('#P9999_PASSWORD').type(password, { log: false }) 
  expect(username,'username was set').to.be.a('string').and.not.be.empty 
  cy.get('[data-cy="login_button"]').click() 
  cy.url().should('include', '/hr/home') 
  // Antes de la búsqueda, blake y adams deben ser visibles
 cy.get('#R47030934458136523065_worksheet_region').should("contain","ADAMS") 
 cy.get('#R47030934458136523065_worksheet_region').should("contain","BLAKE") 
  // Ingrese búsqueda multi registro combinando los casos 
  cy.get('#R47030934458136523065_search_field').type("blake Manager KING{enter}") 
  // Solo se debe visualizar a blake en la búsqueda     
 cy.get('#R47030934458136523065_worksheet_region').should("not.contain","ADAMS") 
 cy.get('#R47030934458136523065_worksheet_region').should("contain","BLAKE") 
})

Ejecutar y depurar pruebas de UI de forma interactiva

Ejecutar y depurar las pruebas de Cypress de forma interactiva también resulta agradable.  Como se muestra en la Figura 2, la aplicación se ejecuta en el navegador de nuestra elección. Los resultados de cada paso de la prueba se muestran en el panel izquierdo mientras que la aplicación se ejecuta en el panel derecho.  Cypress proporciona herramientas para seleccionar interactivamente elementos de la interfaz de usuario en la página web para copiar rápidamente el valor correcto de cy.get() al portapapeles para que podamos pegarlo en la prueba que estamos escribiendo en otra ventana. Además, monitorea el sistema de archivos en busca de cambios, de modo que tan pronto como guardamos un archivo de prueba actualizado, la ventana del navegador Cypress se actualiza para volver a ejecutar la prueba. 

Mientras se ejecuta, Cypress registra el estado del navegador en cada paso para que podamos hacer un "viaje en el tiempo" a cualquier paso de la prueba simplemente haciendo clic en él. Cuando hacemos esto, puedemos ver cómo se veía el navegador en ese paso.  Esto simplifica radicalmente las pruebas de depuración que no funcionaron como se esperaba.  

Finalmente, mientras ejecutamos la prueba de forma interactiva, es mejor para quienes han creado las pruebas, que puedan ejecutar fácilmente conjuntos de pruebas de Cypress como parte de un proceso automatizado incorporando tanto pruebas unitarias de utPLSQL como pruebas de UI de extremo a extremo con Cypress en las verificaciones de control de calidad.

Figura 2: Ejecutando un test interactivo con Cypress UI en un navegador Edge en Mac

En la proxima entrega de la saga veremos cómo crear archivos instalables para desplegar nuestras aplicaciones en otros ambientes.

No te pierdas la proxima entrega:  Creando un archivo de aplicaciones para desplegar en otros ambientes

Juntos, creamos las aplicaciones del futuro!

Mi nombre es José Preda.

* José es Analista de Sistemas e Ingeniero de Software con especializaciones en tecnologías de Oracle, Microsoft, redes, infraestructura tecnológica y gestión de recursos humanos. Posee más de 30 años de experiencia en el área de tecnología, es de Paraguay, vive y trabaja en San Luis, Argentina. Fue consultor, capacitador y soporte técnico para Base de Datos y herramientas de Oracle, desde el año 2013 es miembro activo del Grupo de Usuarios Oracle de Argentina del cual es miembro del directorio desde el año 2023. Es CEO de su propia Consultora: Soft San Luis, una startup especializada en brindar formación profesional, consultoría, mentoría y soluciones con tecnología Oracle y Oracle APEX a empresas, equipos de desarrollo de consultoras y a particulares. En 2024 ha sido reconocido como  Oracle ACE Associate por la Corporación Oracle por sus contribuciones a la Comunidad de Usuarios de Tecnologías de Oracle