Tutorial de Pruebas de Interfaz Gráfica de Usuario: Una Guía Completa de Pruebas de Interfaz de Usuario

Una Guía Completa de Pruebas de Interfaz Gráfica de Usuario: Tutorial de Pruebas de Interfaz de Usuario

¿Qué es la Prueba de Interfaz gráfica de usuario?

La prueba de interfaz gráfica de usuario es un proceso de prueba de la interfaz gráfica de usuario de la aplicación para garantizar la funcionalidad adecuada según las especificaciones. Implica comprobar los componentes de la aplicación como botones, iconos,casillas de verificación, color, menú, ventanas, etc.

La dinámica visual de una aplicación web juega un papel fundamental en la aceptación de una aplicación con el usuario.

En consecuencia, esta aceptación produce una larga esclavitud de los clientes con la aplicación del cliente. En esta era de digitalización, la interfaz de usuario está cambiando rápidamente y tiene una fortaleza clave para atraer a la nueva multitud de posibles clientes.

Pruebas de interfaz de usuario

Para garantizar que la estética visual de la aplicación web sea bien aceptada, las pruebas de interfaz de usuario y usabilidad se convierten en un aspecto clave de la práctica general de control de calidad. Cualquier aplicación a la que se pueda acceder a través de una URL es una aplicación basada en la Web. En tales aplicaciones, probamos principalmente la parte frontal de la aplicación que debe ser utilizada por el usuario final.

Cada navegador muestra las páginas web de manera diferente, por lo que es importante que la página se vea igual en diferentes navegadores. Si una página web se muestra distorsionada y no administrada, los espectadores saldrán de la página web. Por lo tanto, un sitio web debe someterse a pruebas de interfaz de usuario para obtener mejores resultados.

Las pruebas de navegador se componen de los dos tipos siguientes:

Pruebas de funcionalidad

Pruebas de diferentes funciones en toda la aplicación. Implica validar todas las navegaciones, así como todos los valores de campo que están presentes en las páginas de portada, utilizando todos los escenarios positivos y negativos.

Pruebas de interfaz de usuario

Pruebas del aspecto de la página web. El factor de apariencia incluye el tipo de pantalla, la fuente, la alineación, el botón de opción, la casilla de verificación, etc.

• Las áreas cubiertas en las pruebas de interfaz de usuario son Usabilidad, Apariencia &, Controles de navegación / barras de navegación, instrucciones e información técnica, estilo, imágenes, tablas, accesibilidad, etc.
• Para probar la accesibilidad, tenemos que consultar las pautas de accesibilidad de contenido web del W3C.

Haga clic aquí para obtener la guía del W3C.

Enfoque para pruebas de interfaz de usuario

Seleccionamos un subconjunto de casos de prueba de casos de prueba funcionales que cubre todas las funcionalidades de la aplicación.

El segundo paso es modificar esos casos de prueba de acuerdo con los requisitos de prueba de la interfaz de usuario.

El siguiente paso será ejecutar esos casos de prueba; comparar el resultado con los resultados esperados, y si hay alguna diferencia, plantear el problema para el mismo. No es factible realizar pruebas en todos los navegadores. Normalmente el cliente decide en qué navegador hay que probar.

Como sabemos que cada navegador muestra la página web de manera diferente, no podemos esperar que todos los navegadores muestren una página web exactamente similar.

Por ejemplo, el menú desplegable de windows-firefox será diferente al de mac-firefox. Estos problemas son aceptables, ya que se trata de utilidades del sistema operativo y tenemos que aceptarlas como tales.

Navegador base: Normalmente, la aplicación se desarrolla dirigida a un navegador que se espera que sea utilizado principalmente por los usuarios finales, se denomina navegador base.

Defectos de interfaz de usuario comunes

• Problemas de alineación de botones
• Espacio inconsistente entre etiquetas o cuadros de texto
• Etiquetas rotas, es decir, etiqueta de una sola línea que se muestra en dos líneas
• Desalineación entre cuadros de texto, iconos de información, etiquetas o desplegables
• Superposición de campos
• Campos incompletos
• Los datos de la página están desalineados; algún tiempo desplazado hacia arriba o hacia abajo
• En cualquier navegador, mientras selecciona alguna acción, la acción correspondiente no está sucediendo
• El cambio de tamaño no funciona como se esperaba
• Tiempo de caducidad de la sesión muy corto o muy largo para algunos navegadores
• Problemas específicos del navegador: Pocos campos no se pueden editar después de ingresar datos en un navegador, pero se pueden editar en otro navegador

Interfaz de usuario de clave y Requisitos de prueba de Usabilidad

Los requisitos de prueba de interfaz de usuario clave de la aplicación web son:

1. Disponibilidad de varios componentes en una interfaz de usuario
2. Varios estados del componente de interfaz de usuario

Componente:

Un componente es un bloque de construcción, que se puede usar con la combinación de varios otros componentes para formar una aplicación. Los componentes se pueden reutilizar en toda la aplicación.

Los ejemplos de un componente incluyen Botón, Campo de texto, Autosugestión, Casilla de verificación, Menú desplegable, etc.

Algunos componentes básicos

