Pruebas de interfaz gráfica de usuario: casos de prueba y ejemplos de interfaz de usuario
Tomas Hamilton
⚡ Resumen inteligente
Las pruebas de interfaz gráfica de usuario (GUI) validan cada elemento visible de una aplicación (botones, menús, iconos, cuadros de texto y diseños) para que las pantallas se comporten y aparezcan exactamente como se especifica en todos los navegadores, dispositivos y resoluciones de pantalla antes de que los usuarios reales las utilicen.
Para comprender las pruebas de interfaz gráfica de usuario (GUI), primero debemos entender qué es una GUI.
¿Qué es la interfaz gráfica de usuario?
Hay dos tipos de interfaces para una aplicación informática. La interfaz de línea de comandos es donde usted escribe texto y la computadora responde a ese comando. GUI significa Interfaz gráfica de usuario donde interactúa con la computadora usando imágenes en lugar de texto.
A continuación se muestran los elementos GUI que se pueden utilizar para la interacción entre el usuario y la aplicación:
GUI Testing es una validación de los elementos anteriores.
¿Qué son las pruebas de GUI?
Pruebas de GUI es un tipo de prueba de software que verifica la interfaz gráfica de usuario del software. El propósito de las pruebas de interfaz gráfica de usuario (GUI) es garantizar que las funcionalidades de la aplicación de software funcionen según las especificaciones mediante la verificación de pantallas y controles como menús, botones, íconos, etc.
La interfaz gráfica de usuario (GUI) es lo que ve el usuario. Al visitar guru99.com, la página de inicio que aparece es la GUI del sitio. El código fuente permanece oculto; solo la interfaz es visible. Por lo tanto, las pruebas de GUI se centran en la estructura del diseño y en si las imágenes se muestran correctamente.
En la captura de pantalla anterior, las pruebas de la interfaz gráfica de usuario (GUI) comienzan confirmando que cada imagen sea completamente visible en diferentes navegadores. Las comprobaciones restantes en esa misma página son:
- Los enlaces están disponibles y cada botón funciona al hacer clic en él.
- Cambiar el tamaño de la pantalla nunca provoca que las imágenes o el texto se reduzcan, recorten o superpongan.
- Ningún elemento del diseño se deforma al reducir el ancho de la ventana del navegador.
💡 Consejo: Comprueba la misma página con resoluciones de 1920×1080, 1366×768 y 375×812 antes de registrar cualquier error. Muchos informes de "diseño defectuoso" se deben simplemente a puntos de interrupción no probados.
Necesidad de pruebas de GUI
Ahora que el concepto básico de las pruebas de interfaz gráfica de usuario (GUI) está claro, las pocas preguntas que le vendrán a la mente serán:
- ¿Por qué realizar pruebas de GUI?
- ¿Es realmente necesario?
- ¿Acaso probar la funcionalidad y la lógica de una aplicación no es suficiente por sí solo? ¿Por qué dedicar tiempo adicional a la interfaz?
Para encontrar la respuesta, piensa como un usuario, no como un evaluador. Un usuario desconoce cómo se construyó la aplicación. Es la interfaz la que decide si el usuario continúa usándola o la abandona.
Un usuario normal observa primero el diseño y la apariencia de la aplicación, así como la facilidad de uso de la interfaz. Si un usuario no se siente cómodo con la interfaz o encuentra la aplicación compleja, no volverá. Por lo tanto, la interfaz gráfica de usuario (GUI) es un aspecto importante, y se deben realizar pruebas exhaustivas para garantizar que no presente errores.
Tipos de pruebas de interfaz gráfica de usuario (GUI)
Saber por qué la interfaz es importante es solo una parte del panorama. Las pruebas de interfaz gráfica de usuario (GUI) se dividen en cinco tipos, y cada uno responde a una pregunta diferente sobre la misma pantalla.
- Pruebas funcionales de la interfaz gráfica de usuario (GUI): Confirma que cada control hace lo que promete. Estrechamente relacionado con prueba funcionalPregunta si un botón envía un formulario, si un menú desplegable filtra y si un campo acepta entradas válidas.
- Pruebas de usabilidad: Mide la facilidad con la que una persona real completa una tarea. Pruebas de usabilidad Analiza la profundidad de la navegación, la legibilidad y si los mensajes de error realmente ayudan.
- Prueba de compatibilidad: Muestra las mismas pantallas en diferentes navegadores, sistemas operativos y tamaños de dispositivos. Prueba de navegador cruzado Detecta fallos de renderizado que aparecen solo en un motor.
- Pruebas de accesibilidad: Comprueba la navegación mediante teclado, las etiquetas del lector de pantalla y el contraste de color conforme a las directrices WCAG. Pruebas de accesibilidad Ahora es un requisito de cumplimiento en muchos mercados, no un extra opcional.
- Pruebas visuales y de rendimiento: Compara las capturas de pantalla renderizadas con una línea base y mide la velocidad de renderizado y respuesta de la interfaz, así como la superposición.ping con pruebas de rendimiento.
La mayoría de los equipos utilizan las cinco herramientas, pero les dan diferente importancia: un sitio web público se centra en la compatibilidad y la accesibilidad, mientras que un panel de control interno se basa en las comprobaciones funcionales.
¿Qué se comprueba en las pruebas de interfaz gráfica de usuario (GUI)?
La siguiente lista de verificación garantizará pruebas de GUI detalladas en las pruebas de software.
- Verifique todos los elementos de la GUI en cuanto a tamaño, posición, ancho, largo y aceptación de caracteres o números. Por ejemplo, debe poder proporcionar entradas a los campos de entrada.
- Compruebe que puede ejecutar la funcionalidad prevista de la aplicación mediante la GUI
- Compruebe que los mensajes de error se muestren correctamente
- Verifique la demarcación clara de diferentes secciones en la pantalla
- Compruebe que la fuente utilizada en una aplicación sea legible
- Compruebe que la alineación del texto sea adecuada.
- Compruebe que el color de la fuente y los mensajes de advertencia sean estéticamente agradables.
- Comprueba que las imágenes tengan buena claridad.
- Comprueba que las imágenes estén correctamente alineadas.
- Verifique la ubicación de los elementos de la GUI para diferentes resoluciones de pantalla.
Técnicas de prueba de GUI
Una vez que existe la lista de verificación, la siguiente decisión es cómo ejecutarla. Técnicas de prueba de GUI se puede clasificar en tres partes:
Pruebas basadas en manuales
Según este enfoque, los evaluadores verifican manualmente las pantallas gráficas de conformidad con los requisitos establecidos en el documento de requisitos comerciales.
Grabar y reproducir
Las pruebas de interfaz gráfica de usuario (GUI) se pueden realizar utilizando herramientas de automatización. Esto se realiza en dos partes. Durante la grabación, la herramienta de automatización captura los pasos de la prueba. Durante la reproducción, los pasos de la prueba grabados se ejecutan en la aplicación bajo prueba. Ejemplo de dichas herramientas: QTP.
Pruebas basadas en modelos
Un modelo es una descripción gráfica del comportamiento de un sistema. Nos ayuda a comprender y predecir dicho comportamiento. Los modelos facilitan la generación de casos de prueba eficientes a partir de los requisitos del sistema. El siguiente diagrama muestra cómo un modelo impulsa la generación de pruebas:
Para esta prueba basada en modelos, se debe tener en cuenta lo siguiente:
- Construye el modelo
- Determinar las entradas para el modelo.
- Calcule el resultado esperado para el modelo.
- Ejecuta las pruebas
- Comparar la producción real con la producción esperada
- Una decisión sobre futuras acciones sobre el modelo.
Algunas de las técnicas de modelado de las que se pueden derivar casos de prueba:
- Gráficos: muestra el estado de un sistema y verifica el estado después de alguna entrada.
- Tablas de decisión: tablas utilizadas para determinar los resultados de cada insumo aplicado.
Las pruebas basadas en modelos son una técnica en evolución para generar casos de prueba a partir de los requisitos.. Su principal ventaja, en comparación con los dos métodos anteriores, es que puede determinar estados indeseables que puede alcanzar su GUI.
Pruebas de interfaz gráfica de usuario manuales frente a automatizadas
Dos de esas tres técnicas son manuales y una es automatizada, lo que plantea la cuestión práctica de a qué categoría pertenece cada una. Prueba manual Al poner a un humano frente a la pantalla, detecta flujos de trabajo incómodos, redacción torpe y animaciones que no funcionan correctamente; juicios que ningún guion puede hacer.
Pruebas automatizadas Reproduce las mismas interacciones miles de veces sin fatiga, lo que la convierte en la solución ideal para rutas de regresión estables y para repetir una misma suite en múltiples navegadores. La desventaja es el mantenimiento: los scripts de interfaz gráfica automatizados fallan cada vez que cambia un localizador o un diseño. Por lo tanto, la mayoría de los equipos experimentados utilizan un enfoque híbrido, automatizando las tareas repetibles y reservando a las personas para las tareas experimentales.
| Factor | Pruebas manuales de interfaz gráfica de usuario | Pruebas automatizadas de interfaz gráfica de usuario |
|---|---|---|
| Mejores para | Nuevas pantallas, comprobaciones exploratorias, aspecto y sensación | Conjuntos de pruebas de regresión estables, ejecución en diferentes navegadores |
| Velocidad por ciclo | Lento, limitado por las horas de prueba. | Rápido, funciona sin supervisión durante la noche. |
| Costo inicial | Bajo | Alto (configuración de scripts y marco de trabajo) |
| Mantenimiento | Ninguna más allá de actualizar la lista de verificación | Significativo cuando cambia la interfaz |
| Aborda cuestiones subjetivas | Sí: | No |
Ejemplos de casos de prueba de prueba de GUI
Las pruebas de GUI básicamente implican
- Probando el tamaño, posición, ancho, alto de los elementos.
- Prueba de los mensajes de error que se muestran.
- Probando las diferentes secciones de la pantalla.
- Prueba de la fuente si es legible o no.
- Prueba de la pantalla en diferentes resoluciones con la ayuda de zoom in y zoom out como 640 x 480, 600×800, etc.
- Probar la alineación de los textos y si otros elementos como iconos, botones, etc. están en su lugar correcto o no.
- Probando los colores de las fuentes.
- Probando los colores de los mensajes de error, mensajes de advertencia.
- Probar si la imagen tiene buena claridad o no.
- Probando la alineación de las imágenes.
- Prueba de ortografía.
- El usuario no debe frustrarse mientras utiliza la interfaz del sistema.
- Probar si la interfaz está entractivo o no.
- Prueba de las barras de desplazamiento según el tamaño de la página si la hubiera.
- Prueba de los campos deshabilitados si los hubiera.
- Pruebas del tamaño de las imágenes.
- Prueba de los títulos si están correctamente alineados o no.
- Prueba del color del hipervínculo.
Demostración: cómo realizar una prueba de GUI
La lista anterior se vuelve mucho más clara cuando se aplica a una pantalla real, por lo que aquí utilizaremos algunos casos de prueba de ejemplo para el siguiente cuadro de diálogo.
A continuación se muestra un ejemplo de casos de prueba, que consiste en escenarios de prueba de interfaz de usuario y usabilidad. Si es nuevo en la redacción de estos casos, consulte cómo escribir casos de prueba de antemano.
Caso de prueba 01 – Verifique que el cuadro de texto con la etiqueta “Carpeta de origen”está alineado correctamente.
Caso de prueba 02 – Verifique que el cuadro de texto con la etiqueta “PREMIUM”está alineado correctamente.
Caso de prueba 03 – Verifique que la etiqueta tenga el nombre “Explorar”es un botón que se encuentra al final del TextoBox con el nombre "Carpeta de origen."
Caso de prueba 04 – Verifique que la etiqueta tenga el nombre “Explorar”es un botón que se encuentra al final del TextoBox con el nombre "PREMIUM."
Caso de prueba 05 – Verifique que el cuadro de texto con la etiqueta “Nombre”está alineado correctamente.
Caso de prueba 06 – Verifique que la etiqueta “Modificadores” consta de 4 botones de opción con el nombre público, predeterminado, privado, protegido.
Caso de prueba 07 – Verifique que la etiqueta “Modificadores” consta de 4 botones de opción que están alineados correctamente en una fila.
Caso de prueba 08 – Verifique que la etiqueta “Superclase"debajo de la etiqueta"Modificadores”Consiste en un menú desplegable que debe estar correctamente alineado.
Caso de prueba 09 – Verifique que la etiqueta “Superclase” consta de un botón con la etiqueta “Explorar”en él, que debe estar correctamente alineado.
Caso de prueba 10 – Verifique que al hacer clic en cualquier botón de opción, el puntero del ratón predeterminado cambie al puntero del ratón con forma de mano.
Caso de prueba 11 – Verifique que el usuario no pueda escribir en el menú desplegable de “Superclase."
Caso de prueba 12 – Verificar que se genere un error adecuado si se ha seleccionado algo por error.
Caso de prueba 13 – Verifique que el error se genere en color ROJO donde sea necesario.
Caso de prueba 14 – Verifique que se utilicen las etiquetas adecuadas en los mensajes de error.
Caso de prueba 15 – Verifique que los botones de opción individuales deban seleccionarse por defecto en cada ocasión.
Caso de prueba 16 – Verifique que el botón TAB funcione correctamente mientras salta.ping en otro campo contiguo al anterior.
Caso de prueba 17 – Verifique que todas las páginas contengan el título correcto.
Caso de prueba 18 – Verifique que el texto de la página esté correctamente alineado.
Caso de prueba 19 – Verifique que, tras actualizar cualquier campo, se muestre un mensaje de confirmación adecuado.
Caso de prueba 20 – Verifique que solo se deba seleccionar 1 botón de opción y que se puedan seleccionar varias casillas de verificación.
Desafíos en las pruebas de GUI
Redactar esos casos es sencillo; manténgaseping que sigan vivos a lo largo de varias versiones no lo es. En ingeniería de software, el problema más común al hacerlo Pruebas de regresión es que la GUI de la aplicación cambia con frecuencia. Es muy difícil probar e identificar si se trata de un problema o una mejora. El problema se manifiesta cuando no tiene ningún documento sobre los cambios en la GUI.
⚠️ Advertencia: Los scripts que localizan elementos mediante coordenadas de pantalla o identificadores generados automáticamente fallarán en la siguiente compilación. Considere la estrategia de localización como parte del diseño, no como un añadido posterior.
Herramientas de prueba de GUI
Las herramientas adecuadas absorben gran parte de esa inestabilidad. A continuación se muestra una lista de herramientas populares. Herramientas de prueba de GUI :
- Selenium
- QTP
- Cucumber
- Prueba de seda
- TestComplete
- Probador de interfaz gráfica de usuario Squish
Haga clic aquí para aprender Selenium, QTP & Cucumber.
A continuación se presentan herramientas de código abierto disponibles para realizar pruebas de IU automatizadas.
| Producto | Con licencia bajo |
|---|---|
| AutoHotkey | LPG |
| Selenium | APACHE |
| Sikuli | MIT |
| Marco de robot | APACHE |
| Agua | BSD |
| Kit de herramientas de Dojo | BSD |
Sikuli Se basa en imágenes y resulta útil cuando un control no tiene un localizador fiable; Selenium sigue siendo el valor predeterminado para pruebas de aplicaciones web.
