Perché gli occhi non mentono - Test visivi utilizzando Applitools Eyes

Pubblicato: 2021-08-17

Il test di regressione garantisce che qualsiasi modifica introdotta nel software non interrompa nulla che in precedenza funzionava correttamente. Il test di regressione visiva garantisce che eventuali problemi della GUI non si siano verificati a causa delle modifiche apportate. L'applicazione dovrebbe avere ancora l'aspetto che aveva prima dell'introduzione delle modifiche. Uno strumento di test di regressione visiva acquisisce schermate dell'interfaccia utente corrente e le confronta con le schermate originali. Esamina le polarità storiche e conferma che le pagine Web continuano a essere visualizzate come previsto su vari browser anche dopo le modifiche. Applitools Eyes è uno degli strumenti di test visivi più popolari disponibili sul mercato che è alimentato dalla sua tecnologia proprietaria di visione cognitiva.

Applitools ha sviluppato uno strumento di test del software basato su cloud, Applitools Eyes, che convalida automaticamente tutti gli aspetti visivi di qualsiasi app Web, mobile e nativa. Queste convalide sono simili a quelle di un tester manuale. La tecnologia Applitools convalida automaticamente la correttezza del layout, del contenuto e dell'aspetto dell'interfaccia utente e consente di automatizzare i test che possono essere eseguiti solo manualmente senza di essa. Può testare le app su qualsiasi browser, dispositivo, sistema operativo e linguaggio di programmazione, su qualsiasi risoluzione dello schermo e fattore di forma.

Test visivi

Una panoramica del sistema Applitools Eyes

Vari ambienti di test interagiscono con i vari componenti Eyes di Applitools per implementare test visivi dell'interfaccia utente. Il sistema è composto dai seguenti componenti:

  • L'applicazione in prova (AUT).
  • Una suite di test che funziona per l'AUT e ne verifica l'accuratezza.
  • Gli SDK vengono chiamati con il codice della suite di test per attivare l'acquisizione di screenshot e il controllo visivo.
  • Driver applicativi come Selenium o Appium che forniscono un framework per creare tute di prova che possono essere inviate all'AUT. Li usa anche per acquisire schermate.
  • Il server riceve e archivia lo screenshot inviato dagli SDK. Li confronta con le immagini di base memorizzate e segnala eventuali differenze.
  • Eyes Test Manager fornisce all'utente i risultati dei test che può rivedere e aiuta l'utente a segnalare bug e gestire le immagini di base.

Di seguito è riportato un esempio di come i componenti interagiscono per eseguire un test, consentendo al team di test di visualizzare e gestire i risultati del test.

Strumenti applicativi

Credito: Applicatools

PASSAGGIO 1: Il team di test esegue la suite di test. Il codice in genere ripete i passaggi seguenti per diversi stati dell'applicazione.

PASSAGGIO 2.1: Utilizzando driver come Selenium o Appium, vengono simulate le azioni dell'utente come il clic del mouse, l'immissione da tastiera, ecc.

PASSAGGIO 2.2: Insieme a ciò, l'API Eyes SDK viene chiamata per eseguire un checkpoint visivo contemporaneamente.

PASSAGGIO 2.2.a: Eyes SDK utilizza il driver per raccogliere lo screenshot.

PASSAGGIO 2.2.b: Dopodiché Eyes SDK invia l'immagine raccolta a Eyes Server. Qui le immagini e le altre immagini del checkpoint vengono confrontate con le immagini di base precedentemente memorizzate sul server.

FASE 3: Una volta elaborate le immagini del test, Eyes Server fornisce le informazioni relative alle eventuali differenze riscontrate. Insieme a questo viene fornito un collegamento al sito Eyes dove è possibile visualizzare i risultati.

PASSAGGIO 4: Il team di test utilizza Eyes Test Manager per visualizzare i risultati del test, aggiornare le linee di base, segnalare bug e annotare le regioni che richiedono una gestione speciale. Dopo aver visualizzato tutti i risultati, il team di test salva la linea di base. Questa diventa la base per il confronto nel prossimo test.

Applitools dispone di SDK che supportano un'ampia gamma di framework di automazione dei test Web, mobili e desktop, varie infrastrutture di driver applicativi, linguaggi di programmazione e tutte le piattaforme, i browser e i sistemi operativi comuni. Questi SDK non interagiscono direttamente con l'AUT, quindi Eyes è completamente indipendente da come l'applicazione viene implementata e distribuita.

