53 lines
3.1 KiB
Markdown
53 lines
3.1 KiB
Markdown
|
# Design QA
|
||
|
|
|
||
|
|
- source visual truth path: `C:\Users\19926\AppData\Local\Temp\codex-clipboard-22a7b04e-194a-47ee-9fef-f98b31a70009.png`
|
||
|
|
- implementation URL: `http://localhost:3100/`
|
||
|
|
- implementation screenshot path: pending browser-capture permission
|
||
|
|
- intended viewport: 3120 x 1810 CSS px, deviceScaleFactor 1
|
||
|
|
- source pixels: 3120 x 1810
|
||
|
|
- implementation pixels: pending
|
||
|
|
- density normalization: pending
|
||
|
|
- state: independent family customer portal, existing browser login session if available
|
||
|
|
|
||
|
|
**Full-view comparison evidence**
|
||
|
|
|
||
|
|
- The source visual was opened at original resolution and used to define the target shell: fixed white header, light-gray sidebar, white content cards, compact enterprise spacing, blue-purple primary color, restrained borders and shadows.
|
||
|
|
- The customer implementation now uses a fixed Ant Design header/sidebar and a family-only information architecture. Operations menus, platform process cards, dependency checks, build version and milestone content are not present in the served bundle.
|
||
|
|
- The implementation is compiled and served successfully, but a browser-rendered screenshot has not yet been captured. A code-only comparison is not sufficient for visual approval.
|
||
|
|
|
||
|
|
**Focused region comparison evidence**
|
||
|
|
|
||
|
|
- Pending browser evidence for the customer header/sidebar, family dashboard, business forms, tables, empty states, authenticated profile and responsive layout.
|
||
|
|
|
||
|
|
**Findings**
|
||
|
|
|
||
|
|
- [P1] Browser-rendered comparison evidence is missing.
|
||
|
|
Location: full implementation at `http://localhost:3100/`.
|
||
|
|
Evidence: the source image is available, but no implementation screenshot has been captured at the matching viewport.
|
||
|
|
Impact: typography, spacing, overflow, border radii, and above-the-fold density cannot be visually verified.
|
||
|
|
Fix: capture the implementation in the user's chosen local browser at 3120 x 1810, combine it with the source image, compare visible differences, fix any P0/P1/P2 issues, and recapture.
|
||
|
|
|
||
|
|
**Open Questions**
|
||
|
|
|
||
|
|
- Permission is required before using Playwright directly for the local screenshot capture.
|
||
|
|
|
||
|
|
**Implementation Checklist**
|
||
|
|
|
||
|
|
- Capture the implementation at the matching desktop viewport and state.
|
||
|
|
- Compare the source and implementation in one combined visual input.
|
||
|
|
- Verify typography, layout rhythm, color tokens, icon fidelity, and app-specific copy.
|
||
|
|
- Test sidebar navigation, refresh, login CTA, and the main workspace controls.
|
||
|
|
- Check browser console errors and horizontal overflow.
|
||
|
|
- Apply and re-capture any P0/P1/P2 fixes.
|
||
|
|
|
||
|
|
**Follow-up Polish**
|
||
|
|
|
||
|
|
- Evaluate whether the production bundle should be code-split after visual QA; this is a performance refinement and does not block the current style redesign.
|
||
|
|
|
||
|
|
**Comparison History**
|
||
|
|
|
||
|
|
- Iteration 0: combined SaaS console build and HTTP smoke test passed; visual comparison blocked because browser capture has not been authorized.
|
||
|
|
- Iteration 1: family customer portal built and served at port 3100; production bundle contains the customer brand and excludes the operations menu labels; TypeScript/Vite build, Docker rebuild, HTTP 200 and API dependency readiness passed. Visual comparison remains blocked pending browser-capture authorization.
|
||
|
|
|
||
|
|
final result: blocked
|