Come eseguire facilmente il test di regressione visiva in WordPress

Mantenere il tuo sito WordPress come dovrebbe apparire può essere stressante. Un piccolo aggiornamento o una rapida modifica CSS possono rompere silenziosamente un layout e spesso non te ne accorgi finché un visitatore non te lo fa notare.

Il test di regressione visiva di WordPress risolve questo problema confrontando automaticamente l'aspetto delle tue pagine prima e dopo ogni modifica, avvisandoti nel momento in cui qualcosa cambia.

E mentre il "test di regressione visiva" suona tecnico, non hai bisogno di strumenti per sviluppatori per usarlo. È un modo semplice per risparmiare ore di controllo manuale ed evitare problemi di layout imbarazzanti.

Dopo aver testato diversi strumenti e metodi, ho trovato un'opzione affidabile che non richiede alcuna competenza di codifica o tecnica. In questa guida, ti mostrerò come eseguire test di regressione visiva sul tuo sito WordPress in cinque semplici passaggi. 🧑‍💻

Cos'è il test di regressione visiva?

Il test di regressione visiva è un modo per verificare se il design del tuo sito cambia inaspettatamente dopo un aggiornamento. Funziona confrontando istantanee prima e dopo delle tue pagine per individuare qualsiasi cosa appaia diversa.

Ogni volta che aggiorni il core di WordPress, installi un plugin, cambi un tema o modifichi il codice, c'è la possibilità che qualcosa sul front-end possa spostarsi fuori posto: un pulsante mancante, un layout interrotto o un'immagine che smette improvvisamente di caricarsi.

Il problema? Questi bug visivi spesso passano inosservati finché un visitatore non li segnala tramite un modulo di contatto o un sondaggio di feedback sul design. A quel punto, il danno all'esperienza utente del tuo sito potrebbe essere già fatto.

Ecco perché eseguire test di regressione visiva è così utile.

Il processo è semplice: scatta istantanee delle tue pagine prima e dopo un aggiornamento, quindi confrontale per individuare eventuali modifiche.

E se stai testando su un sito di staging (cosa che consiglio), puoi tranquillamente apportare aggiornamenti ed eseguire confronti per individuare problemi visivi prima che qualcosa vada online.

Inoltre, non devi eseguire questi confronti manualmente.

Con strumenti di test di regressione visiva come VRTs, Percy o BackstopJS, puoi automatizzare i confronti degli screenshot e verificare l'aspetto del tuo sito su diverse dimensioni dello schermo, aiutandoti a individuare problemi di layout su desktop, tablet e mobile.

Perché il test di regressione visiva è importante per gli utenti di WordPress?

Se stai gestendo un sito web WordPress, il test di regressione visiva è una rete di sicurezza che ti fa risparmiare tempo.

I siti WordPress sono particolarmente vulnerabili a interruzioni del layout perché sono assemblati da molte parti indipendenti: il tuo tema, il page builder, i blocchi e i plugin assumono tutti cose diverse su come vengono renderizzate le tue pagine.

Ognuno di questi può cambiare silenziosamente il modo in cui una pagina appare:

• Un aggiornamento del plugin modifica lo stile di un pulsante o di un modulo
• Un aggiornamento del core di WordPress sposta il modo in cui viene visualizzato un blocco Gutenberg
• Un aggiornamento di WooCommerce modifica il layout del prodotto o i campi del checkout
• Un aggiornamento del tema regola spaziature, font o breakpoint reattivi
• Una modifica CSS personalizzata influisce su più pagine del previsto

Il test di regressione visiva di WordPress cattura queste modifiche indesiderate prima dei tuoi visitatori. Invece di controllare ogni pagina dopo ogni aggiornamento, lo strumento confronta gli screenshot prima e dopo e segnala tutto ciò che appare diverso.

Per i proprietari di siti impegnati, questo significa tranquillità. Per le agenzie che gestiscono siti di clienti, significa individuare le regressioni prima che un cliente ti contatti in merito.

Detto questo, ti mostrerò come eseguire facilmente il test di regressione visiva in WordPress. Ecco una rapida panoramica dei passaggi che copriremo:

Passaggio 1: Installa e attiva il plugin di test di regressione visiva

Per iniziare, accedi alla dashboard del tuo sito di staging (o al tuo sito live, se preferisci).

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

