Pruebas de UI E2E impulsadas por IA: Creación más rápida, Mantenimiento más fácil

Hola a todos. Mi nombre es Daniel Ostrovsky, y hoy vamos a explorar las pruebas de extremo a extremo impulsadas por IA. Pero antes de sumergirnos, adelante y escanea este código de barras para seguirme en Twitter, Medium y YouTube. Puedes encontrarme como nanduh81. Gracias.

Y continuemos. Así que, primero que nada, un poco sobre mí. Soy un experto desarrollador de ciclo completo. Tengo más de 25 años de experiencia. Soy un orador público, escritor público en múltiples idiomas. Soy un colaborador de código abierto, mentor técnico, y nuevamente, escanea el código de barras y sígueme.

Así que vamos a sumergirnos directamente en los desafíos que enfrentamos cuando intentamos probar la UI con IA. Bien, ahora, a diferencia de las pruebas unitarias, donde podemos enviar el código fuente directamente a un LLM, lo que facilita que el modelo prediga cómo debería ser la prueba, las pruebas de UI son diferentes. Así que para las pruebas unitarias, herramientas como, ya sabes, Copilot y otras pueden generar una prueba en segundos porque tienen el contexto completo, el código fuente y la lógica que necesita ser probada. Y en la mayoría de los casos, funciona perfectamente porque el código y el contexto están claros. Pero cuando se trata de pruebas de UI, hay una gran capa de obstrucciones entre el código fuente y lo que realmente estamos probando, la UI renderizada.

Así que aquí está el camino. Comenzamos nuestro código que en realidad incluye HTML, CSS y TypeScript, ¿verdad? , que se transpilan a JavaScript. Luego se agrupa con herramientas como Webpack, Write y otras. Simplemente hace toda la transpolación, ya sabes, el agrupamiento y otras cosas. Bien. Unificaciones y todo. Y luego pasa a motores de renderizado como React y Angular que toman el control del navegador. Bien, finalmente, todo será renderizado por el navegador. Ahora, solo en ese punto, obtenemos los elementos visuales reales que necesitamos probar. Bien. Entonces, ¿dónde está el código fuente y qué es lo que realmente necesitamos probar? Es una gran diferencia. Así que si estamos hablando de un sitio web de comercio electrónico estándar o un blog o algo similar, la IA tiene mucho conocimiento existente del que obtener porque está entrenada en datos similares disponibles públicamente. Así que cuando enviamos datos a un LLM, el 80% del tiempo, puede generar pruebas de manera efectiva porque, ya sabes, la IA ya está familiarizada con los patrones existentes. Bien, pero ¿qué pasa si estás trabajando en algo de nicho, como una aplicación interna detrás de una autorización estricta o una herramienta que solo funciona en las instalaciones?

No es como el comercio electrónico donde agregar un artículo al carrito y finalizar la compra es predecible. ¿Qué pasa si estás probando, ya sabes, algún tipo de herramienta de configuración para gestionar cientos de estaciones de servicio en medio del océano? Así que la IA no sabrá cómo manejarlo sin nuestra orientación. Así que ahí es donde necesitamos ayudar a la IA a ayudarnos.

Y para eso, seguimos dos prácticas clave. Primero, usar IDs de prueba de datos significativos. En nuestro caso, usamos data CY ya que estamos trabajando con Cypress. Pero el principio sigue siendo el mismo. Elementos como botones y campos de entrada deben tener nombres claros y descriptivos, como next button, username input, y así sucesivamente. Esto ayuda a la IA a entender el propósito de cada elemento accionable. Segundo, confiamos en el patrón del modelo de objetos de página. Aunque la IA generará esta página para nosotros, por lo que no necesitamos crearla y mostrará cómo lo estamos haciendo, es crucial mantenerlos y gestionarlos. Este enfoque hace que nuestras pruebas sean más limpias y modulares.

Ahora, por último, necesitaremos herramientas. Una de ellas es una extensión de navegador llamada end-to-end test helper. Puedes escanear este código de barras nuevamente, siempre el código de barras y revisarlo. Contribuye, por favor, o simplemente explora la documentación. Y por favor, échale un vistazo y considera una contribución. Realmente me encantaría tener más manos en la sala. Para la tercera herramienta, usamos una extensión de IDE llamada continue. Es una extensión fantástica, por cierto, similar a herramientas como Copilot y otras que te ayudan a gestionar y trabajar con tu código directamente en UID. Ofrece una potente autocompletación y muchas otras características geniales que, por cierto, Copilot no tiene. Es de código abierto, así que definitivamente échale un vistazo. Es una gran herramienta para tener en tu caja de herramientas. Genial, de acuerdo.

