Prova diverse dimensioni di schermo e finestra

I test sono parte integrante del processo di sviluppo dell'app. Di solito esegui le app su un emulatore o un dispositivo per verificare manualmente che il codice funzioni come previsto. Tuttavia, i test manuali richiedono molto tempo, sono suscettibili di errori e spesso ingestibili per le app eseguite su schermi e dispositivi di varie dimensioni. I problemi dei test manuali sono spesso dovuti all'utilizzo di un solo dispositivo per lo sviluppo. Di conseguenza, gli errori possono passare inosservati su altri dispositivi con fattori di forma diversi.

Per identificare le regressioni su finestre e dimensioni dello schermo diverse, implementa test automatici per verificare che il comportamento e l'aspetto della tua app siano coerenti nei diversi fattori di forma. I test automatici identificano subito i problemi, mitigando il rischio che influiscano sull'esperienza utente.

Cosa verificare

Quando sviluppi interfacce utente realizzate per schermi e finestre di dimensioni diverse, presta particolare attenzione a due aspetti:

  1. Le differenze tra gli attributi visivi dei componenti e dei layout su finestre di dimensioni diverse
  2. Come viene conservato lo stato nelle modifiche alla configurazione

Attributi visivi

Indipendentemente dal fatto che personalizzi o meno le UI per finestre di dimensioni diverse, devi verificare che le UI siano visualizzate correttamente. Prendi in considerazione larghezze e altezze compatte, medie ed estese. Per i punti di interruzione consigliati, consulta Classi di dimensioni della finestra.

Figura 1. La schermata "Per te" di Now In Android con finestre di dimensioni diverse

Inoltre, la tua app potrebbe non eseguire il rendering di alcuni componenti nel tuo sistema di progettazione come previsto quando i relativi vincoli di dimensioni sono allungati.

Se la tua app dispone di layout adattivi per finestre di dimensioni diverse, dovresti eseguire test automatici per evitare regressioni. Ad esempio, la correzione di un margine su uno smartphone può generare incoerenze di layout su un tablet. Crea test dell'interfaccia utente per verificare il comportamento dei layout e dei componenti oppure realizza test degli screenshot per verificare visivamente i layout.

Ripristino dello stato

Le app in esecuzione su dispositivi come i tablet vengono ruotate e ridimensionate con maggiore frequenza rispetto alle app installate su smartphone. Inoltre, i pieghevoli introducono nuove funzionalità di visualizzazione, come la chiusura e l'apertura, che possono attivare modifiche alla configurazione. L'app deve poter ripristinare lo stato quando si verificano queste modifiche alla configurazione. Devi anche scrivere test che confermino lo stato del ripristino corretto dell'app.

Figura 2. Dispositivo pieghevole piegato, aperto in posizione orizzontale, aperto in posizione orizzontale e aperto a metà (da tavolo).

Innanzitutto, verifica che l'app non abbia un arresto anomalo quando vengono apportate modifiche alla configurazione. Assicurati che ogni UI della tua app possa gestire qualsiasi combinazione di rotazione, ridimensionamento o piegatura. Poiché le modifiche alla configurazione ricreano l'attività per impostazione predefinita, alcuni arresti anomali si verificano perché si ipotizza la persistenza dell'attività.

Esistono diversi modi per testare le modifiche alla configurazione, ma nella maggior parte dei casi esistono due modi per farlo:

  • In Compose, utilizza StateRestorationTester per simulare una modifica della configurazione in modo efficiente senza riavviare l'attività. Per ulteriori informazioni, consulta le sezioni seguenti.
  • In qualsiasi test della UI come Espresso o Compose, simula una modifica alla configurazione chiamando Activity.recreate().

In genere non è necessario utilizzare dispositivi diversi per testare il ripristino dello stato in risposta alle modifiche alla configurazione. Questo perché tutte le modifiche alla configurazione che ricreano l'attività hanno ripercussioni simili. Tuttavia, alcune modifiche alla configurazione potrebbero attivare diversi meccanismi di ripristino dello stato su dispositivi specifici.

Ad esempio, quando un utente visualizza una UI elenco-dettagli su un pieghevole aperto e chiude il dispositivo per passare al display frontale, la UI in genere passa alla pagina dei dettagli. Un test automatico dovrebbe includere il ripristino dello stato della UI, incluso lo stato di navigazione.

Per testare le modifiche alla configurazione che si verificano sui dispositivi che passano da un display all'altro o che attivano la modalità multi-finestra, hai a disposizione più opzioni:

  • Utilizzando qualsiasi dispositivo, ridimensiona lo schermo durante il test. Nella maggior parte dei casi, vengono attivati tutti i meccanismi di ripristino dello stato che devi verificare. Tuttavia, questo test non funziona per la logica che rileva posture specifiche nei pieghevoli, poiché le modifiche alla postura non attivano una modifica alla configurazione.
  • Utilizzando un dispositivo o un emulatore che supporti le funzionalità da testare, attiva le relative modifiche alla configurazione. Ad esempio, un dispositivo pieghevole o un tablet può essere controllato utilizzando il dispositivo espresso per passare dalla posizione piegata a quella aperta in orizzontale. Per alcuni esempi, consulta la sezione Dispositivo Espresso di Librerie e strumenti per testare diverse dimensioni dello schermo.
Figura 3. Chiusura e apertura del dispositivo.

Tipi di test per schermi e finestre di dimensioni diverse

Utilizza il tipo di test appropriato per ogni caso d'uso per verificare che funzioni correttamente nei diversi fattori di forma:

  • I test del comportamento dell'interfaccia utente avviano alcune parti dell'interfaccia utente dell'app, ad esempio la visualizzazione di un'attività. I test verificano che alcuni elementi esistano o abbiano attributi specifici . I test potrebbero eseguire facoltativamente azioni utente simulate. Per le visualizzazioni, utilizza Espresso. Jetpack Compose dispone di API di test. I test del comportamento della UI possono essere strumentati o locali. I test strumentati vengono eseguiti su dispositivi o emulatori, mentre i test locali dell'interfaccia utente vengono eseguiti su Robolectric sulla JVM.

    Utilizza i test del comportamento dell'interfaccia utente per verificare che l'implementazione della navigazione in un'app sia corretta. I test eseguono azioni come clic e scorrimenti. I test di comportamento dell'interfaccia utente controllano anche l'esistenza di determinati elementi o proprietà. Per maggiori informazioni, consulta Automatizzare i test dell'interfaccia utente.

  • I test degli screenshot acquisiscono uno screenshot di un'interfaccia utente o di un componente e confrontano l'immagine con uno screenshot approvato in precedenza. Questo è un modo molto efficace per proteggersi dalle regressioni, dato che un singolo screenshot può coprire un numero elevato di elementi e le relative proprietà visive. Puoi eseguire test di screenshot sulla JVM o sui dispositivi. Sono disponibili diversi framework per il test degli screenshot.

Infine, potresti aver bisogno di test delle unità per testare la funzionalità delle unità logiche che si comportano in modo diverso a seconda del tipo di dispositivo o delle dimensioni della finestra, ma i test delle unità sono meno comuni in quest'area.

Passaggi successivi

Per ulteriori informazioni su come implementare i controlli contenuti in questo documento, consulta Librerie e strumenti.