Test delle visualizzazioni animate nelle app iOS: guida esperta

Pubblicato: 2023-03-20

Le animazioni offrono transazioni visive fluide tra i vari stati dell'interfaccia utente di un'app. Nello sviluppo di applicazioni iOS, le animazioni vengono utilizzate per riposizionare le viste o modificarne le dimensioni, nonché per nascondere le viste o rimuovere le viste dalle gerarchie. Le animazioni svolgono un ruolo fondamentale nell'implementazione di straordinari effetti visivi in ​​un'applicazione. Trasmettono anche un feedback visivo per le azioni degli utenti. Il risultato è un'interfaccia utente coinvolgente e dinamica e una UX elevata per gli utenti di app iOS.

Una vista animata è una vista personalizzata che cambia aspetto o aspetto in risposta a un contesto. Ad esempio, un layout carosello ha diverse diapositive che cambiano in dimensioni e aspetto in risposta all'interazione di un utente. Tuttavia, le visualizzazioni animate funzioneranno come previsto e forniranno un'esperienza utente straordinaria solo se testate correttamente. È difficile testare le visualizzazioni animate nelle app iOS poiché le animazioni comportano modifiche basate sul tempo nell'interfaccia utente.

Questo post ti guiderà attraverso il corretto processo di test delle visualizzazioni animate nelle applicazioni iOS.

Passaggi chiave per testare le viste animate in iOS

Identificare la vista animata e i suoi componenti

Una vista animata si riferisce a una vista con un comportamento o una presentazione animati. Coinvolge diversi componenti come immagini, pulsanti, etichette e altri elementi di un'interfaccia utente. Quindi, il primo passo prima di iniziare a testare le viste animate in iOS è identificare la vista animata insieme ai suoi componenti. È necessario considerare i seguenti fattori.

  • Identifica il tipo di animazione che intendi utilizzare nell'app, ad esempio zoom avanti/zoom indietro, dissolvenza in entrata/dissolvenza in uscita e scorrimento in entrata/scorrimento in uscita.
  • Imposta la durata dell'animazione – il tempo impiegato per il completamento dell'animazione. Decidi questo tempo con molta attenzione in quanto determina l'effetto della tua animazione.
  • Identifica le interazioni utente specifiche o gli eventi particolari che attiveranno il funzionamento dell'animazione. Esempi di tali trigger includono lo scorrimento e il tocco dei pulsanti.
  • Esaminare con quanta accuratezza e precisione funzionerà o si comporterà l'animazione.
  • Controlla in che modo l'animazione influisce sulla CPU, sulle prestazioni e sull'utilizzo della memoria dell'app.
  • Considera il feedback che gli utenti dell'app forniranno durante e dopo l'animazione: indicatori visivi o feedback tattile.

L'identificazione corretta di una vista animata e dei suoi componenti è importante durante l'esecuzione dei test nei progetti di sviluppo software. Ti aiuta a suddividere il processo di test in parti più piccole e più gestibili.

Impostare l'ambiente di test

È necessario impostare un ambiente di test che consenta di ispezionare le viste e manipolarle durante le varie fasi dell'animazione. Ecco i passaggi chiave per questo.

Innanzitutto, crea un target di test separato e anche file separati per ogni componente. In questo modo, puoi verificare separatamente il comportamento previsto di ogni componente. Per creare un target separato per il tuo ambiente di test, vai su "File", quindi su "Nuovo" e infine su "Target". Selezionare il “iOS Unit Testing Bundle” presente nella sezione “Test”. Viene creato un nuovo obiettivo. È possibile utilizzare questo target per scrivere test per la visualizzazione animata. Quindi, crea una classe di test per le viste animate. Questa classe dovrebbe contenere casi di test che simuleranno varie fasi del processo di animazione e affermeranno che le viste funzioneranno come desiderato.

Ora, configura un dispositivo di prova che contenga la vista che testerai. Questo passaggio include le dipendenze essenziali, come origini dati e modelli di visualizzazione. È inoltre necessario impostare oggetti fittizi per dipendenze come origini dati e qualsiasi altra vista. Fatto ciò, puoi creare i dati di test necessari.

I passaggi di cui sopra ti aiuteranno a configurare un ambiente di test per le animazioni durante lo sviluppo dell'applicazione iOS. Ciò consentirà di condurre il processo di test in modo controllato e ripetibile.

