Come configurare il monitoraggio visivo automatizzato per il tuo sito web in meno di 5 minuti

Hai aggiornato un plugin, fatto il merge di una pull request o modificato un file CSS. Tutto sembrava a posto nel tuo browser. Ma hai controllato Safari? Hai controllato il mobile? Hai controllato le altre 15 pagine che potrebbero essere state influenzate?

La maggior parte dei team non lo fa — perché il controllo manuale richiede troppo tempo ed è facile da saltare sotto pressione di scadenza.

Il monitoraggio visivo automatizzato risolve il problema catturando screenshot del tuo sito web su browser e dispositivi diversi con una programmazione regolare, confrontandoli con baseline note e avvisandoti quando qualcosa cambia. E con lo strumento giusto, la configurazione richiede meno di cinque minuti.

Cosa fa realmente il monitoraggio visivo

Il monitoraggio visivo è un processo continuo e automatizzato che:

1. Cattura screenshot delle pagine selezionate sui browser e le dimensioni dispositivo scelte
2. Confronta ogni nuovo screenshot con una baseline salvata usando algoritmi di diff a livello di pixel
3. Evidenzia le differenze visive così puoi vedere esattamente cosa è cambiato
4. Ti notifica via email o Slack quando vengono rilevati cambiamenti
5. Si ripete automaticamente secondo la programmazione che definisci — giornaliera, settimanale o personalizzata

Questo intercetta i cambiamenti che sfuggono ad altre forme di testing: regressioni CSS, spostamenti di layout dovuti a modifiche dei contenuti, effetti collaterali di script di terze parti e differenze di rendering tra browser.

Step 1: Crea un account e il tuo primo progetto

Inizia registrandoti su ScanU.eu. Non è necessaria la carta di credito per il piano gratuito, che include 500 screenshot al mese — sufficienti per configurare il monitoraggio delle tue pagine più importanti.

Una volta effettuato l'accesso, crea un nuovo progetto:

• Assegnagli un nome descrittivo (ad es. "Sito aziendale" o "Cliente — Acme Store")
• Inserisci l'URL base del sito che vuoi monitorare

Questo è tutto per la configurazione del progetto. Nessun file di configurazione, nessuna installazione locale, nessuno strumento CLI da installare.

Step 2: Seleziona le tue pagine

Scegli quali pagine monitorare. Puoi inserire gli URL manualmente oppure usare la funzione di scoperta automatica delle pagine di ScanU, che legge la tua sitemap per trovare le pagine disponibili.

Concentrati sulle pagine che contano di più:

• Homepage — il tuo punto di ingresso con più traffico
• Landing page chiave — dove avviene la conversione
• Pagine prodotto o servizio — dove i clienti prendono decisioni
• Pagine di contatto o registrazione — dove i moduli devono renderizzarsi correttamente
• Pagine con navigazione complessa — dove menu e layout sono articolati

Inizia con 5-10 pagine. Puoi sempre aggiungerne altre in seguito.

Step 3: Scegli browser e dispositivi

Seleziona i browser e i dispositivi su cui vuoi testare. ScanU supporta tre motori browser:

• Chrome (Chromium) — il browser desktop e mobile più utilizzato
• Firefox — importante per il pubblico di sviluppatori e tecnici
• Safari (WebKit) — fondamentale per gli utenti iOS, dove tutti i browser utilizzano il motore WebKit

Per i dispositivi, scegli tra i preset integrati che corrispondono al tuo pubblico. Una selezione iniziale pratica:

• Mobile: iPhone 15, Samsung Galaxy S24 — copre iOS e Android
• Tablet: iPad (10a generazione) — il tablet più diffuso
• Desktop: 1920x1080 — la risoluzione standard per laptop e monitor

Questa combinazione ti offre una solida copertura cross-browser e cross-device senza consumare troppi crediti. Il piano gratuito include 10 preset dispositivi; i piani a pagamento ne offrono fino a oltre 100.

Step 4: Esegui il primo test e stabilisci le baseline

Clicca su "Run Test" per catturare i tuoi screenshot iniziali. L'infrastruttura cloud di ScanU gestisce tutto — rendering del browser, caricamento della pagina, cattura degli screenshot — in background.

In pochi minuti, la tua dashboard mostra gli screenshot catturati per ogni combinazione di pagina, browser e dispositivo. Questi primi screenshot diventano le tue baseline — il punto di riferimento per tutti i confronti futuri.

Rivedi le baseline per assicurarti che appaiano corrette. Se il tuo sito era in uno stato temporaneo (modalità manutenzione, variante di A/B test), aspetta che sia nel suo stato normale prima di stabilire le baseline.

