Verschiedene Bildschirm- und Fenstergrößen testen

Tests sind ein wesentlicher Bestandteil der App-Entwicklung. Normalerweise führen Sie Apps in einem Emulator oder auf einem Gerät aus, um manuell zu prüfen, ob Ihr Code wie erwartet funktioniert. Manuelle Tests sind jedoch zeitaufwendig, fehleranfällig und oft nicht verwaltbar für Anwendungen, die auf Bildschirmen und Geräten unterschiedlicher Größe ausgeführt werden. Die Probleme bei manuellen Tests sind meist auf die Verwendung eines einzelnen Geräts für die Entwicklung zurückzuführen. Infolgedessen können Fehler auf anderen Geräten mit anderen Formfaktoren unbemerkt bleiben.

Um Regressionen bei verschiedenen Fenster- und Bildschirmgrößen zu erkennen, implementieren Sie automatisierte Tests, um zu prüfen, ob Verhalten und Erscheinungsbild Ihrer App bei verschiedenen Formfaktoren einheitlich sind. Automatisierte Tests identifizieren Probleme frühzeitig und minimieren das Risiko von Problemen, die sich auf die User Experience auswirken.

Testelemente

Achten Sie bei der Entwicklung von Benutzeroberflächen für verschiedene Bildschirm- und Fenstergrößen besonders auf zwei Aspekte:

  1. Wie sich die visuellen Attribute der Komponenten und Layouts in Fenstern unterschiedlicher Größe unterscheiden,
  2. Beibehalten des Status bei Konfigurationsänderungen

Visuelle Eigenschaften

Unabhängig davon, ob Sie UIs für verschiedene Fenstergrößen anpassen oder nicht, sollten Sie prüfen, ob sie korrekt angezeigt werden. Berücksichtigen Sie Breiten und Höhen, die kompakt, mittel und erweitert sind. Die empfohlenen Haltepunkte finden Sie unter Fenstergrößenklassen.

Abbildung 1. Der Bildschirm „Für mich“ in Now in Android in verschiedenen Fenstergrößen

Außerdem rendert Ihre Anwendung einige Komponenten in Ihrem Designsystem möglicherweise nicht wie erwartet, wenn ihre Größenbeschränkungen erweitert werden.

Wenn Ihre App adaptive Layouts für verschiedene Fenstergrößen hat, sollten Sie automatisierte Tests verwenden, um Regressionen zu vermeiden. Beispielsweise kann das Korrigieren eines Rands auf einem Smartphone zu Layout-Inkonsistenzen auf einem Tablet führen. Erstelle UI-Tests, um das Verhalten deiner Layouts und Komponenten zu überprüfen, oder erstelle Screenshot-Tests, um die Layouts visuell zu prüfen.

Statuswiederherstellung

Apps, die auf Geräten wie Tablets ausgeführt werden, werden viel häufiger rotiert und ihre Größe angepasst als Apps auf Smartphones. Außerdem bieten faltbare Smartphones neue Displayfunktionen wie das Auf- und Zuklappen, die Konfigurationsänderungen auslösen können. Ihre Anwendung muss den Status wiederherstellen können, wenn diese Konfigurationsänderungen auftreten. Außerdem müssen Sie Tests schreiben, die prüfen, ob Ihre Anwendung den Status korrekt wiederhergestellt.

Abbildung 2. Faltbares Gerät zusammengeklappt, flach aufgeklappt, flach aufgeklappt, ins Querformat gedreht und zur Hälfte geöffnet (Tischplatte).

Prüfen Sie zuerst, ob Ihre App bei Konfigurationsänderungen nicht abstürzt. Achten Sie darauf, dass jede UI in Ihrer App eine beliebige Kombination aus Drehen, Größenänderung und Falten handhaben kann. Da Konfigurationsänderungen die Aktivität standardmäßig neu erstellen, treten einige Abstürze aufgrund der Annahme einer Aktivitätspersistenz auf.

Es gibt mehrere Möglichkeiten, Konfigurationsänderungen zu testen, aber in den meisten Fällen gibt es zwei Möglichkeiten:

  • Verwenden Sie in Compose StateRestorationTester, um eine Konfigurationsänderung auf effiziente Weise zu simulieren, ohne die Aktivität neu starten zu müssen. Weitere Informationen finden Sie in den folgenden Abschnitten.
  • Simulieren Sie bei einem UI-Test wie Espresso oder Compose eine Konfigurationsänderung durch Aufrufen von Activity.recreate().

