Il testing della UI diventa Gold con Flutter
Se avete partecipato al Flutter Heroes 2022 avrete sicuramente strabuzzato gli occhi davanti ad una nuova metodologia per testare automaticamente la UI di un’applicazione mobile: i Golden Test.
Integrare tale tipologia di test automatici è solitamente molto complesso e dispendioso. Questi però permettono di verificare la corretta visualizzazione della UI su dispositivi con risoluzione, densità e orientamento dello schermo differenti. Il testing infatti aumenta sia la qualità del codice scritto dagli sviluppatori, sia la qualità dell’applicazione che l’utente finale percepisce.
I Golden Test di Flutter nascono per semplificare questo processo in maniera intelligente. L’approccio è quello di scattare un certo numero di screenshot della tua app e confrontarli con dei target screenshot di riferimento. Qualsiasi deviazione tra ogni coppia di screenshot verrà segnalata al tester. In questo modo è possibile intercettare scostamenti dal desiderata e regressioni durante lo sviluppo di nuove funzionalità in maniera automatica. Ad esempio, identificando come target uno screenshot di una pagina con un bottone centrale, il sistema di testing è in grado di segnalare un errore se il bottone è assente.
Tecnicamente, in Flutter, la realizzazione di un Golden Test è molto semplice. Identificata una schermata dell’applicazione (o una sotto porzione di essa), viene acquisita una serie di screenshot di riferimento, uno per ogni particolare stato in cui si può trovare la UI. Ad esempio, immaginiamo una pagina che mostra il carrello degli acquisti. Possiamo catturare gli screenshot della schermata simulando schermi con risoluzione e orientamento differenti, con diverse dimensioni dei font. Si può anche catturare un’immagine durante la fase di attesa del caricamento dei prodotti e un’immagine una volta completato il caricamento. Gli screenshot di riferimento solitamente vengono salvati in una specifica cartella del progetto ed è possibile aggiornarli. Lo sviluppatore deve quindi solo verificare che le immagini nella cartella rispecchino l’interfaccia desiderata, sarà poi compito del sistema di testing confrontarle con le schermate attuali e segnalare eventuali differenze.
Citando un’importante realtà Enterprise, eBay ha identificato molti pattern ricorrenti utilizzati durante la stesura del codice di testing. Questi sono stati ingegnerizzati e racchiusi in Golden Toolkit, un pacchetto Flutter che semplifica notevolmente la scrittura dei Golden Test.
Per ulteriori dettagli si rimanda ai link in calce.
Fonti: https://medium.com/flutter-community/flutter-golden-tests-compare-widgets-with-snapshots-27f83f266cea https://pub.dev/packages/golden_toolkit https://www.infoq.com/news/2020/03/flutter-golden-ui-testing-ebay/