Come eseguire facilmente test di regressione visiva in WordPress

La settimana scorsa, un amico che gestisce più siti WordPress mi ha chiamato in preda al panico. Un aggiornamento di routine del plugin aveva rotto il menu di navigazione del suo cliente, ma non se n’era accorto finché i clienti non avevano iniziato a lamentarsi.

Questo è un problema comune che ho riscontrato innumerevoli volte ed è esattamente il motivo per cui i test di regressione visiva importano tanto ai proprietari di siti web WordPress.

I test di regressione visiva possono sembrare complicati. Tuttavia, si tratta di una soluzione semplice che può salvare ore di verifiche manuali e prevenire imbarazzanti problemi di layout.

In genere, funziona confrontando automaticamente gli screenshot delle pagine prima e dopo. In questo modo è possibile individuare anche i più piccoli cambiamenti visivi che potrebbero compromettere l’aspetto del sito. 🔍

In questa guida vi mostrerò come eseguire test di regressione visiva sul vostro sito WordPress. Dopo aver testato numerosi strumenti e metodi, ho trovato la soluzione più affidabile che non richiede alcuna conoscenza di codifica o competenza tecnica.

Che cos’è il test di regressione visiva e perché importa? 🤔

Ogni volta che aggiornate il vostro sito – che si tratti di un aggiornamento del nucleo di WordPress, di un nuovo plugin, di una modifica del tema o semplicemente di una piccola modifica del codice – c’è la possibilità che qualcosa sul frontend vada fuori posto.

Ad esempio, un pulsante potrebbe scomparire, il layout potrebbe rompersi o l’immagine di un prodotto potrebbe non caricarsi più correttamente.

Il problema? Questi bug visivi spesso passano inosservati finché un visitatore non li segnala attraverso un modulo di contatto o un sondaggio di feedback sul design.

A quel punto, il danno all’esperienza utente del sito potrebbe essere già fatto.

È qui che entrano in gioco i test di regressione visiva.

Il processo è semplice: scattate delle istantanee delle vostre pagine prima e dopo un aggiornamento, quindi confrontatele per individuare eventuali modifiche.

Inoltre, se si esegue il test su un sito di staging (cosa che consigliamo), si possono tranquillamente aggiornare ed eseguire confronti per individuare i problemi visivi prima che tutto vada in onda.

La buona notizia? Non è necessario farlo manualmente.

Con strumenti di test di regressione visiva come VRT, Percy o BackstopJS, è possibile automatizzare il confronto degli screenshot e verificare l’aspetto del sito su schermi di diverse dimensioni, aiutandovi a individuare i problemi di layout su desktop, tablet e dispositivi mobili.

Perché questo importa agli utenti di WordPress?

Se gestite un sito web WordPress, i test di regressione visiva sono una rete di sicurezza che salva il tempo. Invece di fare clic su ogni pagina dopo un aggiornamento, questo strumento vi fornisce un report visivo di ciò che è stato modificato e se si tratta di qualcosa da correggere.

È particolarmente utile in molti scenari, come le agenzie che eseguono aggiornamenti su più siti WordPress, i freelance che gestiscono i siti web dei clienti o i proprietari di negozi online che vogliono assicurarsi che le pagine dei prodotti e del pagamento rimangano intatte.

In breve, i test di regressione visiva vi aiutano a evitare frustranti sorprese, a salvare tempo e a far funzionare il vostro sito WordPress senza problemi.

Detto questo, condividerò come eseguire facilmente test di regressione visivi su WordPress. Ecco una rapida panoramica di tutti i passaggi che metterò in copertina in questa guida:

Passo 1: Installazione e attivazione del plugin Visual Regression Testing

In questo tutorial utilizzerò il plugin VRTs, perché è facile da usare per i principianti e facilissimo da usare per i test di regressione visiva. Che si tratti di un layout spostato, di un pulsante mancante o di un elemento rotto dopo un aggiornamento, VRTs vi aiuta a individuarlo in anticipo.

Ecco come funziona: Il plugin scatta screenshot delle pagine selezionate. È quindi possibile triggerare i confronti manualmente o programmarne l’esecuzione automatica dopo aver apportato modifiche al sito, come l’aggiornamento di un plugin o la modifica del tema.

Il plugin confronta quindi gli screenshot “prima” e “dopo” uno accanto all’altro e mette in evidenza le differenze visive.

Così, invece di verificare manualmente ogni pagina, si ottiene un rapido report visivo che mostra cosa è stato modificato e se c’è qualcosa di off.

Per installare il plugin, è necessario visitare il sito web di VRT e iscriversi a un piano facendo clic sul pulsante “Inizia gratis”.

