Knappen skal skille sig tydeligere ud. Efter ændringen ser tilbudskortet godt ud på en stor skærm. I en smal visning skubber den bredere knap dog prisen ud af rækken. Ændringen var lille; dens virkning angår et helt samspil mellem indholdselementer.
Playwright dokumenterer skærmbilledsammenligninger med referencebilleder og påpeger, hvordan optagelsesmiljøet kan påvirke dem. Metoden giver en nyttig anledning til vores egen øvelse. Ikke enhver pixelforskel er en fejl, og et identisk billede beviser endnu ikke en korrekt handling. Det afgørende er, hvilken synlig forventning du vil undersøge med sammenligningen.
Skriv ned, hvad der skal ændres, og hvad der skal forblive uændret
For vores fiktive kort er hensigten: Knappen bliver lettere at genkende, mens titel, pris og nødvendig bemærkning forbliver fuldt læsbare. Denne sætning indeholder både den ønskede ændring og dens grænser. „Gør knappen bedre“ ville være langt sværere at vurdere.
Forbered tre indholdstilfælde: en kort titel, en lang titel og en titel med en ekstra betingelse. Brug de samme oplysninger før og efter ændringen. En sammenligning med bekvem pladsholdertekst kan skjule netop den pladsmangel, der senere opstår med rigtigt indhold.
Vælg også mindst én bred og én smal visning. Disse bredder er en del af spørgsmålet og ikke en generel udtalelse om alle enheder. Et smalt tilfælde tester, om samspillet holder, når der er lidt plads.
Referencen kræver et kontrolleret miljø
Browser, styresystem, skrifttyper og andre betingelser kan påvirke optagelsen. Et førbillede fra et andet miljø er derfor en svagere reference. Hold det relevante miljø konstant, og dokumentér det sammen med testen.
Vores eget korte Playwright-eksempel til en forberedt testside kunne se sådan ud. Det forudsætter et projekt, der allerede er sat op med en passende baseURL, og det blev ikke kørt til denne artikel:
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');
});Side- og filnavnene hører til undervisningseksemplet. Den dokumenterede skærmbilledsammenligning holder en optagelse op mod referencen. Det vigtige redaktionelle arbejde er stadig fortolkningen: Er forskellen tilsigtet, eller skubber den et nødvendigt indholdselement ud?
En afvigelse er først og fremmest en observation
Se ikke kun på diff-billedet omkring knappen. Kontrollér prisen, linjeskiftene og den tilstødende bemærkning. Måske er den større knap rigtig, mens layoutet ved siden af har brug for mere fleksibilitet. Måske gav den formodede forbedring kun mening i den brede visning.
Hæv ikke refleksmæssigt den tilladte afvigelse, indtil testen er grøn igen. Det ville ændre spørgsmålet uden at forstå problemet. En tolerance kan være berettiget, men den skal passe til den type forskelle, der er observeret.
På samme måde er en ny reference en beslutning. En tilsigtet ny tilstand kan se anderledes ud. Den bør først blive sammenligningsgrundlaget, når dens indhold er vurderet. Ellers bliver en ubemærket bivirkning blot erklæret for det nye målbillede.
Udseendet kræver stadig den faktiske klikvej
En identisk knap kan udløse den forkerte handling. Tilføj derfor en gennemgang til det visuelle tjek: Nå knappen med tastaturet, udløs den, og observer den forventede måltilstand. Et skærmbillede og en adfærdstest besvarer forskellige spørgsmål.
Hvis du udfører øvelsen på dit eget WordPress-websted, kan en arbejdskopi i KENJTEC WordPressBuilder ai holde den tilstand, du ændrer, adskilt fra det live websted. Playwright-sammenligningen kører du med dit eget værktøj uden for KENJTEC. At overføre ændringer fra arbejdskopien er derefter et separat trin, hvor det passende omfang skal vælges.
Nytten af faste sammenligningsvisninger ligger ikke i at forhindre ændringer. De gør synligt, om den ønskede forbedring respekterer sine naboer. Først forventning, observation og faktisk betjening tilsammen giver en velbegrundet vurdering af den nye knap.
Kilder og status
Research og dokumentation pr. 25. oktober 2026. Visuelle sammenligninger.
