Skip to content

feat: add PNG export to visual snapshot tests#124

Open
jlevy wants to merge 4 commits intomainfrom
claude/review-fill-record-feature-ne9qD
Open

feat: add PNG export to visual snapshot tests#124
jlevy wants to merge 4 commits intomainfrom
claude/review-fill-record-feature-ne9qD

Conversation

@jlevy
Copy link
Copy Markdown
Owner

@jlevy jlevy commented Feb 1, 2026

Summary

Add PNG export capability to the Fill Record visual snapshot tests, enabling automated screenshot generation for PR reviews.

Changes

  • Add wkhtmltoimage-based PNG generation to fill-record-visual.ts
  • Optimize PNGs with ImageMagick for smaller file sizes (~40KB each)
  • Gracefully skip PNG generation if tools not available
  • Update HTML snapshots with latest test fixture data

Generated Snapshots

The script now generates both HTML and PNG versions:

Completed Fill Record

Completed

Failed Fill Record

Failed

Partial Fill Record

Partial

Cancelled Fill Record

Cancelled

Usage

# Install dependencies (on Linux)
apt-get install wkhtmltopdf imagemagick

# Generate snapshots
npx tsx tests/visual/fill-record-visual.ts

Test Plan

  • All 1978 unit tests pass
  • TypeScript type checking passes
  • ESLint passes
  • Pre-commit hooks pass
  • PNG files generated and optimized (~40KB each)
  • Visual review of all 4 status states

https://claude.ai/code/session_016CwhhCQfKzuuU5QfD5H7Ub

- Add wkhtmltoimage-based PNG generation for visual snapshots
- Optimize PNGs with ImageMagick for smaller file sizes (~40KB each)
- PNG files can be attached to PRs for visual review
- Gracefully skip PNG generation if tools not available

Generated snapshots:
- fill-record-completed.png - Success state with all metrics
- fill-record-failed.png - Error banner with failure message
- fill-record-partial.png - Warning for max_turns
- fill-record-cancelled.png - Warning for user cancellation

https://claude.ai/code/session_016CwhhCQfKzuuU5QfD5H7Ub
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9c36c41c85

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +465 to +467
console.log('\n✅ PNG snapshots generated!');
if (hasImagemagick) {
console.log(' (optimized with ImageMagick for smaller file sizes)');
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Fail PNG generation loudly when any render fails

The PNG loop catches wkhtmltoimage/convert failures and only logs an error, but after the loop it always prints a success banner and exits normally. That means in environments where wkhtmltoimage exists but fails (e.g., missing X/Qt libs, bad HTML, or permission issues), the script still claims PNGs were generated and lists file paths even though they may not exist, which undermines automated PR screenshot expectations. Consider tracking failures and exiting non‑zero or suppressing the success message when any render fails.

Useful? React with 👍 / 👎.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 1, 2026

Coverage Report for packages/markform

Status Category Percentage Covered / Total
🔵 Lines 66.37% (🎯 60%) 5602 / 8440
🔵 Statements 66.2% (🎯 60%) 5778 / 8728
🔵 Functions 66.63% (🎯 63%) 701 / 1052
🔵 Branches 62.71% (🎯 58%) 3914 / 6241
File CoverageNo changed files found.
Generated in workflow #850 for commit 675615e by the Vitest Coverage Report Action

Address PR review feedback: track PNG generation failures and
- Only show success message if all PNGs generated
- Show partial success with warning if some failed
- Set process.exitCode = 1 on any failure
- List only successfully generated files

https://claude.ai/code/session_016CwhhCQfKzuuU5QfD5H7Ub
Comprehensive research document covering:
- HTML-to-PNG conversion tools (wkhtmltoimage, Puppeteer, Playwright)
- Visual regression testing frameworks (BackstopJS, Percy, Chromatic)
- AI vision model integration for automated visual review
- CI/CD patterns for visual testing (GitHub Actions, artifacts)
- Modern runtime compatibility (pnpm, Bun)
- Recommendations for agentic development workflows

https://claude.ai/code/session_016CwhhCQfKzuuU5QfD5H7Ub
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants