The button is meant to stand out more clearly. After the change, the offer card looks good on a large screen. In a narrow view, however, the wider button pushes the price out of the row. The change was small; its effect concerns an entire relationship between pieces of content.
Playwright documents screenshot comparisons against reference images and points out how the capture environment can influence them. The method provides a useful occasion for an exercise of our own. Not every pixel difference is an error, and an identical image does not yet prove a correct action. What matters is which visible expectation you want to examine with the comparison.
Write down what should change and what must stay
For our fictional card, the intention is: the button becomes easier to recognise, while the title, price and necessary note remain fully readable. This sentence contains the desired change and its limits. “Make the button better” would be much harder to judge.
Prepare three content cases: a short title, a long title and a title with an additional condition. Use the same details before and after the change. A comparison using convenient placeholder text can hide exactly the lack of space that later occurs with real content.
Also choose at least one wide and one narrow view. These widths are part of the question and not a blanket statement about all devices. A narrow case tests whether the relationship holds when there is little space.
The reference needs a controlled environment
Browser, operating system, fonts and other conditions can affect the capture. A before image from a different environment is therefore a weaker reference. Keep the relevant environment constant and document it together with the test.
A short Playwright example of our own for a prepared test page might look like this. It assumes a project that has already been set up with a suitable baseURL, and it was not run for this article:
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');
});The page and file names belong to the teaching example. The documented screenshot comparison sets a capture against the reference. The important editorial work remains the interpretation: is the difference intended, or does it push out a necessary piece of content?
A deviation is first of all an observation
Do not look at the diff image only around the button. Check the price, line breaks and the adjacent note. Perhaps the larger button is right, while the layout beside it needs more flexibility. Perhaps the supposed improvement only made sense in the wide view.
Do not reflexively raise the permitted deviation until the test is green again. That would change the question without understanding the problem. A tolerance can be justified, but it has to fit the type of differences observed.
Likewise, a new reference is a decision. An intended new state may look different. It should only become the baseline for comparison after its content has been assessed. Otherwise an unnoticed side effect is simply declared the new target image.
The appearance still needs the actual click path
An identical button can trigger the wrong action. So add a run-through to the visual check: reach it with the keyboard, trigger it, observe the expected target state. A screenshot and a behaviour test answer different questions.
If you carry out the exercise on a WordPress site of your own, a working copy in KENJTEC WordPressBuilder ai can keep the state you are changing separate from the live site. You run the Playwright comparison with your own tool outside KENJTEC. Taking changes over from the working copy is then a separate step, for which the appropriate scope has to be chosen.
The benefit of fixed comparison views does not lie in preventing change. They make visible whether the desired improvement respects its neighbours. Only expectation, observation and actual operation together produce a sound judgement about the new button.
Sources and status
Research and documentation as of 25 October 2026. Visual comparisons.
