Quando si scrivono test E2E, una delle sfide più complesse è verificare la grafica di un'applicazione web: posizione dei controlli, immagini, colori, font e tutto ciò che riguarda l'aspetto visivo. Gli strumenti attuali rendono questa verifica complicata, ma ho voluto trovare una soluzione efficace per risolvere il problema.
La tecnologia utilizzata è C#, Cucumber, JavaScript, Postgres, HTML.
⚙️ La mia soluzione
Ho sviluppato una libreria che utilizza tecniche avanzate di computer graphics. Ecco come funziona:
- Raccolta immagini: Ad ogni step del test E2E, il tool cattura un'immagine dello stato dell'applicazione e genera un archivio di immagini legate a ciascuno step.
- Clusterizzazione: Le immagini master vengono raggruppate per step su test differenti, creando una base di riferimento e riducendo lo spazio necessario.
- Confronto dinamico: Durante l'esecuzione dei test successivi, il tool cattura nuove immagini negli stessi punti e le confronta con quelle archiviate, evidenziando in rosso i cambiamenti.
⚡ Gestione delle variazioni
I dati variabili come date o elenchi vengono resi trasparenti, in modo da non interferire nel confronto. Durante l'acquisizione il browser viene esteso in altezza al fine di avere un'immagine che mostri l'intera pagina. Tecniche di metodologia grafica (simili a quelle usate nell'IA) eliminano rumori dovuti a compressione delle immagini o alla presenza del cursore.
✅ Risultato finale
Per ogni step, il QA riceve un'immagine che evidenzia in rosso i cambiamenti visivi: se i cambiamenti sono voluti, può eleggere la nuova schermata a master e sarà automaticamente usata per i prossimi test. In caso contrario, può segnalare un problema.
Zero codice: Il processo è completamente automatizzato durante l'esecuzione del test funzionale, non necessita di scrivere codice, garantendo un enorme risparmio di tempo. Attualmente, questo metodo sta monitorando con successo oltre 800 schermate su diversi prodotti.