Scrivi unit test per la logica sottostante dell'app iOS

Suddividi le animazioni in componenti di piccole dimensioni e quindi testa ogni componente singolarmente. Questa pratica è meglio che testare l'intera animazione in una volta sola. Ecco un esempio. C'è una visualizzazione personalizzata che si anima quando viene toccata. Qui, devi verificare se la vista cambia quando la tocchi e se il colore della vista cambia quando la tocchi. Dovresti anche assicurarti che la vista si animi senza intoppi.

Successivamente, identifica i componenti presenti nell'animazione. Scrivi casi di test per ogni componente per verificare se i componenti funzionano come desiderato. Si consiglia di utilizzare il framework XCTest fornito da Apple per la scrittura di tali test. Ad esempio, XCTestExpectation ti consente di attendere il completamento di un'animazione prima di fare qualsiasi asserzione. Con questo strumento è possibile testare il comportamento della vista nelle varie fasi dell'animazione.

È probabile che le animazioni abbiano dipendenze come altre viste o origini dati su altre parti dell'applicazione. Per questo motivo, è necessario isolare i test e migliorarne l'affidabilità. Per questo, è necessario utilizzare oggetti fittizi per le dipendenze. In questo modo potrai testare la logica di animazione dell'app senza doversi preoccupare delle altre parti dell'applicazione iOS.

Debug utilizzando gli strumenti di debug integrati per le animazioni in Xcode

Xcode viene fornito con una vasta gamma di strumenti di debug integrati che facilitano il debug delle animazioni. Tali strumenti ti aiutano a capire come funzionano le animazioni e identificare i bug. Grazie a questi strumenti, puoi eseguire azioni come l'impostazione di punti di interruzione nel tuo codice per mettere in pausa un'animazione in punti particolari in modo da poter esaminare lo stato della vista. Come tale, puoi identificare quegli errori logici presenti nel codice che stanno influenzando il funzionamento dell'animazione.

La gerarchia delle viste di debug dello strumento ti aiuta a ispezionare una vista durante l'animazione. Sarai in grado di vedere le proprietà di una vista in diverse fasi di un'animazione inclusi i vincoli, il frame, ecc. Xcode offre un altro ottimo strumento, il grafico della memoria di debug. Questo strumento esamina l'utilizzo della memoria di una vista durante l'animazione e ti aiuta a identificare i problemi di prestazioni come le perdite di memoria. Alcuni altri esempi di strumenti Xcode sono l'ispettore della gerarchia della visualizzazione dell'animazione, il time profiler e il simulatore di animazioni lente.

Quali sono le diverse metodologie per testare le viste animate in iOS?

Scopri le varie metodologie di test. Ognuna di queste tecniche di test svolge un ruolo cruciale nel garantire che le visualizzazioni animate vengano testate rigorosamente.

Test asincroni

Le animazioni comportano ritardi o callback che si verificano in modo asincrono. Per questo motivo, è necessario eseguire test asincroni durante il test delle viste animate. Dai un'occhiata ai passaggi per i test asincroni.

Passo 1

Utilizza XCTestExpectation, uno strumento integrato disponibile nel framework XCTest in iOS. Con questo strumento, devi creare un'aspettativa per un evento asincrono. Impostare un intervallo di timeout per l'evento. Una volta creata l'aspettativa per il completamento dell'animazione e stabilito un intervallo di timeout, il test fallirà se l'aspettativa non viene soddisfatta. Ecco un esempio.

let animationExpectation = XCTestExpectation(descrizione: "Animazione completata")

// Inizia qui il codice dell'animazione

// Al termine dell'animazione, soddisfa le aspettative

animationCompletionHandler = {

animationExpectation.fulfill()

}

// Aspetta che l'aspettativa venga soddisfatta

wait(for: [animationExpectation], timeout: 5)

Passo 2

Diverse API di animazione iOS contengono gestori di completamento che vengono chiamati dopo il completamento dell'animazione. I tester usano questi gestori di completamento per condurre i test dopo il completamento di un'animazione. Guarda questo esempio.

// Inizia qui il codice dell'animazione

// Alla fine dell'animazione, esegui il test