Ecco come funziona: Il plugin acquisisce screenshot delle pagine selezionate. Puoi quindi attivare i confronti manualmente o pianificarli in modo che vengano eseguiti automaticamente dopo aver apportato modifiche al tuo sito, come l'aggiornamento di un plugin o la modifica del tuo tema.

Il plugin confronta quindi gli screenshot 'prima' e 'dopo' fianco a fianco ed evidenzia eventuali differenze visive.

Quindi, invece di controllare manualmente ogni pagina, ottieni un rapido report visivo che mostra cosa è cambiato e se qualcosa sembra fuori posto.

Per installare il plugin, devi prima visitare il sito web VRTs e iscriverti a un piano cliccando sul pulsante 'Inizia gratis'.

Puoi quindi scegliere uno dei piani.

Al momento della scrittura, il piano gratuito ti consente di testare fino a 3 pagine al giorno su un dominio e di pianificare test giornalieri. I piani a pagamento ti consentono di testare più pagine, eseguire test manuali ed eseguire automaticamente test di regressione visiva dopo gli aggiornamenti del core di WordPress, dei plugin e dei temi.

Fai semplicemente clic su 'Acquista ora' o 'Installa ora' sotto il piano che desideri utilizzare.

Quindi, segui le istruzioni per iscriverti a un account sul sito Web VRTs e aggiungere i tuoi dettagli di pagamento.

Una volta completata la registrazione, verrai indirizzato alla tua dashboard VRTs, dove potrai scaricare il plugin come file .zip.

Quindi, vai semplicemente alla pagina Plugin » Aggiungi Plugin e fai clic sul pulsante 'Carica Plugin'. Da qui, puoi scegliere il file .zip del plugin VRTs che hai appena scaricato.

Assicurati di attivare il plugin una volta installato. Per tutti i dettagli, puoi consultare la nostra guida su come installare un plugin WordPress.

Passaggio 2: Configura le impostazioni del plugin VRT

Una volta attivato il plugin, è ora di decidere quando verranno eseguiti i tuoi test di regressione visiva.

Vai su VRTs » Impostazioni nel tuo menu di amministrazione di WordPress.

All'interno della pagina delle impostazioni, scorri verso il basso fino alla sezione 'Trigger'. È qui che dici al plugin quando acquisire e confrontare automaticamente gli snapshot.

Ecco le opzioni disponibili:

• Esegui Test ogni 24 ore (Gratuito) – Questa è l'impostazione predefinita. VRTs controllerà automaticamente i tuoi post o pagine selezionati una volta al giorno per modifiche visive.
• Esegui Test dopo gli aggiornamenti di WordPress e dei plugin (Pro) – Ottimo per individuare problemi di layout causati dagli aggiornamenti, proprio nel momento in cui si verificano.
• Esegui Test con le tue app preferite (Pro) – Collega VRTs con strumenti o flussi di lavoro esterni utilizzando webhooks.
• Esegui test su richiesta (Pro) – Attiva manualmente i test ogni volta che ne hai bisogno, direttamente dalla tua dashboard di WordPress.

Una volta selezionato il trigger che si adatta al tuo flusso di lavoro (o alla tua licenza), fai semplicemente clic sul pulsante ‘Salva Modifiche’ in fondo alla pagina.

Passaggio 3: Aggiungi nuove pagine o post da testare

Once you’ve configured the plugin settings, it’s time to choose which pages or posts you’d like to include in your visual regression tests.

Passiamo alla scheda 'Test', dove gestirai ed eseguirai i tuoi test visivi. Da qui, puoi fare clic sul pulsante 'Aggiungi nuovo'. Questo ti permetterà di scegliere post o pagine da testare.

Nel popup che appare, scegli i post o le pagine che vuoi includere nel tuo test di regressione visiva.

Then, click ‘Add New Test’ to confirm your selections.

The VRTs plugin will take an initial snapshot of each selected page. This acts as your baseline — basically a “before” version of how your posts or pages look right now.

Dopo aver configurato il tuo test, vedrai un'istruzione per aggiornare la pagina per caricare lo snapshot iniziale. Procedi e aggiorna.

Dopo l'aggiornamento, vedrai un link allo snapshot per la pagina o il post che hai aggiunto per il test.

Vedrai anche che lo stato del test viene impostato automaticamente su 'Pianificato' per il giorno successivo. Questo perché la versione gratuita di VRT esegue i test con una pianificazione di 24 ore.

