Documentazione di QA Proof

Tutto ciò di cui hai bisogno per installare QA Proof sul tuo sito, eseguire il primo test e leggere i risultati. Il percorso più rapido è il plugin WordPress — la maggior parte degli utenti non ha mai bisogno di toccare direttamente l'API.

Cos'è QA Proof?

QA Proof è un servizio ospitato che utilizza l'IA per controllare il tuo sito web dal vivo alla ricerca di problemi visivi, di layout e di accessibilità. Puoi eseguire test su richiesta o pianificare un monitor che controlla le pagine in modo ricorrente e ti invia un'e-mail quando qualcosa cambia.

Il plugin WordPress ti consente di gestire tutto dal tuo pannello WP: eseguire test, visualizzare screenshot affiancati, pianificare monitor e scaricare report in PDF.

Avvio rapido

Tre passaggi per il tuo primo test:

1. Registrati e scegli un piano

Crea un account su qaproof.io/signup. Il piano Gratuito ti offre 10 generazioni IA come prova a vita una tantum e 1 monitor — abbastanza per valutare il prodotto. Una volta utilizzate tutte e 10, devi passare a un piano superiore.

2. Ottieni la tua chiave API

Apri qaproof.io/app/api-keys e copia la chiave mostrata lì. Ha un aspetto simile a qap_live_sk_…. Trattala come una password — chiunque possieda questa chiave può eseguire test sulla quota del tuo account.

3. Installa il plugin WordPress

Scarica il plugin, caricalo tramite Plugin → Aggiungi nuovo → Carica plugin nel tuo pannello WP, quindi attivalo. Apri QAProof → Impostazioni, incolla la tua chiave API nel campo Configurazione API e clicca su Salva modifiche. La scheda sotto il campo mostrerà l'e-mail del tuo account, il piano e l'utilizzo delle generazioni IA — questo è il segnale che la connessione funziona.

Da qui puoi eseguire un test singolo (sotto) o configurare un monitor ricorrente (sotto).

Plugin: Installa e connetti

1. Carica il file .zip di QAProof tramite Plugin → Aggiungi nuovo → Carica plugin, quindi clicca su Attiva. Un nuovo menu QAProof appare nella barra laterale di WP.
2. Apri QAProof → Impostazioni, incolla la tua chiave API e clicca su Salva modifiche.
3. Clicca su Verifica connessione — dovresti vedere "Connesso! Stato API: ok".

Plugin: Esegui un test

Apri QAProof → Test, quindi:

1. Scegli un tipo di test — Fedeltà del Design, Responsive, Regressione Visiva, Accessibilità o Audit del Design. Vedi Tipi di Test per sapere cosa controlla ciascuno.
2. Inserisci l'URL della pagina che desideri controllare.
3. Per la Fedeltà del Design, incolla anche un URL di Figma o carica un'immagine.
4. Clicca su Esegui test. Tempo totale di esecuzione: 30–90 secondi.

Al termine vedrai il punteggio, un riepilogo, tutti i problemi rilevati con etichette di gravità e una vista affiancata degli screenshot. Ogni risultato viene salvato automaticamente nella Cronologia dei Test.

Plugin: Configura un monitor

Un monitor esegue un test di Regressione Visiva rispetto a una baseline salvata secondo una pianificazione (giornaliera, settimanale o mensile) e ti invia un'e-mail se la pagina diverge.

1. Apri QAProof → Monitor → clicca su Aggiungi monitor.
2. Inserisci l'URL della pagina, la pianificazione e l'e-mail di notifica.
3. Clicca su Crea — il plugin acquisisce il primo screenshot come baseline.
4. Da ora in poi ogni esecuzione pianificata confronta la pagina dal vivo con quella baseline. Se il punteggio scende al di sotto della tua soglia, ricevi un'e-mail con un pulsante Scarica report completo.

Plugin: Cronologia dei test e report in PDF

Ogni test che esegui — manuale o pianificato — viene salvato in QAProof → Test → Cronologia dei Test. Da lì puoi:

• Riaprire un risultato e ispezionare gli screenshot, le differenze e le raccomandazioni.
• Scaricare un report in PDF con l'analisi completa — lo stesso formato del file collegato nelle e-mail di notifica.

Fedeltà del Design

