Conversation
- Used LLM to get setup - Set up pnpm with Node 24+ requirement - Configure TypeScript with ES2024 and strict mode - Add ESLint with TypeScript plugin and flat config - Configure Prettier for consistent formatting - Set up Vitest with 90% coverage threshold - Add odiff-bin and commander.js dependencies - Create lib/, bin/, test/, templates/ directory structure
Initial implementation with LLM, allows scanning our paths for PNG files and organizing them.
- Mostly LLLM generated - Replace odiff-bin with pixelmatch and pngjs for reliability, it didn't work on OSX - Create PngFilePair class to load and validate matched PNG files - Implement image comparer using pixelmatch for pixel-level comparison
Mostly LLM generated, look at our comparison results and calculate the correct exit code.
Look at our results and output a nice report.
Getting closer now with a way to compare directories and put all the parts together. Also DRYed up some test data.
We don't want to die here, just mark it as mismatched.
Spaces make markdown sad, we need to escape them.
Just marking these as 100% different doesn't work very well to see what's wrong. Instead we need to call them out specifically.
The markdown was too hard to read the diffs, we need html and css to make this work. Most of this iwork was was done with LLM.
Prettier up everything, correctly configure eslint for the tests, and remove some unused variables.
Build, lint, and test on each commit.
- Mostly done with LLM - Add explicit MatchedFilePair type to replace inline object - Standardize type imports (separate import type statements)
By putting more power into the PngFilePair we can simplify a lot of other stuff. Passing the outputDir in let's us use this thing everywhere to make and build PNGs
We were doing the same work everywhere or mocking that work. Created a conslidated test helper to manage our PNGs
Keep this file up to date by destroying it every week and building it again.
Every week check if there is a new pnpm version and update our corepack reference for it.
Makeing some LLM suggested changes to the eslint configuration.
LLM suggested improvements to our typescript config to work better with Node 24+
Remove some cruft and add some needed fields
Cut down the github default.
We were already using the imports, so just updating the config to match.
Aligning some stuff with reality.
I added some markers for a11y, but also removed the accessible claim from the description because the output is very screen shot heavy and we're not summarizing the information very well.
Want to have some space before 1.0 to work out publishing and deal with any quirks of calling this directly.
Tag, create release notes, and publish. No token provided as we will configure NPM trusted publishing for this.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a complete visual regression testing CLI tool called "visual-differ" that compares PNG screenshots between baseline and candidate directories, generating HTML reports with pixel-perfect diff images. The implementation includes comprehensive test coverage, TypeScript configuration, ESLint/Prettier setup, CI/CD workflows, and automated dependency management.
Key changes:
- Complete TypeScript-based CLI tool with image comparison powered by pixelmatch
- Comprehensive test suite with 90% coverage thresholds using Vitest
- GitHub Actions workflows for CI, releases, and dependency management
Reviewed changes
Copilot reviewed 32 out of 36 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Package metadata, scripts, and dependencies for the visual-differ CLI tool |
| lib/*.ts | Core library modules for file scanning, image comparison, and report generation |
| bin/visual-differ.ts | CLI entry point with argument parsing and directory validation |
| test/**/*.ts | Comprehensive unit and integration tests with test helpers |
| templates/report.html | Handlebars template for generating HTML comparison reports |
| vitest.config.ts, tsconfig.json | Test framework and TypeScript compiler configurations |
| .github/workflows/* | CI/CD pipelines for testing, releases, and automated updates |
| README.md, CONTRIBUTING.md | User and developer documentation |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if: steps.cpr.outputs.pull-request-operation == 'created' | ||
| run: gh pr merge --merge --auto ${{ steps.cpr.outputs.pull-request-number }} | ||
| env: | ||
| GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} |
There was a problem hiding this comment.
The auto-merge step uses secrets.GITHUB_TOKEN while the PR creation uses secrets.PAT. For consistency and to ensure the auto-merge has proper permissions, this should use secrets.PAT like the PR creation step does on line 30.
Suggested change
| GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| GH_TOKEN: ${{ secrets.PAT }} |
Cleanup this mistake Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This seems like a good idea. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
From zero to hero... this is it. Lots of credit to https://warp.dev on this one, I helped.