Conversation
- 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
There was a problem hiding this comment.
💡 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".
| console.log('\n✅ PNG snapshots generated!'); | ||
| if (hasImagemagick) { | ||
| console.log(' (optimized with ImageMagick for smaller file sizes)'); |
There was a problem hiding this comment.
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 👍 / 👎.
Coverage Report for packages/markform
File CoverageNo changed files found. |
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
Summary
Add PNG export capability to the Fill Record visual snapshot tests, enabling automated screenshot generation for PR reviews.
Changes
fill-record-visual.tsGenerated Snapshots
The script now generates both HTML and PNG versions:
Completed Fill Record
Failed Fill Record
Partial Fill Record
Cancelled Fill Record
Usage
Test Plan
https://claude.ai/code/session_016CwhhCQfKzuuU5QfD5H7Ub