Confronta la tua pagina dal vivo con un design Figma (o un'immagine caricata) e segnala dove l'implementazione si è discostata dal design. Restituisce un punteggio da 0 a 100 e suddivide lo scarto in Layout, Colori, Tipografia, Spaziatura e Componenti.

Usalo quando: uno sviluppatore ha appena pubblicato una nuova pagina e vuoi confermare che corrisponda al design approvato prima di annunciare il lancio.

Responsive

Acquisisce la stessa pagina a tre viewport — desktop (1440×900), tablet (768×1024) e mobile (375×812) — e segnala i problemi di layout specifici di ciascuno, come lo scorrimento orizzontale su mobile, testo sovrapposto o CTA nascoste.

Usalo quando: hai apportato modifiche al CSS o al layout e vuoi una rapida verifica del fatto che mobile/tablet funzionino ancora.

Regressione Visiva

Confronta la pagina attuale con uno screenshot precedentemente approvato (la baseline) e segnala eventuali differenze di pixel/testo/stile. Punteggio 100 = nulla è cambiato; punteggi più bassi = differenze reali rilevate.

Utilizzato sia come test singolo sia come motore dietro i monitor.

Usalo quando: vuoi individuare modifiche involontarie — un deploy che ha accidentalmente rotto una sezione, un aggiornamento del CMS che ha alterato la home page o immagini mancanti.

Accessibilità

Effettua l'audit della tua pagina rispetto alle WCAG 2.1 (livello configurabile: A, AA o AAA). Segnala barriere reali: contrasto cromatico insufficiente, testo alternativo mancante, gerarchia dei titoli interrotta, target di tocco troppo piccoli, etichette dei moduli mancanti, indicatori di focus che scompaiono al passaggio del mouse, ecc.

Usalo quando: devi verificare l'accessibilità prima della pubblicazione o segnalare la conformità a uno stakeholder.

Audit del Design

Ispeziona il tuo design system a livello di pagina: quanti colori, font, stili di pulsante e valori di spaziatura distinti vengono effettivamente utilizzati. Identifica colori quasi duplicati, valori scritti a mano nel codice che dovrebbero essere variabili CSS e componenti incoerenti. Genera un Design Debt Score.

Usalo quando: la tua base di codice è cresciuta in modo organico e vuoi una lettura quantificata della deriva del design system.

Piani e limiti

I piani a pagamento (Pro / Business / Scale) hanno limiti mensili di generazioni IA che si azzerano a ogni ciclo di fatturazione. Il piano Gratuito è una prova a vita una tantum — 10 generazioni in totale, mai azzerate. Vedi Prezzi per i dettagli completi su ciò che include ogni piano.

Risoluzione dei problemi: "Acquisizione della baseline fallita"

Se la creazione della baseline fallisce, alcune immagini della tua pagina non si sono caricate durante lo screenshot. Questo accade di solito quando il sito limita temporaneamente le nostre richieste. Attendi 1–2 minuti e riprova.

Risoluzione dei problemi: "L'acquisizione appare instabile"

Se vedi un punteggio di 100 con il messaggio "L'acquisizione appare instabile", significa che la pagina ha elementi dinamici (come caroselli di immagini o animazioni) che sono stati visualizzati in modo diverso tra le acquisizioni. Riesegui semplicemente il test — di solito funziona al secondo tentativo.

Risoluzione dei problemi: "Hai raggiunto il limite della tua prova gratuita"

Gli utenti del piano Gratuito vedono questo messaggio una volta utilizzate le 10 generazioni della prova a vita. Il piano Gratuito non si azzera mensilmente — passa a un piano superiore in Fatturazione per continuare a eseguire test. I piani a pagamento non vengono bloccati — l'eccedenza viene fatturata a fine periodo.

Risoluzione dei problemi: il plugin WP mostra il piano errato

Se il piano mostrato nel plugin non corrisponde a quello che vedi su qaproof.io, è probabile che la chiave API nel plugin appartenga a un account diverso da quello con cui hai effettuato l'accesso sul sito. Ricontrolla l'indirizzo e-mail mostrato sotto il campo Chiave API nel plugin — quello è l'account a cui appartiene la chiave.

Hai bisogno di aiuto?

• Sfoglia il Centro Assistenza per guide passo passo con screenshot.
• Invia un'e-mail a support@qaproof.io — i piani a pagamento ricevono una risposta prioritaria.