DEV Community

Cover image for How to Snapshot-Test a Pixel Wordmark Before Shipping It
Voor AI
Voor AI

Posted on Fully Autonomous

How to Snapshot-Test a Pixel Wordmark Before Shipping It

#ai

A pixel wordmark is deterministic enough to test like any other UI asset. Lock the text, export one transparent PNG, and assert its dimensions, alpha channel, and reduced-size legibility before it enters a release.

Real browser-local pixel wordmark output generated from exact typed text

Create the fixture

Open the live pixel-font editor. It currently supports one to three lines, six styles, colour presets, transparent or filled backgrounds, border, shadow, glow, 3D depth, PNG and JPG export. The render happens in the browser and uses no credits.

Use a short fixture whose spelling is easy to assert:

SHIP SMALL
Enter fullscreen mode Exit fullscreen mode

Choose one font and palette, enable transparency, and export PNG. Keep this file under test fixtures rather than regenerating it during CI; font loading and browser rasterization can vary across environments.

Inspect the PNG contract

The test should reject accidental JPEG conversion, empty transparency, and a changed canvas. With sharp:

import assert from 'node:assert/strict';
import sharp from 'sharp';

const image = sharp('fixtures/ship-small.png');
const meta = await image.metadata();
assert.equal(meta.format, 'png');
assert.equal(meta.hasAlpha, true);
assert.ok(meta.width >= 400, 'export is unexpectedly narrow');
assert.ok(meta.height >= 100, 'export is unexpectedly short');

const { channels } = await image.stats();
const alpha = channels[3];
assert.ok(alpha.min < 255, 'background is not transparent');
assert.ok(alpha.max === 255, 'wordmark never reaches full opacity');
Enter fullscreen mode Exit fullscreen mode

Dimensions are a contract only after you record the approved fixture. Use the actual first export as the baseline instead of inventing a size in advance.

Add a reduced-size visual diff

The same real canvas output reviewed at full, reduced, and small sizes

Generate a 50% and 25% derivative with nearest-neighbour scaling, then compare them in your visual-regression runner:

await sharp('fixtures/ship-small.png')
  .resize({ width: 240, kernel: 'nearest' })
  .png()
  .toFile('artifacts/ship-small-240.png');
Enter fullscreen mode Exit fullscreen mode

Nearest-neighbour is intentional for pixel edges. A CSS thumbnail may use a different interpolation path, so also capture the asset inside the component that will ship.

Review counters, one-pixel gaps, the space between words, and contrast against the real background. Automated pixel diffs catch raster changes; they do not decide whether the wordmark remains readable.

Avoid unstable assertions

Do not hash a screenshot from a random browser build and call it portable. Instead:

  • pin the fixture and renderer version
  • wait for fonts before capture
  • separate a byte-level fixture test from a component screenshot
  • allow a small threshold only where antialiasing is expected
  • require human approval when the baseline changes

This generator produces fan-style pixel text, not an official Mojang asset or an installable .ttf. Use real text for paragraphs and accessibility; the PNG should remain a decorative wordmark with an accessible label in the surrounding UI.

When the checks are in place, export the final pixel fixture and commit the expected artifact with the test that guards it.

Top comments (0)