fraim-framework 2.0.55 → 2.0.56

package/dist/registry/workflows/quality-assurance/browser-validation.md

@@ -0,0 +1,221 @@
+# Browser Validation Workflow
+
+## INTENT
+To systematically validate the application in a browser, identify issues, and iterate until production-ready through comprehensive browser testing.
+
+## PRINCIPLES
+- **Systematic Testing**: Don't skip steps, test everything
+- **Use Case Driven**: Test based on documented use cases
+- **Cross-Browser**: Validate in multiple browsers
+- **Responsive**: Test on different screen sizes
+- **Iterative**: Fix issues and re-validate
+
+## When to Use This Workflow
+
+Use this workflow to:
+- Validate application after implementation (`workflows/implement.md`)
+- Comprehensive browser testing before deployment
+- Identify browser-specific issues
+- Validate responsive design
+
+This workflow complements:
+- `workflows/quality-assurance/iterative-improvement-cycle.md` - For systematic improvement cycles
+- `workflows/test.md` - For writing automated tests
+- `workflows/deploy/cloud-deployment.md` - For deployment validation
+
+## Prerequisites
+- Application deployed (or running locally)
+- Use case documentation available (if applicable)
+- Browser testing tools (Playwright, Selenium, or manual)
+- Issue tracking system (GitHub Issues, etc.)
+
+## Phase 1: Systematic Browser Testing
+
+### 1.1 Prepare Test Environment
+- Open browser (Chrome, Firefox, Safari)
+- Clear cache and cookies
+- Open developer tools for debugging
+- Prepare test data if needed
+
+### 1.2 Test by Use Case Category
+Follow use case documentation (if available) or test by feature:
+- **Authentication**: Sign up, login, logout, password reset
+- **Core Features**: Main application functionality
+- **Secondary Features**: Supporting features
+- **Edge Cases**: Error scenarios, boundary conditions
+
+### 1.3 Document Findings
+For each test:
+- ✅ Pass: Feature works as expected
+- ⚠️ Minor Issue: Works but has problems
+- ❌ Major Issue: Feature broken or missing
+- 📝 Note: Observations, improvements
+
+## Phase 2: Issue Identification & Documentation
+
+### 2.1 Issue Categories
+Organize issues by type:
+- **Functionality**: Features not working
+- **UI/UX**: Styling, layout, usability issues
+- **Data**: Incorrect data, missing data
+- **Performance**: Slow loading, lag
+- **Accessibility**: A11y issues
+- **Browser Compatibility**: Issues in specific browsers
+
+### 2.2 Issue Documentation Template
+Use GitHub Issues or track in a document:
+
+```markdown
+## Issue: [Title]
+
+**Category**: [Functionality/UI/Data/etc.]
+**Priority**: High/Medium/Low
+**Use Case**: [Related use case]
+**Steps to Reproduce**:
+1. [Step]
+2. [Step]
+**Expected**: [What should happen]
+**Actual**: [What actually happens]
+**Screenshot**: [If applicable]
+**Browser**: [Chrome/Firefox/etc.]
+```
+
+### 2.3 Prioritize Issues
+- **Critical**: Blocks core functionality
+- **High**: Major feature broken
+- **Medium**: Feature works but has problems
+- **Low**: Minor issues, polish
+
+## Phase 3: Iterative Fixes
+
+Follow `workflows/quality-assurance/iterative-improvement-cycle.md` for systematic fixes:
+
+1. **Fix Order**: Address issues in priority order (Critical → High → Medium → Low)
+2. **Fix Process**: For each issue:
+   - Reproduce issue locally
+   - Identify root cause
+   - Implement fix (follow `workflows/implement.md`)
+   - Write test (follow `workflows/test.md`)
+   - Verify fix in browser
+   - Deploy fix
+   - Re-validate in production
+3. **Validation After Each Fix**: Test the specific fix, verify no regressions, check related functionality
+
+## Phase 4: Comprehensive Validation
+
+### 4.1 Complete Use Case Validation
+- Go through each use case systematically
+- Test complete user journeys
+- Verify all steps work correctly
+- Document any remaining issues
+
+### 4.2 Cross-Browser Testing
+- Test in Chrome
+- Test in Firefox
+- Test in Safari (if on Mac)
+- Test in Edge
+- Document browser-specific issues
+
+### 4.3 Responsive Design Testing
+- Test on desktop (1920x1080)
+- Test on tablet (768x1024)
+- Test on mobile (375x667)
+- Verify layouts adapt correctly
+
+### 4.4 Performance Testing
+- Check page load times
+- Test with slow network (throttle)
+- Verify API response times
+- Check for memory leaks
+
+## Phase 5: Production Readiness
+
+### 5.1 Final Checklist
+- [ ] All critical use cases work
+- [ ] No blocking bugs
+- [ ] UI/UX is acceptable
+- [ ] Data persists correctly
+- [ ] Authentication works (if applicable)
+- [ ] Error handling works
+- [ ] Performance is acceptable
+- [ ] Works in major browsers
+- [ ] Responsive design works
+- [ ] Security is implemented
+
+### 5.2 Production Readiness Criteria
+- All high-priority use cases validated
+- No critical bugs remaining
+- Application is stable
+- Performance is acceptable
+- User experience is good
+
+### 5.3 Documentation
+- Document known issues (if any)
+- Create user guide (if needed)
+- Document deployment process
+- Create runbook for common issues
+
+## Validation Patterns
+
+### Use Case Validation Pattern
+```
+1. Navigate to starting page
+2. Perform each step in use case
+3. Verify expected outcomes
+4. Check data persistence
+5. Verify error handling
+6. Test edge cases
+```
+
+### Issue Fix Pattern
+```
+1. Reproduce → 2. Fix (follow workflows/implement.md) → 3. Test (follow workflows/test.md) → 4. Deploy → 5. Validate
+```
+
+## Best Practices
+
+1. **Be Systematic**: Don't skip steps, test everything
+2. **Document Everything**: Record all findings
+3. **Fix Immediately**: Don't accumulate issues (follow `workflows/quality-assurance/iterative-improvement-cycle.md`)
+4. **Test After Fixes**: Always verify fixes work
+5. **Iterate Quickly**: Short fix-validate cycles
+
+## Common Issues & Solutions
+
+1. **Styling Issues**: CSS not loading
+   - **Solution**: Check build process, verify CSS files in dist
+
+2. **API Errors**: 500 errors from API
+   - **Solution**: Check server logs, verify environment variables
+
+3. **Data Not Showing**: Empty lists, missing data
+   - **Solution**: Check database connection, verify seed/test data
+
+4. **Navigation Issues**: Links not working
+   - **Solution**: Check routing configuration, verify paths
+
+5. **Authentication Issues**: Can't login
+   - **Solution**: Check auth implementation, verify session handling
+
+## Output Artifacts
+
+1. **Validation Report**
+   - Use case validation status
+   - Issues found and fixed
+   - Remaining issues (if any)
+
+2. **Issue Log**
+   - All issues documented
+   - Fixes applied
+   - Status of each issue
+
+3. **Production Readiness Report**
+   - Checklist completion
+   - Known issues
+   - Recommendations
+
+## Related Workflows
+- `workflows/quality-assurance/iterative-improvement-cycle.md` - **Recommended**: Systematic review-critique-fix-validate cycle
+- `workflows/implement.md` - For implementing fixes
+- `workflows/test.md` - For writing tests
+- `workflows/deploy/cloud-deployment.md` - For deployment validation