Casilla de verificación: Se pueden seleccionar una o más opciones del componente de casilla de verificación

Botones de Radio: Cuando solo se necesita seleccionar una opción, los botones de opción son útiles

Algunos Componentes avanzados

1. Acordeón: Se pueden apilar varios elementos verticalmente utilizando este componente. Cada elemento se puede expandir para ver su contenido. También se puede ampliar más de un elemento.

2. Migas de pan: Este es un componente muy útil que ayuda en la navegación del sitio web. El usuario puede identificar su ubicación actual dentro del sitio web desde este componente.

3. Carrusel: Se pueden incorporar múltiples conjuntos de elementos de información en un componente de carrusel. Los buscadores de formas en la parte inferior indican que hay más elementos presentes. Las flechas ayudan en la navegación dentro del carrusel. Por lo general, la navegación en carrusel se configura como un bucle continuo.

Haga clic aquí para obtener más información útil sobre los componentes de la interfaz de usuario

Estados de los componentes de la interfaz de usuario

La disponibilidad de los componentes se basa exclusivamente en las directrices de requisitos del proyecto. Variará de un proyecto a otro.

Los diversos estados de interfaz de usuario para un componente básico son:

1. Estado sin llenar
2. Estado lleno y en foco
3. Estado normal y Estado predeterminado
4. Estado de desplazamiento
5. Estado deshabilitado
6. Estado enmascarado

Estado sin llenar:

Antes de introducir cualquier valor en un componente, se dice que es un estado sin rellenar. El estado Sin rellenar muestra el texto del marcador de posición, si lo hay. El siguiente es un componente de campo de texto.

Estado relleno:

Un componente con un valor introducido por el usuario es estado relleno.

En el estado de enfoque:

El usuario vuelve a visitar un componente que ya está relleno. El componente debe mostrar el cursor, indicando que el componente específico está enfocado

Estado normal:

La visualización de un componente con el valor ya introducido por el usuario en la pantalla se describe como el estado normal.

Estado Predeterminado:

Un componente que muestra automáticamente el valor de la servidor/backend. Este valor también puede ser editado por el usuario en algunos escenarios.

Estado de desplazamiento:

Pasar el ratón sobre el componente resalta el componente indicando la acción de desplazamiento.

Antes de Flotar:

En Hover:

Estado deshabilitado:

El componente está deshabilitado y el usuario no puede editar los campos.

Estado Habilitado

Estado Deshabilitado

Enmascarado Estado:

Los datos confidenciales, como la contraseña, se pueden ocultar utilizando este componente.

Los requisitos clave de las pruebas de usabilidad de la aplicación web son:

1. Familia de fuentes
2. Tamaño de fuente
3. Color
4. Espaciado de letras
5. Altura de línea
6. Validación de fondo
7. Relleno/Opacidad
8. Medidas de los componentes como longitud, anchura y anchura
9. Ubicación/espaciado entre los componentes en una pantalla

Las características de usabilidad anteriores se pueden probar en el código o utilizando el elemento inspect en la aplicación. Otra forma más fácil es usar complementos. Los complementos pueden variar en función del navegador en el que se debe probar la aplicación.

Detalles de varios complementos del Navegador

Ventajas de Add-Ons:

• Ahorra tiempo
• Fácil de usar
• es rentable

Limitación de Add-Ons:

• Error de paralaje al usar medición
• Compatible con aplicaciones
• Compatible con múltiples navegadores

Referencias para complementos:

• Inspector Web: Apple Dev Tools
• Firebug: Wiki Firebug
• Mídalo
• Colorzilla

Herramientas de prueba de interfaz gráfica de usuario

En el mundo de la tecnología hay varias herramientas disponibles que ayudarían a los evaluadores en las pruebas de interfaz de usuario.

• Selenium
• Pruebas funcionales unificadas de HP
• Cucumber
• Interfaz de usuario codificada
• Sahi

En softwaretestinghelp.com ¡sí mismo! Haga clic aquí.

Casos de prueba de interfaz gráfica de usuario de muestra

1) Verificar el funcionamiento de las flechas de carrusel y los buscadores de vías
2) Verificar que el campo de contraseña acepte valores solo en estado enmascarado
3) Verificar que el botón «guardar» permanezca inactivo hasta que se ingresen todos los campos requeridos
4) Verificar que se permita al usuario navegar hasta la parte superior de la página utilizando la barra «Superior»
5) Verificar que el se muestra cuando los filtros aplicados no recuperan ningún resultado
6) Verifique la navegación desde los enlaces disponibles en Encabezados y pies de página
7) Verifique la alineación de los botones de opción preciso
8) Verifique que se puedan seleccionar varias opciones en las casillas de verificación a la vez
9) Verifique que el título de cada sección esté en negrita
10) Verifique el cambio de color de los hipervínculos al hacer clic en

Conclusión

Un sitio web es el alma de muchas empresas. Es muy necesario asegurarse de que se vea bien y funcione de manera similar en diferentes navegadores & plataformas. Por lo tanto, las pruebas de interfaz de usuario son muy importantes y garantizarán una gran base de clientes y una adición de valor comercial.