Compatibilità di Applitools Eyes

Applitools dispone di SDK per tutti i più diffusi linguaggi di programmazione e test runner che forniscono una copertura completa dei test per Web, dispositivi mobili, desktop, PDF, sistemi operativi TV, IoT, immagini e altro ancora.

SDK WEB

I WEB SDK supportano tutti i principali strumenti e programmi di test web:

  1. Selenio per -Java, JavaScript, C#, Ruby, PHP, Python
  2. WebdriverIO4, WebdriverIO5, WebdriverIO6
  3. Selenio IDE
  4. Cipresso
  5. Drammaturgo (Nuova aggiunta)
  6. Burattinaio (Nuova aggiunta)
  7. Test Cafe
  8. Storybook CSF React (Nuova aggiunta), Storybook -React, Angular, Vue
  9. Watir
  10. Capibara
  11. Goniometro (Nuova aggiunta)
  12. UFT/QTP
  13. Lean CFT#, Lean JavaScript
  14. Interfaccia utente codificata

SDK mobili

Gli SDK per dispositivi mobili supportano tutti i principali strumenti e programmi di test per dispositivi mobili:

  1. Appium Native –C#, Java, JavaScript, PHP, Python, Ruby
  2. Appium Web - C#, Java, JavaScript, PHP, Python, Ruby
  3. XCUI Obiettivo-C, XCUI Swift
  4. Caffè espresso
  5. Calabash iOS e Android

SDK di screenshot

CLI, C#, Java, JavaScript, PHP, Ruby, XCTest Objective-C, XCTest Swift

SDK desktop

Windows UFT, interfaccia utente codificata di Windows

Strumenti senza codice

Moduli PDF, IDE senza codice

Il Test Manger in Applitools Eyes

Eyes Test Manager è uno strumento basato su browser che fornisce l'accesso ai dati di test visivi dell'interfaccia utente. Consente agli utenti di gestire i risultati dei test, le linee di base e altri metadati.

Eyes Test Manager fornisce le seguenti strutture:

  • Accedi ai risultati delle esecuzioni dei test dell'interfaccia utente visiva
  • Accetta o rifiuta le differenze registrate
  • Annota i passaggi con i commenti
  • Aggiungi il livello di corrispondenza e ignora le regioni
  • Aggiorna la linea di base
  • Visualizza e gestisci l'applicazione e i nomi dei test
  • Visualizza e gestisci le linee di base e le filiali
  • Visualizza e gestisci gli ambienti di esecuzione
  • Confronta e unisci i rami di base
  • Gestisci il tuo account, i team e gli utenti

Ci sono vari altri strumenti e concetti che sono stati integrati in Eyes che aiutano l'utente a organizzare test e casi di test. Uno di questi strumenti è la linea di base. Il protocollo di ispezione visiva confronta le immagini acquisite con quelle memorizzate nella linea di base del test precedente. Ogni esecuzione di prova può avere un aspetto diverso. Gli occhi hanno molte linee di base per test, in cui ciascuna linea di base rappresenta un ambiente selezionato. Ognuna di queste linee di base può memorizzare serie di riferimenti a immagini.

Quando viene eseguito il test visivo, l'applicazione viene guidata attraverso una sequenza di stati dell'applicazione e per ogni stato viene eseguito un checkpoint che acquisisce un'immagine dell'applicazione per quello stato. Eyes confronta la serie di immagini acquisite con la serie di immagini di riferimento memorizzate nella linea di base di quel test e segnala eventuali differenze significative. L'immagine all'interno della linea di base dipende dalle esecuzioni dei test, ma potrebbero anche dipendere da altri fattori, come i sistemi operativi, il tipo di browser e le dimensioni del viewport. Questi fattori sono chiamati ambiente di esecuzione.

La finestra è l'area visiva di qualsiasi applicazione all'interno della finestra dell'applicazione. Le dimensioni del viewport possono anche influire sul layout di qualsiasi pagina. Ad esempio, la modifica della dimensione del browser potrebbe modificare l'aspetto del testo visualizzato. Le pagine responsive con elementi come i menu possono apparire diverse per dimensioni diverse. Il carattere e la dimensione dell'immagine potrebbero cambiare. Nota: il viewport è specifico della piattaforma.