Knappen ska synas tydligare. Efter ändringen ser erbjudandekortet bra ut på en stor skärm. I en smal vy trycker dock den bredare knappen ut priset ur raden. Ändringen var liten; dess effekt gäller ett helt förhållande mellan innehållsdelar.
Playwright dokumenterar skärmbildsjämförelser mot referensbilder och påpekar hur miljön där bilden tas kan påverka dem. Metoden ger ett användbart tillfälle till en egen övning. Inte varje pixelskillnad är ett fel, och en identisk bild bevisar ännu inte en korrekt åtgärd. Det avgörande är vilken synlig förväntan du vill granska med jämförelsen.
Skriv ner vad som ska ändras och vad som måste bestå
För vårt fiktiva kort är avsikten: knappen blir lättare att känna igen, medan titeln, priset och den nödvändiga anmärkningen förblir fullt läsbara. Den här meningen innehåller både den önskade ändringen och dess gränser. ”Gör knappen bättre” vore mycket svårare att bedöma.
Förbered tre innehållsfall: en kort titel, en lång titel och en titel med ett extra villkor. Använd samma uppgifter före och efter ändringen. En jämförelse med bekväm platshållartext kan dölja just den platsbrist som senare uppstår med verkligt innehåll.
Välj också minst en bred och en smal vy. Dessa bredder är en del av frågan och inget generellt påstående om alla enheter. Ett smalt fall prövar om förhållandet håller när det finns lite utrymme.
Referensen behöver en kontrollerad miljö
Webbläsare, operativsystem, typsnitt och andra förutsättningar kan påverka bilden. En före-bild från en annan miljö är därför en svagare referens. Håll den relevanta miljön konstant och dokumentera den tillsammans med testet.
Ett kort eget Playwright-exempel för en förberedd testsida kan se ut så här. Det förutsätter ett projekt som redan har konfigurerats med en lämplig baseURL, och det har inte körts för den här artikeln:
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');
});Sid- och filnamnen hör till undervisningsexemplet. Den dokumenterade skärmbildsjämförelsen ställer en bild mot referensen. Det viktiga redaktionella arbetet är fortfarande tolkningen: är skillnaden avsiktlig, eller trycker den undan en nödvändig del av innehållet?
En avvikelse är först och främst en observation
Titta inte på diffbilden bara runt knappen. Kontrollera priset, radbrytningarna och den intilliggande anmärkningen. Kanske är den större knappen rätt, medan layouten bredvid behöver mer flexibilitet. Kanske var den förmodade förbättringen bara meningsfull i den breda vyn.
Höj inte reflexmässigt den tillåtna avvikelsen tills testet är grönt igen. Det skulle ändra frågan utan att problemet förstås. En tolerans kan vara motiverad, men den måste passa den typ av skillnader som observerats.
På samma sätt är en ny referens ett beslut. Ett avsiktligt nytt tillstånd kan se annorlunda ut. Det bör bli jämförelsegrund först efter att dess innehåll har bedömts. Annars förklaras en obemärkt bieffekt helt enkelt som den nya målbilden.
Utseendet behöver fortfarande den faktiska klickvägen
En identisk knapp kan utlösa fel åtgärd. Komplettera därför den visuella kontrollen med en genomgång: nå knappen med tangentbordet, aktivera den, observera det förväntade måltillståndet. En skärmbild och ett beteendetest besvarar olika frågor.
Om du genomför övningen på en egen WordPress-webbplats kan en arbetskopia i KENJTEC WordPressBuilder ai hålla det tillstånd du ändrar åtskilt från den publicerade webbplatsen. Playwright-jämförelsen kör du med ditt eget verktyg utanför KENJTEC. Att föra över ändringar från arbetskopian är sedan ett separat steg, där lämplig omfattning måste väljas.
Nyttan med fasta jämförelsevyer ligger inte i att förhindra förändring. De synliggör om den önskade förbättringen respekterar sina grannar. Först förväntan, observation och faktisk användning tillsammans ger en välgrundad bedömning av den nya knappen.
Källor och status
Research och dokumentation per den 25 oktober 2026. Visuella jämförelser.
