Test di regressione visiva e monitor

La Regressione Visiva confronta la tua pagina live con uno screenshot approvato in precedenza (la baseline) e segnala eventuali differenze. Punteggio 100 = nulla è cambiato. Punteggi più bassi = differenze reali rilevate.

Puoi eseguire test di regressione su richiesta, oppure configurare un monitor che li esegue automaticamente secondo una pianificazione e ti invia un'email quando qualcosa cambia.

Test di regressione una tantum

1. Admin WP → QAProof → Tests → scheda Visual Regression.
2. Inserisci l'URL della pagina.
3. Clicca su Run Test. Alla prima esecuzione per questo URL, il sistema acquisisce una baseline. A ogni esecuzione successiva, la confronta con quella baseline.

Per il monitoraggio automatizzato a lungo termine, usa invece un Monitor — fa la stessa cosa secondo una pianificazione.

Configurare un monitor

1. Admin WP → QAProof → Monitors → Add Monitor.
2. Inserisci l'URL della pagina, la pianificazione (giornaliera / settimanale / mensile), l'email di notifica e una soglia di avviso opzionale (predefinito: notifica se il punteggio scende sotto 90).
3. Clicca su Create. La prima esecuzione acquisisce la baseline. Le successive esecuzioni pianificate sono test di regressione rispetto ad essa.

Puoi eseguire un monitor su richiesta in qualsiasi momento con il pulsante Run senza attendere la pianificazione.

Cosa significa il punteggio

• 100 — nessuna differenza rilevabile. La pagina è identica alla baseline.
• 90–99 — rumore irrilevante (rendering sub-pixel, anti-aliasing). Di solito nulla su cui agire.
• 75–89 — piccole modifiche confermate (una parola aggiunta, il colore di un pulsante ritoccato).
• 50–74 — più modifiche o una regressione significativa di layout/stile.
• 25–49 — regressione importante che interessa sezioni chiave.
• <25 — pagina fondamentalmente guasta o vuota.

Come funziona il confronto

Tre segnali indipendenti determinano se la pagina è cambiata:

1. Confronto del testo del DOM — ogni stringa visibile nella baseline rispetto a quella attuale. Coglie le modifiche di solo testo che il confronto degli screenshot potrebbe non notare.
2. Confronto dei colori CSS — token di colore estratti (--primary, --accent, sfondo del pulsante, colore del link, ecc.) confrontati numericamente. Coglie le variazioni di palette.
3. Confronto dei colori dei pixel — confronto RGB a riquadri degli screenshot. Coglie tutto il resto.

Se tutti e tre i segnali non riportano alcuna modifica, il sistema restituisce il punteggio 100 senza invocare l'IA — veloce e privo del rischio di falsi positivi. Se uno qualsiasi dei segnali scatta, viene eseguita l'analisi tramite IA per interpretare la modifica e produrre un riepilogo leggibile dall'uomo.

Approvare una modifica reale

Quando riprogetti una pagina intenzionalmente, la prossima esecuzione del monitor segnalerà una regressione. È previsto — il sistema non ha modo di sapere quali modifiche intendevi apportare. Apri il risultato, verifica che le modifiche siano corrette e clicca su Approve. Questo acquisisce una nuova baseline in modo che le esecuzioni future usino il nuovo stato come riferimento.

Risultati "Capture appears unstable"

A volte vedrai un risultato di regressione con punteggio 100 e un riepilogo come "Capture appears unstable — page height differs by 60% between baseline and current" oppure "… 4 image(s) failed to load during the current capture".

Questa è una protezione deliberata. Il sistema ha rilevato che l'acquisizione attuale è essa stessa inaffidabile (un carosello JS è esploso, il CDN delle immagini ci ha limitato la frequenza, ecc.) e ha rifiutato di confrontare. Segnalare una regressione in quello stato sarebbe fuorviante — il sito sottostante non è cambiato. Riesegui il test tra 1–2 minuti; quasi sempre riesce al secondo tentativo.

Avvisi via email

Quando il risultato di un monitor scende sotto la tua soglia di avviso, il plugin invia un'email all'indirizzo che hai configurato. L'email include:

• Punteggio ed etichetta (Buono / Da Migliorare / Scarso).
• Dettaglio del punteggio (4 categorie).
• Il problema principale rilevato.
• Pulsante Download Full Report — un solo clic scarica un PDF con tutti i problemi, le raccomandazioni e gli screenshot.

Puoi disattivare gli avvisi dei monitor globalmente in Profile → Email Notifications, oppure per singolo monitor nella finestra di modifica del Monitor.

Cronologia dei risultati

Ogni monitor conserva gli ultimi 50 risultati. I risultati più vecchi vengono eliminati automaticamente. Apri un monitor in QAProof → Monitors per vedere la cronologia — i punti verdi sono esecuzioni superate, ambra/rosso sono fallimenti, e puoi approfondire qualsiasi risultato passato.

Consigli per monitor stabili

• Scegli pagine stabili. Le pagine con contenuti che ruotano frequentemente (prezzi azionari in tempo reale, feed dei social media) segnaleranno "regressioni" costanti perché il contenuto cambia davvero. Usa il mascheramento del contenuto dinamico (attivo per impostazione predefinita) per nascondere timer e rotatori, oppure scegli pagine meno volatili.
• Usa la pianificazione settimanale per i siti a basso traffico. L'attivazione di WP-Cron su installazioni WordPress a basso traffico può essere inaffidabile. Configura un cron job a livello di server che richiama wp-cron.php, oppure usa una pianificazione settimanale, che è più tollerante.
• Riacquisisci le baseline dopo i deploy. Se rilasci modifiche visive, clicca su Approve sul prossimo risultato di regressione per aggiornare la baseline. Altrimenti ogni esecuzione futura continuerà a segnalare la stessa modifica intenzionale.