Feature Request: Visual Regression Testing for CSS implementation Changes

[gitsomebit]

Problem

Currently, changes to CSS can unintentionally introduce visual regressions that are hard to detect during code review. Since styling issues often don’t break functionality, they can slip through unnoticed until later stages or even production.

Proposed Solution

Introduce a visual regression testing setup that allows us to detect unintended UI changes when modifying CSS.

Suggested Approach

• Maintain a collection of representative HTML/CSS examples (components, layouts, edge cases).
• Render these files to images (snapshots) as part of the test process.
• Store baseline images in the repository.
• On each change, re-render and compare new images against the baseline.
• Flag differences beyond a defined threshold.

Additional Notes

Consider CI integration so checks run automatically on PRs.

[BrentFarris]

We can look into using an external tool like ImageMagick compare or Odiff.

[BrentFarris]

Took me a bit to work out a bug, but I've added the ability to take a screenshot. This should set us up for doing image comparisons:

8e21a9b and f576466

[gitsomebit]

8e21a9b and f576466

Works

I was thinking more in the direction of rendering images withour requireing to run the entire enditor, by having a set of self contained html files to render and compare against a baseline

[BrentFarris]

8e21a9b and f576466

Works

I was thinking more in the direction of rendering images withour requireing to run the entire enditor, by having a set of self contained html files to render and compare against a baseline

I agree, the button in the editor is just proving that the screenshot in the renderer is working. This opens up the ability to capture the renderer frame automatically and compare using a comparison tool.

I had to fix a bug in the composite and add add the function for getting the frame from it the renderer. That's all that was in the commits I listed.

Work still needs to be done to do the automation and comparison parts.

[BrentFarris]

The next step of this this task has been added here: c1070e0