verify-email-snapshots_skill

Overview

This skill snapshot-tests email templates using Verify to catch rendering regressions. It validates rendered HTML against an approved baseline and supports MJML templates or any renderer that returns HTML. The workflow creates .verified.html baselines, shows visual diffs on changes, and integrates with CI to prevent accidental acceptance.

How this skill works

Render each template variant with a test renderer and capture the resulting HTML. Verify compares the received HTML to the stored .verified.html baseline and fails the test when they differ. Use scrubbers to remove or normalize dynamic values (timestamps, tokens, GUIDs) and tools like verify.review or a browser to inspect diffs.

When to use it

• When you need to detect visual regressions in email templates during development
• When validating MJML templates compile to the expected HTML output
• During code review to produce clear visual diffs for template changes
• When verifying variable substitution and template variants render correctly
• In CI to block unintended or unreviewed baseline changes

Best practices

• Test every template variant with realistic sample data to catch layout regressions
• Scrub dynamic values consistently (.ScrubLinesContaining, .AddScrubber, .ScrubInlineGuids)
• Use descriptive test names and method naming to map tests to template files
• Run verify review or open .received.html in a browser before accepting changes
• Fail CI on missing baselines with VerifierSettings.ThrowOnMissingVerifiedFile()

Example use cases

• Snapshot the signup invitation template to ensure link layout and preview text remain stable
• Validate password reset and receipt templates across variants and locales
• Compose full email objects (subject, recipients, HTML body) and snapshot the combined result
• Use scrubbers to normalize timestamps and tokens when testing emails generated in CI
• Add snapshot tests for MJML templates to catch regression after styling or structure changes