Visual regression images on a PR

A frontend team runs this per PR that touches UI. You need PNGs of the affected components, from fixed data, so this run can be compared to a stored baseline. The comparison is done by whatever image-diff tool the team already uses.

Lerret writes the images. It does not diff them. The team already has an image-diff tool. This case only produces the PNGs that tool compares. You do not need a new regression product. You need fixed data, a fixed renderer, and a flat folder.

The job is a flat folder of PNGs from the artboards that wrap the affected components, with a fixed fixtures.json passed as --data so every run sees identical values. You compare that folder to the baseline. The values in fixtures.json stay fixed so the only thing that can move is the component.

Give Lerret those artboards and the fixtures file. export writes PNGs. Same artboards, same values, comparable images. There is no batch product, no queue, no orchestrator.

The component is any artboard wrapping the affected components. This case does not add a new file. You point export at the artboards you already have for those components.

The data is a fixed fixtures.json passed as --data so every run sees identical values. That is why --data overriding every artboard in a run is useful here. Fixtures stay put. The component is what changes. --data is never written back into .lerret/.

The images are PNGs, --flat, compared against a stored baseline set by whatever image-diff tool the team already uses.

Fixed data plus a fixed renderer makes runs comparable. Same artboard, same fonts, same values. The flag that matters is --data applied to the whole run, plus --flat so the diff tool sees one folder.

Point --data at fixtures.json and pass --flat. Every artboard in the run sees the same values. The command writes one folder of PNGs. Compare that folder to the stored baseline with whatever image-diff tool the team already uses. --data is never written back into .lerret/.

npx @lerret/cli@latest export --data fixtures.json --flat

Start a project with npx create-lerret@latest. More in the use cases index.