Comparadise is a visual regression testing tool consisting of three main packages plus a shared library:
app/— Bun + React web app (tRPC backend, React Query frontend, Tailwind CSS)action/— GitHub Action that runs visual tests and uploads screenshots to S3comparadise-utils/— Cypress utilities for writing visual tests for webshared/— Constants shared across packages
Use bun exclusively. Never use npm or yarn.
This is an Nx monorepo. Run cross-package tasks with nx or bunx nx.
- Unit tests (action):
bunx nx test action - Unit tests (backend):
bunx nx test backend - Unit tests (comparadise-utils):
bunx nx test comparadise-utils - Cypress component tests (frontend):
bunx nx test frontend
Run only the tests relevant to your changes. Do not run E2E tests or start the app.
Fix lint and format issues before committing.
bun lint # ESLint (TypeScript + React rules)
bun format-check # Prettier
bun tsc # TypeScript type check- TypeScript everywhere; strict mode is on via
typescript-eslint - React components live in
app/frontend/ - Backend tRPC routes live in
app/backend/src/ - Shared constants (S3 directory names, image names, etc.) go in
shared/constants.ts - Tailwind for all styling — class ordering is enforced by
prettier-plugin-tailwindcss
The GitHub Action runs from compiled output. After changing files in action/src/, rebuild:
bunx nx build actionCommit the updated action/dist/ files — CI will fail if they are out of sync with source.
- S3 stores images under
base-images/,new-images/, andoriginal-new-images/directoriesbase-images/stores the reference images used by visual tests to compare new images againstnew-images/{commit-hash}stores the paths tobase.png,diff.png, andnew.pngthat represent regression for a visual test suite. Thediff.pngandnew.pngfiles are the diff and new images (respectively) generated by visual tests.original-images/{commit-hash}stores thenew.pngfiles corresponding to the test innew-images/that would become the new base images if visual changes are accepted. This is used only for usage of the resize-width and/or resize-height action inputs.