72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
# 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`](./desktop). Representative large-desktop, tablet, and mobile captures are in [`responsive`](./responsive).
|
|
|
|
## Interactive states
|
|
|
|
The paired captures in [`states`](./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
|
|
|
|
```sh
|
|
bun run test:visual
|
|
```
|
|
|
|
For diagnostic diff images:
|
|
|
|
```sh
|
|
VISUAL_WRITE_DIFFS=1 bun run test:visual
|
|
```
|
|
|
|
Generated `diff-*.png` files are ignored and are not part of the baseline.
|