Potete quindi scegliere uno dei piani. Il piano gratuito consente di testare fino a 3 pagine al giorno su un dominio e di programmare test giornalieri.

D’altra parte, i piani a pagamento consentono di testare un numero maggiore di pagine, di eseguire test manuali e di eseguire automaticamente test di regressione visiva dopo gli aggiornamenti del nucleo di WordPress, dei plugin e dei temi.

Basta fare clic su “Acquista ora” o “Installa ora” sotto il piano che si desidera utilizzare.

Quindi, seguite le istruzioni per registrare un account sul sito web di VRT e aggiungete i vostri dati di pagamento.

Una volta completato il pagamento, si accede alla propria Bacheca VRT, dove è possibile scaricare il plugin come file .zip.

Quindi, è sufficiente andare su Plugin ” Add Plugin e fare clic sul pulsante ‘Uploader’. Da qui, si può scegliere il file .zip del plugin VRTs appena scaricato.

Assicuratevi di attivare il plugin una volta che è stato installato. Per tutti i dettagli, potete consultare la nostra guida su come installare un plugin di WordPress.

Passo 2: Configurazione delle impostazioni del plugin VRTs

Una volta attivato il plugin, è il momento di impostare quando devono essere eseguiti i test di regressione visiva.

Andate su VRT ” Impostazioni nel menu di amministrazione di WordPress.

Una volta all’interno, è possibile scorrere verso il basso fino alla sezione “Triggers”: è qui che si indica al plugin quando scattare e confrontare automaticamente le istantanee.

Ecco le opzioni disponibili:

• Esegui test ogni 24 ore (gratuito) – È l’impostazione predefinita. I VRT controllano automaticamente i post o le pagine selezionate una volta al giorno per verificare le modifiche visive.
• Eseguire test dopo gli aggiornamenti di WordPress e dei plugin (Pro) – Ottimo per individuare i problemi di layout causati dagli aggiornamenti, proprio quando si verificano.
• Eseguite i test con le vostre applicazioni preferite (Pro) – Collegate i VRT con strumenti o flussi di lavoro esterni utilizzando i webhook.
• Esecuzione di test on demand (Pro) – Eseguite manualmente i test ogni volta che ne avete bisogno, direttamente dalla vostra dashboard di WordPress.

Una volta selezionato il trigger adatto al proprio flusso di lavoro (o alla propria licenza), è sufficiente cliccare sul pulsante “Salva modifiche” in fondo alla pagina.

Fase 3: Aggiungere nuove pagine o pubblicazioni da testare

Una volta configurate le impostazioni del plugin, è il momento di scegliere le pagine o le pubblicazioni da includere nei test di regressione visiva.

Passiamo ora alla scheda ‘Test’, dove si potranno gestire ed eseguire i test visivi.

Da qui è possibile fare clic sul pulsante “Aggiungi nuovo”. In questo modo si potranno scegliere le pagine o le pubblicazioni da testare.

Nel popup che appare, è necessario scegliere le pagine o le pubblicazioni su cui si desidera eseguire il test di regressione visiva.

Quindi, fare clic su “Aggiungi nuovo test” per confermare le selezioni.

Il plugin VRTs scatta un’istantanea iniziale di ogni pagina selezionata. Questa è la linea di base, in pratica una versione “prima” dell’aspetto attuale delle pagine o dei post.

Dopo l’impostazione del test, si vedrà l’istruzione di aggiornare la pagina per caricare l’istantanea iniziale. Procedere in tal senso.

A questo punto, troverete un link all’istantanea della pagina o della pubblica aggiunta per il test.

Si noterà anche che lo “Stato del test” è impostato automaticamente su “Programmato” per il giorno successivo. Questo perché la versione gratuita di VRTs esegue i test su un programma di 24 ore.

È possibile fare clic sul link “Visualizza snapshot” per verificare lo screenshot iniziale.

Si aprirà in una nuova scheda come questa:

A questo punto, potete apportare le modifiche necessarie al vostro sito. Poi tornate domani per rivedere il confronto e individuare eventuali problemi visivi inaspettati.

Fase 4: verifica delle differenze visive

Una volta completato il test e rilevati eventuali bug visivi, si dovrebbe vedere un avviso di notifica nella scheda “Esecuzioni” di VRT.

Una volta entrati, è possibile passare al passaggio del mouse sulla corsa con le modifiche rilevate.

Quindi, fare clic sul link “Mostra dettagli” quando appare.

Nella schermata successiva, verrà visualizzato un confronto affiancato della pagina, che mostra le versioni prima e dopo.

