Cómo probar diferentes tamaños de pantalla y ventana

Probar la app es una parte integral del proceso de desarrollo. Por lo general, ejecutas apps en un emulador o dispositivo para verificar manualmente que el código funcione como se espera. Sin embargo, las pruebas manuales llevan mucho tiempo, son susceptibles de errores y, a menudo, son inmanejables para las apps que se ejecutan en pantallas y dispositivos de varios tamaños. Los problemas de las pruebas manuales suelen ser el resultado de usar un solo dispositivo para el desarrollo. Como resultado, los errores pueden pasar inadvertidos en otros dispositivos con diferentes factores de forma.

Para identificar regresiones en diferentes tamaños de ventana y pantalla, implementa pruebas automatizadas para verificar que el comportamiento y el aspecto de tu app sean coherentes en diferentes factores de forma. Las pruebas automatizadas identifican problemas con anticipación y mitigan el riesgo de que afecten la experiencia del usuario.

Qué debes probar

Cuando desarrolles IUs diseñadas para diferentes tamaños de pantalla y ventana, presta especial atención a los siguientes dos aspectos:

  1. En qué se diferencian los atributos visuales de los componentes y los diseños en ventanas de distintos tamaños
  2. Cómo se preserva el estado en los cambios de configuración

Atributos visuales

Independientemente de si personalizas las IUs para diferentes tamaños de ventana o no, debes verificar que se muestren correctamente. Ten en cuenta los anchos y las alturas que son compactos, medianos y extendidos. Consulta Clases de tamaño de ventana para conocer los puntos de interrupción recomendados.

Figura 1: La pantalla "Para ti" de Now In Android en diferentes tamaños de ventana

Además, es posible que tu app no renderice algunos componentes del sistema de diseño como se espera cuando se estiran sus restricciones de tamaño.

Si tu app tiene diseños adaptables para diferentes tamaños de ventana, debes tener pruebas automatizadas para evitar regresiones. Por ejemplo, corregir un margen en un teléfono puede generar inconsistencias de diseño en una tablet. Crea pruebas de la IU para verificar el comportamiento de tus diseños y componentes o crea pruebas de capturas de pantalla para verificar los diseños de forma visual.

Restablecimiento del estado

Las apps que se ejecutan en dispositivos como las tablets se rotan y cambian de tamaño con mucha más frecuencia que las apps en teléfonos. Además, los dispositivos plegables introducen nuevas capacidades de pantalla, como el plegado y el desplegado, que pueden activar cambios de configuración. Tu app debe poder restablecer el estado cuando se producen estos cambios de configuración. Luego, también debes escribir pruebas que confirmen que tu app restablezca el estado correctamente.

Figura 2: Dispositivo plegable plegado, abierto y plano, abierto y plano rotado en modo horizontal y semiabierto (para mesa).

Primero, prueba que tu app no falle cuando se produzcan cambios de configuración. Asegúrate de que cada IU de tu app pueda controlar cualquier combinación de rotación, cambio de tamaño o plegado. Como los cambios de configuración recrean la actividad de forma predeterminada, algunas fallas ocurren debido a suposiciones de persistencia de la actividad.

Existen varias formas de probar los cambios de configuración, pero, en la mayoría de los casos, existen dos maneras de probarlos:

  • En Compose, usa StateRestorationTester para simular un cambio de configuración de manera eficiente sin reiniciar la actividad. Consulta las siguientes secciones para obtener más información.
  • En cualquier prueba de la IU, como Espresso o Compose, llama a Activity.recreate() para simular un cambio de configuración.

Por lo general, no es necesario que uses diferentes dispositivos para probar el restablecimiento de estado en respuesta a los cambios de configuración. Esto se debe a que todos los cambios de configuración que recrean la actividad tienen repercusiones similares. Sin embargo, algunos cambios de configuración podrían activar diferentes mecanismos de restablecimiento de estado en dispositivos específicos.

Por ejemplo, cuando un usuario ve una IU de lista-detalles en un dispositivo plegable abierto y pliega el dispositivo para cambiar a la pantalla frontal, la IU suele cambiar a la página de detalles. Una prueba automatizada debe cubrir este restablecimiento del estado de la IU, incluido el estado de navegación.

Para probar los cambios de configuración que ocurren en los dispositivos que pasan de una pantalla a otra o que ingresan al modo multiventana, tienes varias opciones:

  • Con cualquier dispositivo, cambia el tamaño de la pantalla durante una prueba. En la mayoría de los casos, esto activa todos los mecanismos de restablecimiento de estado que debes verificar. Sin embargo, esta prueba no funcionará para la lógica que detecta posiciones específicas en dispositivos plegables, ya que los cambios de posición no activan un cambio de configuración.
  • Con un dispositivo o emulador que admita las funciones que deseas probar, activa los cambios de configuración relacionados. Por ejemplo, un teléfono plegable o una tablet se pueden controlar con un dispositivo Espresso para pasar de plegado a abierto plano en un paisaje. Si deseas ver ejemplos, consulta la sección Dispositivo Espresso de Bibliotecas y herramientas para probar diferentes tamaños de pantalla.
Figura 3: Plegado y desplegado del dispositivo.

Tipos de pruebas para diferentes tamaños de pantalla y ventana

Usa el tipo adecuado de prueba para cada caso de uso y verifica que la prueba funcione correctamente en diferentes factores de forma:

  • Las pruebas de comportamiento de la IU inician alguna parte de la IU de la app, como la visualización de una actividad. Las pruebas verifican que ciertos elementos existan o tengan atributos específicos . De manera opcional, las pruebas pueden realizar acciones de usuario simuladas. Para las vistas, usa Espresso. Jetpack Compose tiene sus propias APIs de prueba. Las pruebas de comportamiento de la IU pueden ser instrumentadas o locales. Las pruebas de instrumentación se ejecutan en dispositivos o emuladores, mientras que las pruebas de IU locales se ejecutan en Robolectric en la JVM.

    Usa pruebas de comportamiento de la IU para verificar que la implementación de la navegación de una app sea correcta. Las pruebas realizan acciones como hacer clic y deslizar el dedo. Las pruebas de comportamiento de la IU también verifican la existencia de ciertos elementos o propiedades. Para obtener más información, consulta Cómo automatizar las pruebas de IU.

  • Las pruebas de captura de pantalla toman una captura de pantalla de una IU o componente y comparan la imagen con una captura de pantalla aprobada anteriormente. Esta es una forma muy eficaz de brindar protección contra regresiones, ya que una sola captura de pantalla puede cubrir una gran cantidad de elementos y sus propiedades visuales. Puedes ejecutar pruebas de capturas de pantalla en la JVM o en dispositivos. Hay varios frameworks de prueba para las capturas de pantalla disponibles.

Por último, es posible que necesites pruebas de unidades para probar la funcionalidad de las unidades lógicas que se comportan de manera diferente según el tipo de dispositivo o el tamaño de la ventana, pero las pruebas de unidades son menos comunes en esta área.

Próximos pasos

Si quieres obtener más información para implementar las verificaciones que se incluyen en este documento, consulta Bibliotecas y herramientas.