Most WordPress breakages aren’t errors. Nothing throws. A plugin update changes a CSS rule, a theme setting nudges a margin, and the footer on the contact page quietly slides over the form. Functional tests pass. Nobody notices until a client does.
How visual regression testing works
Take screenshots of important pages before a change, take them again after, and compare the two pixel by pixel. Anything that moved gets highlighted for a person to review.
- Capture a baseline of key templates at desktop, tablet and phone widths.
- Make the change: plugin updates, theme edits, a new block.
- Capture again and compare against the baseline.
- Approve the changes you expected and flag the rest.
Making it reliable
- Hide moving parts before capturing: sliders, dates, cookie banners and chat widgets.
- Wait for web fonts and lazy-loaded images to finish loading.
- Allow a small tolerance so font smoothing doesn’t flag every page.
- Test templates, not every URL: one product page, one archive, one form.
// Playwright: compare a page against its saved baseline
await page.goto('https://staging.example.com/contact/');
await page.addStyleTag({ content: '.cookie-banner, .chat-widget { display: none !important; }' });
await expect(page).toHaveScreenshot('contact.png', { fullPage: true, maxDiffPixelRatio: 0.01 });Where it fits
Run it on staging before and after every round of plugin updates, and before every launch. It turns “I clicked around and it looked fine” into evidence.
I built an in-house tool, Vizory, for exactly this: baselines, highlighted differences and a review dashboard across many WordPress sites.