Il plugin evidenzia automaticamente le differenze visive, in modo da poterle individuare rapidamente:

• Spostamenti del layout ed elementi disallineati: Se il design cambia dopo l’aggiornamento di un plugin o la modifica di un tema, ad esempio i pulsanti si spostano fuori posto o il testo salta, i VRT lo segnalano.
• Elementi mancanti o rotti: Che si tratti di un’immagine mancante, di un pulsante CTA o di un modulo incorporato, i VRT consentono di individuare facilmente qualsiasi elemento che scompaia inaspettatamente, il che è particolarmente utile per le pagine di e-commerce o di landing page.
• Modifiche inaspettate del contenuto: Il plugin segnala anche le modifiche a testo, link o immagini, in modo da poter individuare modifiche non autorizzate o errori di pubblicazione prima che lo facciano gli utenti.

È possibile utilizzare la maniglia di trascinamento al centro della schermata per scorrere tra la vecchia e la nuova versione e confermare visivamente le modifiche esatte.

Fase 5: revisione e azione

Dopo aver eseguito un test di regressione visiva, è possibile agire in base ai risultati. Ecco cosa fare in seguito:

• Modificare manualmente la pagina: Se le modifiche sono piccole, è possibile correggere i problemi direttamente modificando la pagina, ad esempio regolando il layout, spostando elementi o aggiungendo caratteristiche mancanti.
• Tornare a un backup: Se le modifiche sono maggiori o più difficili da correggere, è possibile ripristinare la pagina a una versione precedente utilizzando il backup del sito web o la cronologia delle versioni. In questo modo si evita di lasciare problemi sul sito.

FAQ per l’esecuzione di test di regressione visiva in WordPress

Se state iniziando a fare i test di regressione visiva, non siete soli. Ecco alcune risposte rapide a domande comuni che sento spesso da utenti e sviluppatori di WordPress.

Qual è la differenza tra snapshot testing e visual regression testing?

Il test delle istantanee seleziona se il codice o il contenuto del sito web rimane invariato, come se si salvasse un backup di come dovrebbero essere le cose.

I test di regressione visiva, invece, si concentrano sull’aspetto del sito. Confronta gli screenshot prima e dopo gli aggiornamenti per individuare le modifiche al layout, gli elementi mancanti o i bug visivi che potrebbero non essere notati subito.

Qual è il miglior strumento per i test di regressione visiva in WordPress?

L’opzione più semplice è il plugin VRTs – Visual Regression Tests. È facile da usare per i principianti, non richiede alcuna codifica e funziona direttamente dalla Bacheca. Inoltre, ha una versione gratuita e facilissima da usare.

Come posso eseguire i test di regressione manualmente?

Il test di regressione manuale consiste nell’esaminare il sito e selezionare le pagine chiave dopo aver apportato modifiche, come l’installazione di un nuovo plugin o l’aggiornamento del tema.

Si consiglia di visitare la homepage, la pagina dei contatti, il processo di pagamento (se ne avete uno) e tutti i layout personalizzati per assicurarsi che tutto abbia ancora l’aspetto e il funzionamento desiderato. L’elaborazione in corso è efficace, ma può richiedere molto tempo se si gestisce un sito di grandi dimensioni o molto frequentato.

Come si fa a velocizzare i test di regressione?

Il modo migliore per salvare il tempo è automatizzarlo. L’uso di un plugin come VRTs – Visual Regression Tests permette di creare istantanee delle pagine più importanti e di confrontarle rapidamente dopo un aggiornamento.

Non è necessario cliccare manualmente su ogni pagina: il plugin esegue il controllo visivo per voi.

È anche possibile testare gli aggiornamenti su un sito di staging, per evitare di correggere i problemi su un sito live.

Quali sono i modi migliori per testare il design di un sito web WordPress?

Ecco alcuni suggerimenti per testare il design di WordPress:

• Utilizzate uno strumento di regressione visiva come i VRT (Visual Regression Test) per individuare le modifiche al progetto.
• Vedere l’anteprima degli aggiornamenti del tema e dei plugin su un sito di staging.
• Testate su più schermate (desktop, tablet e mobile).
• Utilizzate gli strumenti di sviluppo del browser per verificare l’aspetto del sito in diversi viewport.
• Chiedete feedback agli utenti o ai clienti: spesso notano cose che potrebbero sfuggirvi.

Spero che questo articolo vi abbia aiutato a imparare come eseguire i test di regressione visiva in WordPress. Successivamente, potreste voler selezionare i nostri articoli sulla creazione di chat room in WordPress per i vostri utenti e sulle migliori domande di feedback per l’esperienza utente da porre ai visitatori del sito.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.