Puoi fare clic sul collegamento 'Visualizza snapshot' per controllare lo screenshot iniziale.

Si aprirà in una nuova scheda in questo modo:

Se stai usando la versione gratuita, il tuo test è ora programmato per il giorno successivo. Puoi procedere e lavorare sul tuo sito, e controllare tra 24 ore per vedere il report di confronto.

Ma se hai la versione Pro, puoi eseguire un test immediatamente per individuare i problemi subito.

Passaggio 4: Verifica le differenze visive

Una volta completato il test e rilevate modifiche visive, vedrai una notifica nella scheda VRT » Esecuzioni.

Nella schermata Esecuzioni, puoi passare il mouse sopra l'esecuzione con le modifiche rilevate.

Quindi, fai clic sul collegamento 'Mostra dettagli' quando appare.

Nella schermata successiva, vedrai un confronto affiancato della tua pagina, che mostra le versioni prima e dopo.

Il plugin evidenzia automaticamente le differenze visive, in modo da poter individuare rapidamente problemi come:

• Spostamenti di layout ed elementi disallineati: Se il tuo design cambia dopo un aggiornamento del plugin o una modifica del tema, come pulsanti che si spostano o testo che salta, VRTs lo segnalerà.
• Elementi mancanti o non funzionanti: Che si tratti di un'immagine mancante, di un pulsante CTA o di un modulo incorporato, VRTs rende facile individuare qualsiasi cosa scompaia inaspettatamente.
• Contenuti dinamici (falsi positivi): A volte, lo strumento potrebbe segnalare una modifica che non è un errore. Ciò accade spesso con slider di immagini, annunci o testimonianze in rotazione che cambiano ogni volta che la pagina viene caricata.
• Modifiche impreviste ai contenuti: Il plugin ti avviserà anche di modifiche a testo, link o immagini, in modo da poter individuare modifiche non autorizzate o errori di pubblicazione prima degli utenti.

Puoi utilizzare la maniglia di trascinamento al centro dello schermo per scorrere tra le versioni vecchia e nuova e confermare visivamente le modifiche esatte.

Se la modifica è stata intenzionale (come una riprogettazione della homepage pianificata), puoi semplicemente approvare la nuova istantanea in modo che il plugin sappia utilizzarla come nuova base di riferimento per il futuro.

Passaggio 5: Rivedi e agisci

Dopo aver eseguito un test di regressione visiva, intraprendi azioni in base ai risultati.

Una cosa da sapere prima di iniziare a rivedere gli avvisi: non ogni differenza segnalata è effettivamente un bug. A volte una pagina cambia legittimamente ad ogni visita e il test segnalerà anche tali modifiche.

Questi sono chiamati falsi positivi e sono il motivo più comune per cui i nuovi utenti si frustrano con i test di regressione visiva. Poiché lo strumento controlla essenzialmente se la Differenza Pixel > 0%, qualsiasi elemento dinamico che sposta i pixel attiverà un avviso.

Ecco i trigger di falsi positivi più comuni sui siti WordPress:

• Slider e animazioni(caroselli di immagini, animazioni hero, effetti hover)
• Dati in tempo reale(feed degli ultimi post, conteggi dei commenti, contatori di stock WooCommerce)
• Posizionamenti di annunci e trackerche caricano contenuti diversi ad ogni visita
• Banner di consenso cookie o GDPRche appaiono in modo imprevedibile
• Immagini caricate pigramenteche potrebbero o non potrebbero essere stati caricati al momento della cattura dello screenshot
• Fontche vengono renderizzati in modo leggermente diverso prima che finiscano di caricarsi

Quando vedi uno di questi elementi contrassegnati, apri la vista di confronto in VRT e usa l'opzione "nascondi elementi" per escludere quell'area dai test futuri. Dopodiché, vedrai solo modifiche di progettazione reali degne di revisione, che è esattamente ciò che desideri.

Ecco cosa puoi fare:

• Modifica manualmente la pagina: Se le modifiche sono piccole, puoi risolvere i problemi direttamente modificando la pagina, ad esempio regolando il layout, spostando elementi o ripristinando funzionalità mancanti.
• Ripristina da un backup: Se le modifiche al layout sono minori, puoi spesso annullarle ripristinando la pagina a una versione precedente. Se un aggiornamento importante ha compromesso l'intero sito, potresti dover ripristinare un backup del sito web recente. Ma ricorda che ciò ripristinerà tutti i dati del tuo sito, potenzialmente cancellando vendite o commenti recenti.

