Een nieuwe knop kan de hele lay-out veranderen: hoe vaste vergelijkingsweergaven helpen

De knop moet duidelijker opvallen. Na de wijziging ziet de aanbiedingskaart er op een groot scherm goed uit. In een smalle weergave duwt de bredere knop de prijs echter uit de rij. De wijziging was klein; het effect ervan betreft een hele verhouding tussen inhoudselementen.

Playwright documenteert screenshotvergelijkingen met referentieafbeeldingen en wijst erop hoe de opnameomgeving die kan beïnvloeden. De methode biedt een nuttige aanleiding voor een eigen oefening. Niet elk pixelverschil is een fout, en een identieke afbeelding bewijst nog geen correcte actie. Waar het om gaat, is welke zichtbare verwachting je met de vergelijking wilt onderzoeken.

Schrijf op wat moet veranderen en wat moet blijven

Voor onze fictieve kaart luidt de bedoeling: de knop wordt beter herkenbaar, terwijl de titel, de prijs en de noodzakelijke opmerking volledig leesbaar blijven. Deze zin bevat de gewenste wijziging en de grenzen ervan. ‘Maak de knop beter’ zou veel moeilijker te beoordelen zijn.

Bereid drie inhoudsgevallen voor: een korte titel, een lange titel en een titel met een extra voorwaarde. Gebruik vóór en na de wijziging dezelfde gegevens. Een vergelijking met handige opvultekst kan juist het ruimtegebrek verbergen dat later bij echte inhoud optreedt.

Kies ook minstens één brede en één smalle weergave. Deze breedtes maken deel uit van de vraag en zijn geen algemene uitspraak over alle apparaten. Een smal geval test of de verhouding standhoudt wanneer er weinig ruimte is.

De referentie heeft een gecontroleerde omgeving nodig

Browser, besturingssysteem, lettertypen en andere omstandigheden kunnen de opname beïnvloeden. Een vóór-afbeelding uit een andere omgeving is daarom een zwakkere referentie. Houd de relevante omgeving constant en documenteer die samen met de test.

Een kort eigen Playwright-voorbeeld voor een voorbereide testpagina zou er zo uit kunnen zien. Het gaat uit van een project dat al is ingericht met een geschikte baseURL, en het is voor dit artikel niet uitgevoerd:

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');
});

De pagina- en bestandsnamen horen bij het lesvoorbeeld. De gedocumenteerde screenshotvergelijking zet een opname af tegen de referentie. Het belangrijke redactionele werk blijft de interpretatie: is het verschil bedoeld, of drukt het een noodzakelijk inhoudselement weg?

Een afwijking is in de eerste plaats een waarneming

Bekijk de diff-afbeelding niet alleen rond de knop. Controleer de prijs, de regeleinden en de aangrenzende opmerking. Misschien is de grotere knop juist, terwijl de lay-out ernaast meer flexibiliteit nodig heeft. Misschien was de vermeende verbetering alleen zinvol in de brede weergave.

Verhoog de toegestane afwijking niet reflexmatig totdat de test weer groen is. Daarmee zou je de vraag veranderen zonder het probleem te begrijpen. Een tolerantie kan gerechtvaardigd zijn, maar ze moet passen bij het soort waargenomen verschillen.

Evenzo is een nieuwe referentie een beslissing. Een bedoelde nieuwe toestand mag er anders uitzien. Die mag pas de basis voor vergelijking worden nadat de inhoud ervan is beoordeeld. Anders wordt een onopgemerkt neveneffect eenvoudigweg tot nieuwe doelafbeelding verklaard.

Het uiterlijk heeft nog steeds het daadwerkelijke klikpad nodig

Een identieke knop kan de verkeerde actie activeren. Vul de visuele controle daarom aan met een doorloop: bereik de knop met het toetsenbord, activeer hem, observeer de verwachte doeltoestand. Een screenshot en een gedragstest beantwoorden verschillende vragen.

Als je de oefening op een eigen WordPress-site uitvoert, kan een werkkopie in KENJTEC WordPressBuilder ai de toestand die je wijzigt gescheiden houden van de live site. De Playwright-vergelijking voer je met je eigen tool buiten KENJTEC uit. Het overnemen van wijzigingen uit de werkkopie is dan een aparte stap, waarvoor de passende reikwijdte moet worden gekozen.

Het nut van vaste vergelijkingsweergaven ligt niet in het voorkomen van verandering. Ze maken zichtbaar of de gewenste verbetering haar buren respecteert. Alleen verwachting, waarneming en daadwerkelijke bediening samen leveren een gefundeerd oordeel over de nieuwe knop op.

Bronnen en stand van zaken

Onderzoek en documentatie: stand van 25 oktober 2026. Visuele vergelijkingen.