Quando vengono trovati bug durante i test delle Web Applications, molto spesso gli sviluppatori ci chiedono di fornirgli le informazioni presenti nelle tab “network” e “console” dei nostri browser per poter risalire alla fonte del problema e risolverlo.
Grazie a questi dati, loro possono capire se il problema risiede nel frontend o nel backend analizzando le chiamate tracciate nella prima tab. La seconda invece, è utile per approfondire la problematica emersa nell’interfaccia grafica.

Un bug, per essere definito completo, secondo me necessita di 3 elementi chiave:
- dettagli tecnici (info del dispositivo e del browser appena descritte);
- informazioni testuali (descrizione, step di riproduzione, risultato attuale e atteso);
- allegati multimediali (foto e/o video che ne accertano la presenza).
Nel tempo mi sono reso conto che per raggiungere questa completezza dedico del tempo per recuperare ognuno di questi elementi. E recuperandoli singolarmente, rallento la mia operatività.
Inoltre, se i bug fossero censiti senza uno di questi 3 elementi è molto probabile che gli sviluppatori ce li chiedano, e questo comporta la ri-esecuzione del test.
Esiste una software che ci aiuta a migliorare e velocizzare questo processo, e si chiama Jam.
cos’è jam
Jam è un’estensione per browser che consente di censire bug composti da allegati multimediali, informazioni testuali e dettagli tecnici. In questo modo il bug diventa un vero e proprio pacchetto che contiene tutte le informazioni necessarie per l’analisi del team di sviluppo.
Il tool fornisce 3 modalità per creare un baco: catturare screenshots, registrare video o ancora più utile ed interessante l’instant replay, che contiene gli ultimi 2 minuti di navigazione nel browser. Quest’ultima funzionalità è molto utile per non lasciarsi sfuggire un bug appena trovato e risalire a quelle situazioni “fantasma” che dopo averle trovate una volta, non si riescono più a riprodurre.

com’è composto un bug creato con jam
Il bug si presenta in questo modo: a sinistra viene mostrato il file multimediale, a destra sono presenti le informazioni tecniche corrispondenti al timeframe selezionato.

Per prendere dimestichezza con lo strumento, partiamo da un esempio. Il 20 luglio nel sito Griffeshop, un e-commerce di abbigliamento, ho trovato un bug (qui l’esempio): filtrando per “bambino”, “bambina” e “pantaloni” il sito mostra correttamente i risultati.
Invece filtrando solo per “bambina” e “pantaloni” non ci sono risultati, anche se nella ricerca precedente sono stati trovati.
In questo caso quindi c’è un baco nei filtri, molto probabilmente la fonte è il backend, ma potrebbe essere anche un errore di codifica lato frontend.
Creare un bug in questo modo permette agli sviluppatori di analizzare in autonomia le chiamate effettuate guardando la tab “network”, senza chiedere al tester di fornirgliele. Inoltre, contiene lo stato esatto del browser durante l’esecuzione: in questo modo il team può analizzare la casistica congelata nel tempo in un secondo momento.
A tutti gli effetti è un risparmio di tempo e un vantaggio tecnico da entrambi i lati.
dettagli tecnici
I dettagli tecnici sono suddivisi in diverse tab. La prima contiene le informazioni generali come: il sito, il timestamp, il sistema operativo, il browser e dimensione dello schermo.

La seconda contiene le informazioni della console del browser:

La terza le chiamate della tab network:

La quarta contiene le azioni compiute dall’utente:

browsers
L’estensione è disponibile per tutti i browser Chromium (Chrome, Edge, Arc, Premium e Opera), e prossimamente sarà disponibile anche per altri browser come Firefox.
È possibile usarla anche in incognito, andando ad abilitare l’apposita impostazione nelle estensioni del browser:

Ed è possibile creare bug quando il browser viene visualizzato in modalità responsive con dei dispositivi mobile (qui un esempio):

fruibilità
Un bug creato con Jam è fruibile in due modalità: la prima tramite un link condiviso appena viene creato, facilmente condivisibile al team di sviluppo.

La seconda permette di effettuare il censimento nei software dedicati alla gestione dei progetti come Jira, Asana ed Azure Devops per citare alcuni dei più comuni.


Conclusion
Creare i bug in modo così completo è molto utile perchè consente di migliorare il passaggio di informazioni tra i tester e il team di sviluppo, velocizzando i tempi di test, analisi e risoluzione.
