Il pulsante dovrebbe risaltare più chiaramente. Dopo la modifica, la scheda offerta ha un bell'aspetto su uno schermo grande. In una vista stretta, però, il pulsante più largo spinge il prezzo fuori dalla riga. La modifica era piccola; il suo effetto riguarda un intero rapporto tra elementi di contenuto.
Playwright documenta i confronti di screenshot con immagini di riferimento e fa notare come l'ambiente di acquisizione possa influenzarli. Il metodo offre un'utile occasione per un nostro esercizio. Non ogni differenza di pixel è un errore, e un'immagine identica non dimostra ancora un'azione corretta. Ciò che conta è quale aspettativa visibile vuoi esaminare con il confronto.
Annota cosa deve cambiare e cosa deve restare
Per la nostra scheda fittizia, l'intenzione è: il pulsante diventa più facile da riconoscere, mentre il titolo, il prezzo e la nota necessaria restano completamente leggibili. Questa frase contiene la modifica desiderata e i suoi limiti. «Rendi migliore il pulsante» sarebbe molto più difficile da valutare.
Prepara tre casi di contenuto: un titolo breve, un titolo lungo e un titolo con una condizione aggiuntiva. Usa gli stessi dati prima e dopo la modifica. Un confronto con un comodo testo segnaposto può nascondere proprio la mancanza di spazio che si presenta più tardi con i contenuti reali.
Scegli anche almeno una vista larga e una stretta. Queste larghezze fanno parte della domanda e non sono un'affermazione generale su tutti i dispositivi. Un caso stretto verifica se il rapporto regge quando c'è poco spazio.
Il riferimento richiede un ambiente controllato
Browser, sistema operativo, font e altre condizioni possono influenzare l'acquisizione. Un'immagine «prima» proveniente da un ambiente diverso è quindi un riferimento più debole. Mantieni costante l'ambiente rilevante e documentalo insieme al test.
Un nostro breve esempio Playwright per una pagina di test preparata potrebbe essere così. Presuppone un progetto già configurato con un baseURL adatto, e non è stato eseguito per questo articolo:
import { test, expect } from '@playwright/test';
test('Offer card stays readable when narrow', async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/angebot-demo');
await expect(page).toHaveScreenshot('angebot-390.png');
});I nomi della pagina e del file appartengono all'esempio didattico. Il confronto di screenshot documentato mette un'acquisizione a confronto con il riferimento. L'importante lavoro redazionale resta l'interpretazione: la differenza è voluta, oppure spinge fuori un elemento di contenuto necessario?
Uno scostamento è prima di tutto un'osservazione
Non guardare l'immagine delle differenze solo intorno al pulsante. Controlla il prezzo, gli a capo e la nota adiacente. Forse il pulsante più grande è giusto, mentre il layout accanto ha bisogno di più flessibilità. Forse il presunto miglioramento aveva senso solo nella vista larga.
Non aumentare per riflesso lo scostamento consentito finché il test non torna verde. Questo cambierebbe la domanda senza capire il problema. Una tolleranza può essere giustificata, ma deve adattarsi al tipo di differenze osservate.
Allo stesso modo, un nuovo riferimento è una decisione. Un nuovo stato voluto può avere un aspetto diverso. Dovrebbe diventare la base di confronto solo dopo che il suo contenuto è stato valutato. Altrimenti un effetto collaterale non notato viene semplicemente dichiarato la nuova immagine di destinazione.
L'aspetto richiede comunque il percorso di clic effettivo
Un pulsante identico può attivare l'azione sbagliata. Aggiungi quindi al controllo visivo una prova pratica: raggiungilo con la tastiera, attivalo, osserva lo stato di destinazione atteso. Uno screenshot e un test di comportamento rispondono a domande diverse.
Se svolgi l'esercizio su un tuo sito WordPress, una copia di lavoro in KENJTEC WordPressBuilder ai può mantenere lo stato che stai modificando separato dal sito live. Esegui il confronto Playwright con il tuo strumento al di fuori di KENJTEC. Trasferire le modifiche dalla copia di lavoro è poi un passaggio separato, per il quale va scelto l'ambito appropriato.
Il vantaggio delle viste di confronto fisse non sta nell'impedire il cambiamento. Rendono visibile se il miglioramento desiderato rispetta gli elementi vicini. Solo aspettativa, osservazione e utilizzo effettivo insieme producono un giudizio fondato sul nuovo pulsante.
Fonti e stato
Ricerca e documentazione aggiornate al 25 ottobre 2026. Confronti visivi.
