| .. | ||
| desktop | ||
| responsive | ||
| states | ||
| README.md | ||
Visual parity evidence
The existing Cefense frontend is the visual source of truth. These images compare it with the React port using the same browser, viewport, device-pixel ratio, route, data, and interaction state.
Route matrix
Every route below was compared at 1440x900, 1920x1080, 834x1112, and 390x844:
| Page | Route |
|---|---|
| Home | / |
| Product | /product |
| Docs | /docs |
| Pricing | /pricing |
| Company | /company |
| Threat library | /threats |
| Login | /login |
| Feed | /app/feed |
| Immunity | /app/reports |
| Repositories | /app/repositories |
| Containers | /app/containers |
| Clouds | /app/clouds |
| Domains | /app/domains |
| Pentests | /app/pentests |
| Code audit | /app/code-audit |
| Integrations | /app/integrations |
| Library | /app/library |
| Autofix | /app/autofix |
The complete 1440x900 source/port set is in desktop. Representative large-desktop, tablet, and mobile captures are in responsive.
Interactive states
The paired captures in states cover:
- native login validation
- public navigation hover
- repository selector open
- finding detail view
- Fix and Proof workflow stages
- workspace settings
- repository URL validation error
- Immunity search empty state
- Immunity threat detail and return flow
- Immunity A-Z letter navigation
- mobile navigation drawer
In addition to the captured states, browser automation verified browser back/forward, direct route loads, refreshes, the Matched workflow stage, keyboard stage selection, populated backend data, React Query refetching, and a clean console on representative routes.
Results
- Text, DOM geometry, document dimensions, element counts, and overflow behavior matched on all 18 routes at all four viewports.
- At 1440x900 against the production frontend build, 17 of 18 route pairs were pixel-identical.
- The Immunity route differed by 1,567 of 1,296,000 pixels (
0.121%) from browser text antialiasing/compositing; its geometry and content were identical. - At mobile size, all 18 route pairs were pixel-identical.
- Important interaction states were equal or within the same sub-pixel text-rendering tolerance.
The default tolerance is 0.003 (0.3%). This is intentionally above the highest measured transient antialiasing/compositing variance (0.258%) and well below a visible layout, color, spacing, or content regression.
Run the check
bun run test:visual
For diagnostic diff images:
VISUAL_WRITE_DIFFS=1 bun run test:visual
Generated diff-*.png files are ignored and are not part of the baseline.