In der Regel müssen Sie keine verschiedenen Geräte verwenden, um die Wiederherstellung des Status als Reaktion auf Konfigurationsänderungen zu testen. Das liegt daran, dass alle Konfigurationsänderungen, bei denen die Aktivität neu erstellt wird, ähnliche Auswirkungen haben. Einige Konfigurationsänderungen können jedoch auf bestimmten Geräten unterschiedliche Mechanismen zur Statuswiederherstellung auslösen.

Wenn ein Nutzer beispielsweise eine UI mit Details zur Liste auf einem offenen faltbaren Smartphone ansieht und das Gerät zusammenfaltet, um zum Frontdisplay zu wechseln, wechselt die Benutzeroberfläche in der Regel zur Detailseite. Ein automatisierter Test sollte diese Wiederherstellung des UI-Status einschließlich des Navigationsstatus abdecken.

Zum Testen von Konfigurationsänderungen auf Geräten, die von einem Bildschirm zum anderen wechseln oder in den Mehrfenstermodus wechseln, haben Sie mehrere Möglichkeiten:

  • Sie können während eines Tests die Bildschirmgröße auf einem beliebigen Gerät ändern. In den meisten Fällen werden dadurch alle Mechanismen zur Statuswiederherstellung ausgelöst, die Sie überprüfen müssen. Dieser Test funktioniert jedoch nicht bei Logik, die bestimmte Sicherheitsstatus in faltbaren Geräten erkennt, da Änderungen des Sicherheitsstatus keine Konfigurationsänderung auslösen.
  • Verwenden Sie ein Gerät oder einen Emulator, der die zu testenden Funktionen unterstützt, und lösen Sie die entsprechenden Konfigurationsänderungen aus. Ein faltbares Tablet oder ein Tablet kann beispielsweise mit einem Espresso-Gerät gesteuert werden, um sich im Querformat von zugeklappt in aufgeklappt zu bewegen. Beispiele finden Sie im Abschnitt Espresso Device des Artikels Bibliotheken und Tools zum Testen verschiedener Bildschirmgrößen.
Abbildung 3: Gerät auf- und zuklappen.

Testtypen für unterschiedliche Bildschirm- und Fenstergrößen

Verwende für jeden Anwendungsfall den passenden Testtyp, um zu prüfen, ob der Test bei verschiedenen Formfaktoren richtig funktioniert:

  • UI-Verhaltenstests starten einen Teil der App-UI, z. B. die Anzeige einer Aktivität. Mit den Tests wird geprüft, ob bestimmte Elemente vorhanden sind oder bestimmte Attribute haben . Die Tests können optional simulierte Nutzeraktionen durchführen. Verwenden Sie für Ansichten Espresso. Jetpack Compose hat eigene Test-APIs. UI-Verhaltenstests können instrumentiert oder lokal sein. Instrumentierte Tests werden auf Geräten oder Emulatoren ausgeführt, während lokale UI-Tests auf Robolectric auf der JVM ausgeführt werden.

    Mit Tests des UI-Verhaltens kannst du prüfen, ob die Navigation in einer App korrekt implementiert ist. Mit den Tests werden Aktionen wie Klicks und Wischbewegungen durchgeführt. Mithilfe von UI-Verhaltenstests wird auch das Vorhandensein bestimmter Elemente oder Eigenschaften überprüft. Weitere Informationen finden Sie unter UI-Tests automatisieren.

  • Mit Screenshot-Tests wird ein Screenshot einer UI oder Komponente erstellt und das Bild mit einem zuvor genehmigten Screenshot verglichen. Dies ist ein sehr effektiver Schutz vor Regressionen, da ein einzelner Screenshot eine große Anzahl von Elementen und deren visuelle Eigenschaften abbilden kann. Sie können Screenshottests auf der JVM oder auf Geräten ausführen. Es sind mehrere Screenshot-Test-Frameworks verfügbar.

Schließlich benötigen Sie möglicherweise Einheitentests, um die Funktionalität von Logikeinheiten zu testen, die sich je nach Geräte- oder Fenstergröße unterschiedlich verhalten. Einheitentests sind in diesem Bereich jedoch weniger üblich.

Nächste Schritte

Weitere Informationen zum Implementieren der in diesem Dokument enthaltenen Prüfungen finden Sie unter Bibliotheken und Tools.