How to Do Visual Regression Testing with Vibium

To do visual regression testing with Vibium, capture a baseline PNG with screenshot(full_page=True), save those bytes, then on every later run capture again and diff the two images — if they differ beyond a threshold, the UI changed. Vibium's screenshot() returns raw PNG bytes rather than a file path, which makes it trivial to pipe an image into a diff library like Pillow or a hosted visual-testing service without touching disk. Because Vibium auto-waits for the page load before capturing, your baselines are complete rather than half-rendered. The core loop is simple: render the page, screenshot it, and compare against a known-good image. Visual regression catches the bugs assertions miss — a broken layout, a clipped button, a font that failed to load — all of which still pass a text() check but look wrong to a human.

What is the visual regression script?

from vibium import browser_sync as browser
 
vibe = browser.launch()
vibe.go("https://example.com")
 
png = vibe.screenshot(full_page=True)
with open("baseline.png", "wb") as f:
    f.write(png)
 
vibe.quit()

Run this once to record a baseline. It opens the page, captures the full scrolling document as PNG bytes, and writes them to baseline.png. That file becomes the reference every future run compares against.

How does each step work?

1. browser.launch() — starts Chrome over WebDriver BiDi; no driver download needed.
2. vibe.go(url) — navigates and waits for the load event so the capture is complete.
3. vibe.screenshot(full_page=True) — captures the entire scrolling page (not just the viewport) as PNG bytes. See the screenshot command reference for every option.
4. open(...).write(png) — you decide where the bytes land: a baseline file, an upload, or an in-memory buffer.
5. vibe.quit() — closes the browser and cleans up.

The key idea is that screenshot() hands you bytes, so the image flows straight into whatever diff tool you choose.

How do I compare a new run against the baseline?

Capture the current page, then diff it against the saved baseline with Pillow. If the difference exceeds your threshold, fail the test and write a diff image so a human can review what moved:

from vibium import browser_sync as browser
from PIL import Image, ImageChops
import io
 
vibe = browser.launch()
vibe.go("https://example.com")
current = Image.open(io.BytesIO(vibe.screenshot(full_page=True)))
vibe.quit()
 
baseline = Image.open("baseline.png")
diff = ImageChops.difference(baseline.convert("RGB"), current.convert("RGB"))
 
bbox = diff.getbbox()
if bbox is not None:
    diff.save("diff.png")
    raise AssertionError(f"Visual change detected in region {bbox} — see diff.png")
print("No visual change.")

ImageChops.difference() returns a per-pixel delta; getbbox() is None when the images match exactly. For real sites, allow a small tolerance rather than demanding a pixel-perfect match.

How do I make visual tests stable?

The number-one cause of flaky visual tests is content that legitimately changes between runs. Pin the viewport so layout is deterministic, and wait for a late-loading element before you capture so nothing is mid-render:

vibe = browser.launch(window_size=(1280, 800))
vibe.go("https://example.com/long-page")
 
# Wait for a late element so the page is fully rendered before capture
vibe.find("footer").text()
 
png = vibe.screenshot(full_page=True)

Other stabilizers worth adding:

• Mask dynamic regions — overlay or crop out timestamps, ads, and carousels that change every load.
• Wait for fonts and images — a flash of unstyled text produces false diffs; wait for a known element that depends on them.
• Use element screenshots — call screenshot() on a single find() result to test one component in isolation, reducing noise from unrelated changes.

How do I capture just one component?

Find the element first, then screenshot only that region. Component-level baselines produce far fewer false positives than full-page diffs because unrelated parts of the page cannot trip them:

card = vibe.find(".pricing-card")
png = card.screenshot()
with open("pricing-card.png", "wb") as f:
    f.write(png)

Why Vibium for visual regression?

Vibium gives you PNG bytes directly, real-Chrome rendering, and auto-wait on page load — the three things a visual pipeline needs. Compared with heavier frameworks, there is no driver to manage and the API is tiny, so wiring it into CI is mostly your diff logic, not setup. If you are weighing options, see Vibium vs Playwright for an honest comparison of the trade-offs.

Next steps

• The screenshot command reference
• How to take a full-page screenshot
• What is Vibium?