animationCompletionHandler = {

// Esegui il test qui

}

Passo #3

Alcune animazioni potrebbero comportare la modifica dello stato dell'interfaccia utente; questo deve essere eseguito sul thread principale. Qui devi usare le code di spedizione. In questo modo, puoi eseguire il codice di test sul thread principale dopo che l'animazione è terminata. Dai un'occhiata a come succede.

// Inizia qui il codice dell'animazione

// Alla fine dell'animazione, esegui il test sulla coda principale

animationCompletionHandler = {

DispatchQueue.main.async {

// Esegui il test qui

}

}

Test manuale

Assicurati di condurre i test su dispositivi sia simulati che reali. Questo processo è necessario per verificare se le animazioni funzioneranno come desiderato su ogni tipo di dispositivo e versione del sistema operativo.

Il test manuale prevede l'interazione manuale con la vista e l'osservazione del comportamento dell'animazione. Ecco come vengono eseguiti i test manuali. I tester eseguono l'applicazione iOS su un dispositivo o nel simulatore iOS. Quindi, attivano manualmente l'animazione interagendo con l'applicazione. In questo modo, puoi scoprire di più sui problemi di animazione come comportamenti imprevisti o eventuali anomalie nel suo funzionamento. Ricorda che il comportamento delle animazioni può essere diverso su vari dispositivi e simulatori, quindi prova le visualizzazioni animate in ambienti diversi per ottenere i migliori risultati.

Ti consigliamo inoltre di testare le visualizzazioni animate con utenti reali e osservare come interagiscono con le animazioni. Puoi farlo eseguendo una sessione di test di usabilità o uno studio utente. In questo modo, riceverai il feedback degli utenti tanto necessario sull'animazione della tua app iOS, identificherai i problemi e li risolverai tempestivamente.

Test automatizzati

Crea test automatizzati per viste animate utilizzando framework di test come EarlGrey, XCUITest o KIF per simulare le interazioni degli utenti e controllare se le animazioni si comportano come desiderato. I test automatizzati ti aiutano a rilevare i problemi nelle prime fasi di un ciclo di sviluppo. Questo approccio di test consente inoltre di mantenere funzionale l'animazione mentre si modifica il codice.

Dai un'occhiata ai passaggi su come testare le viste animate utilizzando lo strumento XCUITest.

Passo 1

Identificare la vista che contiene l'animazione che deve essere testata. Successivamente, identifica l'interazione dell'utente che attiva l'animazione.

Passo 2

Scrivi un caso di test che simuli l'interazione dell'utente per l'attivazione dell'animazione. Ad esempio, se un'animazione viene attivata con la pressione di un pulsante, è necessario creare un test case per toccare quel pulsante.

Passo #3

Una volta che l'animazione viene attivata, verifica il comportamento dell'animazione utilizzando le asserzioni. Ad esempio, controlla le dimensioni, la posizione e la capacità della vista mentre è in corso l'animazione.

Passo #4

Ora, ripeti i passaggi di cui sopra utilizzando vari scenari come diverse animazioni o diversi input dell'utente.

Dai un'occhiata a questo esempio. Qui, XCUITest viene utilizzato per creare un test case per un'animazione "pulsante".

func testButtonAnimation() {

let app = XCUIApplication()

app.launch()

let button = app.buttons[“myButton”]

pulsante.tap()

// Verifica l'animazione

let animationExpectation = aspettativa(descrizione: "Animazione del pulsante completata")

DispatchQueue.main.asyncAfter(scadenza: .now() + 1.0) {

XCTAssertTrue(button.frame.origin.x > 0, "Il pulsante dovrebbe spostarsi a destra durante l'animazione")

animationExpectation.fulfill()

}

waitForExpectations(timeout: 2.0, gestore: nil)

}

Viste conclusive

Il test delle visualizzazioni animate può diventare complicato a volte in quanto comporta cambiamenti dinamici e visivi. Per questo motivo, devi testare le visualizzazioni animate della tua app iOS seguendo le migliori pratiche e strategie. Puoi richiedere assistenza tecnica a un servizio di sviluppo di app per dispositivi mobili professionale specializzato nello sviluppo di app per iOS. Ciò ti consentirà di ottenere il giusto processo di sviluppo e test dell'app.