Step 5: Configura il monitoraggio programmato

Ora configura il monitoraggio automatizzato così non devi eseguire i test manualmente:

1. Vai alla sezione Monitors del tuo progetto
2. Crea un nuovo monitor
3. Imposta la programmazione — i controlli giornalieri sono un buon default per i siti attivi; quelli settimanali vanno bene per siti più stabili
4. Seleziona il tuo fuso orario
5. Attiva il monitor

Da questo momento in poi, ScanU esegue automaticamente i test visivi secondo la programmazione definita, confronta i risultati con le tue baseline e segnala qualsiasi cambiamento visivo.

Opzionale: Configura le notifiche

Per ricevere avvisi quando vengono rilevati cambiamenti visivi, configura le notifiche:

• Le notifiche email sono disponibili su tutti i piani a pagamento e inviano riepiloghi quando i test rilevano differenze
• L'integrazione Slack ti permette di indirizzare gli avvisi a un canale specifico, così il tuo team vede gli alert di regressione visiva insieme al flusso di lavoro abituale

Per Slack, connetti il tuo workspace tramite le impostazioni Integrazioni, poi seleziona quale canale deve ricevere gli avvisi per ciascun progetto.

Cosa succede quando vengono rilevati cambiamenti

Quando un test programmato rileva differenze visive, le vedrai nella tua dashboard come diff evidenziati. Per ogni pagina modificata, ottieni:

• Lo screenshot baseline — come appariva la pagina prima
• Lo screenshot attuale — come appare adesso
• L'overlay delle differenze — un'evidenziazione visiva di cosa è cambiato esattamente, con i pixel modificati marcati in rosso
• Una percentuale di differenza — quanto della pagina è cambiato, con precisione al secondo decimale

A questo punto, decidi:

• Approva il cambiamento se era intenzionale (ad es. hai aggiornato un banner). Questo crea una nuova baseline.
• Indaga il cambiamento se era inaspettato. Verifica deploy recenti, aggiornamenti del CMS o modifiche a script di terze parti.
• Correggi la regressione se si tratta di un bug, poi esegui un nuovo test per confermare la correzione.

Consigli pratici per un monitoraggio visivo efficace

Imposta la soglia di diff in modo appropriato. ScanU permette di configurare la soglia di diff per progetto, dallo 0,1% al 10%. Per la maggior parte dei siti, il valore predefinito dell'1% funziona bene. Soglie più basse intercettano cambiamenti più sottili ma possono segnalare rumore di rendering. Soglie più alte si concentrano solo su spostamenti di layout significativi.

Inizia in piccolo e poi espandi. Comincia con le tue cinque pagine più critiche su due o tre dispositivi. Una volta che sei a tuo agio con il workflow, aggiungi più pagine e dispositivi per aumentare la copertura.

Rivedi le differenze tempestivamente. Il monitoraggio programmato è utile solo se qualcuno rivede i risultati. Configura le notifiche Slack o email per assicurarti che gli avvisi raggiungano qualcuno in grado di intervenire.

Stabilisci le baseline intenzionalmente. Quando effettui una modifica visiva pianificata (redesign, nuova campagna, branding aggiornato), esegui un test e approva le nuove baseline. Questo previene i falsi positivi nei successivi cicli di monitoraggio.

Coordina il monitoraggio con i deploy. Esegui un test di confronto prima e dopo i deploy per individuare le regressioni immediatamente. Il monitoraggio programmato è una rete di sicurezza, non un sostituto del testing pre-deploy.

Quanto costa

Il piano gratuito di ScanU offre 500 screenshot al mese, 1 progetto e 10 preset dispositivi. È sufficiente per monitorare un sito di piccole dimensioni su alcune configurazioni chiave.

Per un monitoraggio più completo, i piani a pagamento partono da 19 €/mese (Pro) con 3.000 screenshot, 5 progetti e oltre 35 preset dispositivi. Tutti i piani includono testing su Chrome, Firefox e Safari senza sovrapprezzo per browser.

Tutti i dati sono ospitati a Francoforte, in Germania, rendendo il servizio conforme al GDPR di default — una considerazione importante per i team europei e le aziende che servono clienti nell'UE.

Inizia il monitoraggio adesso

Configurare il monitoraggio visivo non richiede competenze DevOps, infrastruttura locale o un team QA dedicato. Con ScanU, puoi passare da zero al monitoraggio cross-browser automatizzato in meno di cinque minuti.

Crea il tuo account, configura il primo progetto ed esegui il primo test. Avrai screenshot baseline su diversi browser e dispositivi prima ancora che il tuo caffè si raffreddi.

Configura il monitoraggio visivo adesso →