Tester différentes tailles d'écran et de fenêtre

Les tests font partie intégrante du processus de développement des applications. Vous exécutez généralement des applications sur un émulateur ou un appareil pour vérifier manuellement que votre code fonctionne comme prévu. Toutefois, les tests manuels prennent beaucoup de temps, sont susceptibles d'entraîner des erreurs et sont souvent ingérables pour les applications qui s'exécutent sur des écrans et des appareils de différentes tailles. Les problèmes liés aux tests manuels découlent le plus souvent de l'utilisation d'un seul appareil pour le développement. Par conséquent, les erreurs peuvent passer inaperçues sur d'autres appareils de facteurs de forme différents.

Pour identifier les régressions sur différentes tailles de fenêtre et d'écran, implémentez des tests automatisés afin de vérifier que le comportement et l'apparence de votre application sont cohérents sur différents facteurs de forme. Les tests automatisés identifient les problèmes dès le début, ce qui réduit le risque qu'ils affectent l'expérience utilisateur.

Que faut-il tester ?

Lorsque vous développez des interfaces utilisateur conçues pour différentes tailles d'écran et de fenêtre, prêtez une attention particulière aux deux aspects:

  1. Différences entre les attributs visuels des composants et des mises en page sur des fenêtres de tailles différentes
  2. Préservation de l'état en cas de modification de la configuration

Attributs visuels

Que vous personnalisiez ou non les interfaces utilisateur pour différentes tailles de fenêtre, vous devez vérifier qu'elles s'affichent correctement. Tenez compte des largeurs et des hauteurs qui sont compactes, moyennes et étendues. Pour connaître les points d'arrêt recommandés, consultez la section Classes de taille de fenêtre.

Figure 1. Écran "Pour vous" de Now in Android dans différentes tailles de fenêtre

En outre, il est possible que votre application n'affiche pas certains composants de votre système de conception comme prévu lorsque leurs contraintes de taille sont étirées.

Si votre application comporte des mises en page adaptatives pour différentes tailles de fenêtre, vous devez effectuer des tests automatisés pour éviter les régressions. Par exemple, la correction d'une marge sur un téléphone peut entraîner des incohérences de mise en page sur une tablette. Créez des tests d'interface utilisateur pour vérifier le comportement de vos mises en page et de vos composants, ou créez des tests de capture d'écran pour vérifier visuellement les mises en page.

Restauration de l'état

La rotation et le redimensionnement des applications exécutées sur des appareils tels que des tablettes sont beaucoup plus fréquents que pour les applications sur les téléphones. En outre, les pliables introduisent de nouvelles fonctionnalités d'affichage, telles que le pliage et le dépliage, qui peuvent déclencher des modifications de la configuration. Votre application doit pouvoir restaurer l'état lorsque ces modifications de configuration se produisent. Vous devez également écrire des tests qui confirment que votre application restaure l'état correctement.

Figure 2. Appareil pliable plié, ouvert à plat, ouvert à plat avec une rotation en mode paysage et à moitié ouvert (à plat).

Tout d'abord, vérifiez que votre application ne plante pas lorsque des modifications de configuration se produisent. Assurez-vous que chaque UI de votre application peut gérer n'importe quelle combinaison de rotation, de redimensionnement ou de pliage. Étant donné que les modifications de configuration recréent l'activité par défaut, certains plantages se produisent en raison de l'hypothèse de persistance de l'activité.

Il existe plusieurs façons de tester les modifications de configuration, mais dans la plupart des cas, il en existe deux:

  • Dans Compose, utilisez StateRestorationTester pour simuler un changement de configuration de manière efficace sans redémarrer l'activité. Pour en savoir plus, consultez les sections suivantes.
  • Dans n'importe quel test d'interface utilisateur, tel qu'Espresso ou Compose, simulez un changement de configuration en appelant Activity.recreate().

Vous n'avez généralement pas besoin d'utiliser différents appareils pour tester la restauration d'état en réponse aux modifications de configuration. En effet, toutes les modifications de configuration qui recréent l'activité ont des répercussions similaires. Cependant, certaines modifications de configuration peuvent déclencher différents mécanismes de restauration d'état sur des appareils spécifiques.

Par exemple, lorsqu'un utilisateur consulte une interface utilisateur détaillée en liste sur un appareil pliable ouvert et qu'il plie l'appareil pour passer à l'écran frontal, l'interface utilisateur affiche généralement la page d'informations. Un test automatisé doit couvrir cette restauration de l'état de l'UI, y compris l'état de navigation.

Pour tester les modifications de configuration qui se produisent sur des appareils qui passent d'un écran à un autre ou qui passent en mode multifenêtre, plusieurs options s'offrent à vous:

  • Sur n'importe quel appareil, redimensionnez l'écran lors d'un test. Dans la plupart des cas, cela déclenche tous les mécanismes de restauration d'état que vous devez vérifier. Toutefois, ce test ne fonctionnera pas pour la logique qui détecte des positions spécifiques dans les pliables, car les changements de position ne déclenchent pas de changement de configuration.
  • À l'aide d'un appareil ou d'un émulateur compatible avec les fonctionnalités que vous souhaitez tester, déclenchez les modifications de configuration associées. Par exemple, un appareil pliable ou une tablette peut être contrôlé à l'aide d'Espresso Device pour passer d'une tablette pliée à une ouverture à plat en mode paysage. Consultez la section Espresso Device (Appareil Espresso) de la page Bibliothèques et outils pour tester différentes tailles d'écran pour obtenir des exemples.
Figure 3 : Pliage et dépliage de l'appareil.

Types de tests pour différentes tailles d'écran et de fenêtre

Utilisez le type de test approprié pour chaque cas d'utilisation afin de vérifier que le test fonctionne correctement sur différents facteurs de forme:

  • Les tests de comportement de l'UI lancent une partie de l'UI de l'application, comme l'affichage d'une activité. Les tests vérifient que certains éléments existent ou possèdent des attributs spécifiques . Les tests peuvent éventuellement effectuer des actions utilisateur simulées. Pour les vues, utilisez Espresso. Jetpack Compose dispose de ses propres API de test. Les tests de comportement de l'interface utilisateur peuvent être instrumentés ou localisés. Les tests d'instrumentation s'exécutent sur des appareils ou des émulateurs, tandis que les tests d'interface utilisateur en local s'exécutent sur Robolectric sur la JVM.

    Effectuez des tests de comportement de l'interface utilisateur pour vérifier que l'implémentation de la navigation dans une application est correcte. Les tests effectuent des actions telles que des clics et des balayages. Les tests de comportement de l'interface utilisateur vérifient également l'existence de certains éléments ou propriétés. Pour en savoir plus, consultez la section Automatiser les tests de l'interface utilisateur.

  • Les tests de capture d'écran effectuent une capture d'écran d'une interface utilisateur ou d'un composant, et comparent l'image à une capture d'écran précédemment approuvée. C'est un moyen très efficace de se protéger contre les régressions, car une seule capture d'écran peut couvrir un grand nombre d'éléments et ses propriétés visuelles. Vous pouvez exécuter des tests de capture d'écran sur la JVM ou sur des appareils. Plusieurs frameworks de test de captures d'écran sont disponibles.

Enfin, vous pouvez avoir besoin de tests unitaires pour tester le fonctionnement des unités de logique qui se comportent différemment en fonction du type d'appareil ou de la taille de la fenêtre, mais les tests unitaires sont moins courants dans ce domaine.

Étapes suivantes

Pour en savoir plus sur l'implémentation des vérifications contenues dans ce document, consultez Bibliothèques et outils.