Así que pasemos a la demostración, a la demostración real. Dame un segundo. Aquí vamos. Así que, esta es la aplicación para la que crearemos las pruebas. Esta es la aplicación Pokemon. Tenemos la lista de Pokemon con la capacidad de filtrar por nombre, o filtrar por tipo.

También tenemos la navegación a la página de más detalles o página de detalles de Pokemon, anterior, siguiente, y podemos volver a la página de la lista. Así que esta es la aplicación en la que vamos a ejecutar la prueba. Esta es nuestra prueba y este es nuestro código.

Aquí tenemos, en primer lugar, el caso de prueba. Son casos de prueba bien escritos y definidos que básicamente deberían ser realizados por QA en algún lugar antes de que comience el desarrollo real. Es un lenguaje humano, como puedes ver, lenguaje natural. Nuestro caso de prueba. ¿De acuerdo? Escenario. Escenario de prueba que necesita ser probado.

También he creado el objeto de la página de la lista de Pokemon. Este lo he creado yo mismo porque no tenemos suficiente tiempo para crear todo durante la demostración. Pero el objeto de la página de detalles lo crearé contigo, y te mostraré cómo lo creamos, y qué estamos haciendo con eso. Y este es el archivo vacío para nuestra prueba que generaremos. ¿De acuerdo? Así que comencemos con la página de detalles de Pokemon. Vamos a nuestra página de detalles de Pokemon. ¿De acuerdo? Esto es detalles de Pokemon.

Como dije, vamos a usar nuestra extensión. Por cierto, en esta extensión, hay configuraciones. Puedes seleccionar qué tipo de objeto, llama, lo que sea con lo que estés trabajando. AI LLM. Los mensajes del sistema los puedes gestionar. ¿De acuerdo? Y también, simplemente guárdalos para su uso. ¿De acuerdo? No ingreses cada vez. Igual. Tenemos mensajes de usuario. También puedes crear si lo necesitas. Y aquí, básicamente, la vista principal. ¿De acuerdo? Así que, en primer lugar, podemos escanear. ¿De acuerdo? Todos los elementos. Podemos ver que este tiene 105 elementos.

También podemos ver para la depuración cuáles son los elementos. Nombre del objeto de página. Página de detalles de Pokemon. Mensaje del sistema. El que ya está almacenado, predefinido. Solicitud de usuario no relevante. Y enviemos la solicitud. Esperemos un poco. Y ahora. Bien. Bien. Lo siento por eso.

Aquí, tenemos el objeto de página. Solo copiemos. También podemos simplemente guardarlo en el archivo. Regresemos aquí. Y aquí vamos. Solo necesitamos hacerlo exportable. Bien. Así que, ahora tenemos nuestro objeto de página para la página de detalles de Pokemon. Y usaremos la extensión. ¿De acuerdo? Extensión Continue. Y todo lo que haremos es simplemente preguntar. Es un comentario predefinido. Puedes crear el tuyo propio. Prueba de extremo a extremo. Crear la prueba de extremo a extremo. Y pasar el contexto. El contexto pasaré todos los archivos abiertos. O puedo ir archivo por archivo.

¿De acuerdo? Pero no quiero gastar el tiempo. Así que iré con todos los archivos abiertos que tengo ahora mismo. Eso es exactamente lo que necesito. Necesito todos los objetos de página que tenemos. Necesito el caso de prueba en sí. Eso es lo que voy a enviar a EI con la ecuación, con el prompt predefinido.

Nuevamente, desafortunadamente, no tenemos suficiente tiempo para revisar. Pero hay algún mensaje del sistema que dice, Hey, eres el experto en pruebas de extremo a extremo. Y alguna otra información adicional. Y algún tipo de definición que EI, en general, tenemos que tener en cuenta. Bien. Enter. Y aquí vamos. Esta es nuestra prueba. Vamos a copiar. Vamos a pegarlo aquí. Este es el único problema que siempre tenemos.

Bien, eso es todo. Vamos. Aquí la prueba se ejecuta y funciona. Bien. Volvamos a la diapositiva. Y eso es básicamente todo, creo. Muchas gracias. Encuéntrame. Sígueme. Muchas gracias. Que tengas un día maravilloso.