Pruebe una función antes de que exista
Importe imágenes desde su herramienta de diseño y prepare la prueba mientras la función aún se está creando.
Por qué probar antes de que exista
Desarrollo guiado por pruebas a partir de su diseño, en Figma o en cualquier otra herramienta: la prueba existe antes que la función.Las imágenes que sus diseñadores ya hicieron muestran cómo debe ser la pantalla, y una comprobación solo necesita una imagen de lo que debe esperar.
Así la prueba está lista el día en que la función se termina de desarrollar.Su primera ejecución le dice al equipo, elemento por elemento, si lo desarrollado coincide con lo diseñado.
La idea en cuatro pasos
Exportar
Botones, iconos y pantallas de su herramienta de diseño, como imágenes
Importar
A los Archivos de contenido de la prueba
Componer
Colóquelas en la pista Referencia visual
Comprobar
Añada una comprobación por cada elemento que importa
Importar las imágenes de su diseño
Exporte los elementos desde cualquier herramienta de diseño, como Figma, Sketch, Adobe XD o Photoshop, como imágenes PNG: una pantalla entera, o elementos sueltos como un botón, un icono o un logotipo.Expórtelos con el tamaño que tendrán en pantalla.
- 1
Hacer clic en Importar multimedia
En la barra de herramientas de GUI Test Studio, o en Archivo, Importar multimedia.Elija sus imágenes: aparecen en Imágenes, dentro de Archivos de contenido.
- 2
Darles nombres claros
Haga clic con el botón derecho en una imagen y elija Cambiar nombre..., o pulse F2: «Botón de pago», «Icono del carrito».Los nombres viajan con la prueba.
Componer la pantalla en la Referencia visual
La pista Referencia visual es lo que usted ve en la vista previa en cada momento.Normalmente contiene una grabación, pero admite imágenes igual de bien.Arrastre hasta ella una imagen desde Archivos de contenido: se convierte en un clip que puede mover y alargar, como una diapositiva de una presentación.
Coloque varias imágenes una tras otra para contar la historia de la futura función como un collage: la pantalla de la lista, luego el diálogo que se abre, luego la confirmación.
Añadir las comprobaciones
- 1
Arrastrar una comprobación al momento de su imagen
Desde la paleta de aserciones hasta la pista Aserciones, debajo de la imagen a la que corresponde.
- 2
Mostrarle qué debe buscar
Abra el editor de la comprobación.El fotograma que muestra es su imagen de diseño: dibuje un rectángulo alrededor del elemento para una comprobación visual, o marque las palabras para una comprobación de texto.En el Editor de objetivo visual también puede arrastrar la imagen de un solo elemento directamente desde Archivos de contenido hasta el lienzo.
- 3
Añadir las acciones entre ellas
Arrastre clics y texto escrito desde la paleta de eventos, o grábelos más tarde, cuando la pantalla ya exista, con Grabar un escenario nuevo.
El diseñador comparte la imagen del nuevo botón Exportar y la del mensaje «Exportación completada».Usted importa las dos, las pone en la Referencia visual, y añade una aserción visual sobre el botón y una aserción de texto sobre el mensaje.La prueba espera en el repositorio.El día en que un desarrollador, o un agente de programación con IA, termina la función, el pipeline la ejecuta e informa de si el botón tiene el aspecto diseñado.
Cuando la función esté desarrollada
| Lo que muestra la primera ejecución | Qué hacer |
|---|---|
| Todo se supera | La función coincide con su diseño.Desde ahora la prueba la protege de las regresiones. |
| Un elemento tiene otro aspecto | Una diferencia real entre el diseño y lo desarrollado.Cree un informe de defecto, o acepte el aspecto nuevo si el diseño cambió por el camino. |
| Un elemento no se encuentra | Revise su tamaño: una imagen de diseño exportada a una escala distinta de la de la pantalla no se encuentra.Acepte la mejor región que ofrece el informe, o capture de nuevo el elemento desde la pantalla real. |
Prueba preparada a partir del diseño
Función desarrollada
Primera ejecución
Aceptar el aspecto real
Una vez
¿Sigue con problemas?Díganos qué intentaba hacer, y respondemos en un día laborable.Ask our team