Detto questo, tieni presente che se risolvi un problema ma il test mostra ancora l'errore, assicurati di svuotare la cache di WordPress, nonché eventuali cache CDN o di hosting. In questo modo, lo strumento vedrà la versione più recente del tuo sito.

FAQ: Come eseguire il test di regressione visiva in WordPress

Se stai appena iniziando con il testing di regressione visiva, non sei solo. Ecco alcune risposte rapide alle domande comuni degli utenti e degli sviluppatori di WordPress.

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

Il test snapshot è un termine per sviluppatori che di solito si riferisce al controllo del codice nascosto dietro il tuo sito per vedere se corrisponde a una versione precedente, piuttosto che a come appare sullo schermo.

Il test di regressione visiva controlla come appare effettivamente il tuo sito all'occhio umano confrontando screenshot per individuare modifiche al layout o al design.

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

L'opzione più semplice è il plugin VRTs – Visual Regression Tests. È intuitivo per i principianti, funziona all'interno della tua dashboard e non richiede alcuna codifica. La versione gratuita funziona bene per la maggior parte degli utenti.

Come posso eseguire il test di regressione manualmente?

Il testing manuale significa fare clic sulle tue pagine importanti dopo un aggiornamento per assicurarsi che tutto sia ancora corretto. Vorrai controllare pagine come la tua homepage, la pagina dei contatti, i post del blog e qualsiasi layout personalizzato o passaggio di checkout. Funziona, ma può richiedere molto tempo.

Come si velocizza il test di regressione?

Automatizzalo. Un plugin come VRTs – Visual Regression Tests può acquisire screenshot delle tue pagine chiave e confrontarli per te, così non dovrai controllare tutto manualmente.
L'utilizzo di un sito di staging ti aiuta anche a individuare i problemi prima di aggiornare il tuo sito live.

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

Uno strumento di regressione visiva è uno dei modi più semplici per individuare le modifiche al layout dopo un aggiornamento. Aiuta anche ad anteprima gli aggiornamenti su un sito di staging prima di andare in produzione.

Assicurati di controllare come appaiono le tue pagine su desktop, tablet e mobile. Gli strumenti per sviluppatori del browser rendono facile testare rapidamente diverse dimensioni dello schermo. E infine, ottenere feedback da utenti reali o clienti può aiutarti a individuare dettagli che potresti trascurare.

Quando dovrei eseguire test di regressione visiva sul mio sito WordPress?

I momenti migliori per eseguire un test di regressione visiva sono subito prima e subito dopo qualsiasi modifica che potrebbe influire sul design del tuo sito. Ciò include aggiornamenti del core di WordPress, aggiornamenti di plugin e temi, modifiche CSS personalizzate e aggiunta di nuovi blocchi o elementi del page builder.

Se non apporti modifiche frequenti, i test giornalieri pianificati sono sufficienti per individuare problemi lenti, come un aggiornamento di un plugin che ha silenziosamente compromesso un layout che non pensavi di dover controllare.

Cosa causa falsi positivi nei test di regressione visiva?

I falsi positivi si verificano quando il test segnala una differenza che in realtà non è un bug. Le cause più comuni sui siti WordPress sono slider, animazioni, posizionamenti di annunci, banner per i cookie, immagini caricate pigramente e dati live come gli ultimi post o i contatori di stock di WooCommerce.

Nei VRT, puoi nascondere questi elementi in modo che vengano esclusi dal confronto, il che significa che i test futuri segnaleranno solo modifiche di progettazione reali.

Prossimi passi: Migliora il design del tuo sito WordPress

Spero che questo articolo ti abbia aiutato a imparare come eseguire il test di regressione visiva in WordPress. Se vuoi continuare a migliorare il tuo sito, potresti anche apprezzare:

• Guida per principianti su come ridisegnare un sito web WordPress
• Elementi chiave di design per un sito web WordPress efficace
• Come ottenere feedback sul design del sito web in WordPress
• Come migliorare l'esperienza utente in WordPress
• Domande di feedback sull'esperienza utente da porre ai visitatori del sito web

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.