Created detailed documentation for UX testing infrastructure that can be replicated across all ByteLyst products:
- Complete Playwright setup instructions
- Test suite structure and patterns
- Test runner script with server lifecycle management
- AI-friendly report generation
- Common platform UI integration
- Design token usage patterns
- Cipher design system integration
- Step-by-step implementation guide
- Troubleshooting and best practices
- CI integration examples
This guide enables other products to follow the exact same steps for UX testing
using common platform packages, design tokens, and Cipher design system principles.
- Added color scheme (RED, GREEN, YELLOW, BLUE, PURPLE, CYAN, BOLD)
- Added emojis throughout for visual clarity
- Improved header formatting with decorative borders
- Enhanced test results display with colored output
- Added visual indicators for all status messages
- Made summary section more user-friendly and visually rich
- Script now outputs easy-to-understand visual summary
The extra -- was causing Vite flags to not be passed correctly
Vite was not receiving --port and --strict-port properly
Now flags are passed directly: pnpm dev --port 3050 --strict-port
Vite was detecting port conflicts and switching to different ports
Added --strict-port flag to force Vite to use exactly port 3050
This works with kill_port() function to ensure port is available
- Added kill_port() function to kill processes on specified port
- Added wait_for_server() function to wait for server to be ready
- Script now kills any existing server on port 3050 before starting
- Starts fresh dev server in background with logging
- Waits for server to be ready before running tests
- Automatically kills server after tests complete
- Added server log to report files for debugging
- Health check now reports healthy since server is managed by script
- Fixed run-e2e.sh to use numeric 0 instead of 'unknown' for test counts
- This resolves JSON parsing error when tests don't run
- Disabled webServer in playwright.config.ts due to Vite -p flag issue
- Tests now require manually starting dev server: cd web && pnpm dev -- --port 3050
- Updated comments in config with instructions for running tests
Fixed PROJECT_ROOT path calculation from ../ to ../..
Script is in scripts/tests/, so need to go up two levels to reach project root
WEB_DIR is now correctly set to project root/web
- Updated scripts/tests/run-e2e.sh to generate comprehensive reports
- Added JSON reports for AI parsing with actionable recommendations
- Added markdown reports for human readability
- Created summary JSON with for_ai_agents section for automated action
- Added timestamped reports with symlinks to latest
- Added health check status to reports
- Created scripts/tests/reports/README.md with usage documentation
- Reports include: test results, failure analysis, next actions, file paths
- Created e2e/alert-positioning.spec.ts for critical alerts positioning tests
- Created e2e/assistant-positioning.spec.ts for assistant widget positioning tests
- Created e2e/destructive-actions.spec.ts for destructive actions confirmation tests
- Created e2e/feedback.spec.ts for save/delete/update feedback tests
- Created e2e/page-states.spec.ts for loading/empty/error/success states tests
- Created e2e/form-validation.spec.ts for form validation tests
- Created e2e/keyboard-navigation.spec.ts for keyboard navigation tests
- Created scripts/tests/run-e2e.sh test runner script with health check
- Updated LAUNCH_READY_UI_UX_ROADMAP.md checklist - all items complete
- All testing infrastructure complete (CI integration replaced with local test runner)
- Installed Playwright and Storybook packages
- Created playwright.config.ts with viewport matrix and browser configurations
- Installed Playwright chromium browser
- Created e2e/viewport-matrix.spec.ts for viewport matrix testing
- Created e2e/horizontal-overflow.spec.ts for horizontal overflow testing
- Added test scripts to package.json (test:e2e, test:e2e:ui, test:e2e:viewport, test:e2e:overflow)
- Updated LAUNCH_READY_UI_UX_ROADMAP.md checklist with testing infrastructure status
- PR 1: Package Source and Install Stability - Verified
- Local product install works without Gitea npm auth
- Common-platform packages don't surprise local installs with private registry assumptions
- PR 2: Common Platform Foundation - Verified
- Design tokens follow clear primitive, alias, semantic, typography, and effects structure
- Shared primitives cover required components
- Common platform UI can be reused by another product without trading-specific assumptions
- PR 3: Product Adapter And Shell - Verified
- Desktop, tablet, and phone navigation follow the shell contract
- Right panel behaves correctly across responsive breakpoints
- AlertBanner components are inline within content
- ChatControl assistant widget uses createPortal with fixed positioning
- Add note about signal-status, rule-status, route-fallback-status, trading-sidebar-avatar-status
- These are intentional app-shell and component-level layouts, not dense operational table visual language
- Audit remains clean: 0 findings across all categories
- Updated PRODUCTION_GRADE_UX_REMEDIATION_ROADMAP.md with final completion status
- Moved PRODUCTION_GRADE_UX_REMEDIATION_ROADMAP.md to docs/completed/
- Updated LAUNCH_READY_UI_UX_ROADMAP.md checklist with completed work
- All one-off visual language replaced with shared Badge components
- Audit baseline clean: 0 findings across all categories
- Replace .stat-chip with Badge in PresetMarketplace, BacktestTab, MembershipTab
- Replace .saved-setup-id-chip with Badge in SimpleView
- Replace .screener-sector-chip with Badge in ScreenerView
- Replace .health-pill with Badge in TradeProfileManager
- Remove CSS definitions for one-off classes from index.css
- All components now use shared Badge from product adapter
- Verify: audit:ui (0 findings), audit:ui:strict (0 findings), typecheck, build
