Initial commit

2025-11-29 18:48:55 +08:00
commit f28999f19c
127 changed files with 62038 additions and 0 deletions
--- a/skills/qa-test-planner/references/figma_validation.md
+++ b/skills/qa-test-planner/references/figma_validation.md
@@ -0,0 +1,345 @@
+# Figma Design Validation with MCP
+
+Guide for validating UI implementation against Figma designs using Figma MCP.
+
+---
+
+## Prerequisites
+
+**Required:**
+- Figma MCP server configured
+- Access to Figma design files
+- Figma URLs for components/pages
+
+**Setup:**
+```bash
+# Install Figma MCP (follow official docs)
+# Configure API token
+# Verify access to design files
+```
+
+---
+
+## Validation Workflow
+
+### Step 1: Get Design Specifications
+
+**Using Figma MCP:**
+```
+"Get the specifications for the primary button from Figma file at [URL]"
+
+Response includes:
+- Dimensions (width, height)
+- Colors (background, text, border)
+- Typography (font, size, weight)
+- Spacing (padding, margin)
+- Border radius
+- States (default, hover, active, disabled)
+```
+
+### Step 2: Inspect Implementation
+
+**Browser DevTools:**
+1. Inspect element
+2. Check computed styles
+3. Verify dimensions
+4. Compare colors (use color picker)
+5. Check typography
+6. Test interactive states
+
+### Step 3: Document Discrepancies
+
+**Create test case or bug:**
+```
+TC-UI-001: Primary Button Visual Validation
+
+Design (Figma):
+- Size: 120x40px
+- Background: #0066FF
+- Border-radius: 8px
+- Font: 16px Medium #FFFFFF
+
+Implementation:
+- Size: 120x40px ✓
+- Background: #0052CC ✗ (wrong shade)
+- Border-radius: 8px ✓
+- Font: 16px Regular #FFFFFF ✗ (wrong weight)
+
+Status: FAIL
+Bugs: BUG-234, BUG-235
+```
+
+---
+
+## What to Validate
+
+### Layout & Spacing
+- [ ] Component dimensions
+- [ ] Padding (all sides)
+- [ ] Margins
+- [ ] Grid alignment
+- [ ] Responsive breakpoints
+- [ ] Container max-width
+
+**Example Query:**
+```
+"Extract spacing values for the card component from Figma"
+```
+
+### Typography
+- [ ] Font family
+- [ ] Font size
+- [ ] Font weight
+- [ ] Line height
+- [ ] Letter spacing
+- [ ] Text color
+- [ ] Text alignment
+
+**Example Query:**
+```
+"Get typography specifications for all heading levels from Figma design system"
+```
+
+### Colors
+- [ ] Background colors
+- [ ] Text colors
+- [ ] Border colors
+- [ ] Shadow colors
+- [ ] Gradient values
+- [ ] Opacity values
+
+**Example Query:**
+```
+"List all color tokens used in the navigation component"
+```
+
+### Components
+- [ ] Icon sizes and colors
+- [ ] Button states
+- [ ] Input field styling
+- [ ] Checkbox/radio appearance
+- [ ] Dropdown styling
+- [ ] Card components
+
+**Example Query:**
+```
+"Compare the implemented dropdown menu with Figma design at [URL]"
+```
+
+### Interactive States
+- [ ] Default state
+- [ ] Hover state
+- [ ] Active/pressed state
+- [ ] Focus state
+- [ ] Disabled state
+- [ ] Loading state
+- [ ] Error state
+
+---
+
+## Common Discrepancies
+
+### Typography Mismatches
+- Wrong font weight (e.g., Regular instead of Medium)
+- Incorrect font size
+- Missing line-height
+- Color hex codes off by a shade
+
+### Spacing Issues
+- Padding not matching
+- Inconsistent margins
+- Grid misalignment
+- Component spacing varies
+
+### Color Differences
+- Hex values off (#0066FF vs #0052CC)
+- Opacity not applied
+- Gradient angles wrong
+- Shadow colors incorrect
+
+### Responsive Behavior
+- Breakpoints don't match
+- Mobile layout different
+- Tablet view inconsistent
+- Scaling not as designed
+
+---
+
+## Test Case Template
+
+```markdown
+## TC-UI-XXX: [Component] Visual Validation
+
+**Figma Design:** [URL to specific component]
+
+### Desktop (1920x1080)
+
+**Layout:**
+- [ ] Width: XXXpx
+- [ ] Height: XXXpx
+- [ ] Padding: XXpx XXpx XXpx XXpx
+- [ ] Margin: XXpx
+
+**Typography:**
+- [ ] Font: [Family] [Weight]
+- [ ] Size: XXpx
+- [ ] Line-height: XXpx
+- [ ] Color: #XXXXXX
+
+**Colors:**
+- [ ] Background: #XXXXXX
+- [ ] Border: Xpx solid #XXXXXX
+- [ ] Shadow: XXpx XXpx XXpx rgba(X,X,X,X)
+
+**Interactive States:**
+- [ ] Hover: [changes]
+- [ ] Active: [changes]
+- [ ] Focus: [changes]
+- [ ] Disabled: [changes]
+
+### Tablet (768px)
+- [ ] [Responsive changes]
+
+### Mobile (375px)
+- [ ] [Responsive changes]
+
+### Status
+- [ ] PASS - All match
+- [ ] FAIL - Discrepancies found
+- [ ] BLOCKED - Design incomplete
+```
+
+---
+
+## Figma MCP Queries
+
+### Component Specifications
+```
+"Get complete specifications for the [component name] from Figma at [URL]"
+"Extract all button variants from the design system"
+"List typography styles defined in Figma"
+```
+
+### Color System
+```
+"Show me all color tokens in the Figma design system"
+"What colors are used in the navigation bar design?"
+"Get the exact hex values for primary, secondary, and accent colors"
+```
+
+### Spacing & Layout
+```
+"What are the padding values for the card component?"
+"Extract grid specifications from the page layout"
+"Get spacing tokens (8px, 16px, 24px, etc.)"
+```
+
+### Responsive Breakpoints
+```
+"What are the defined breakpoints in this Figma design?"
+"Show mobile vs desktop layout differences for [component]"
+```
+
+---
+
+## Bug Report for UI Discrepancies
+
+```markdown
+# BUG-XXX: [Component] doesn't match Figma design
+
+**Severity:** Medium (UI)
+**Type:** Visual
+
+## Design vs Implementation
+
+**Figma Design:** [URL]
+
+**Expected (from Figma):**
+- Button background: #0066FF
+- Font weight: 600 (Semi-bold)
+- Padding: 12px 24px
+
+**Actual (in implementation):**
+- Button background: #0052CC ❌
+- Font weight: 400 (Regular) ❌
+- Padding: 12px 24px ✓
+
+## Screenshots
+
+- Figma design: [attach]
+- Current implementation: [attach]
+- Side-by-side comparison: [attach]
+
+## Impact
+
+Users see inconsistent branding. Button appears less prominent than designed.
+```
+
+---
+
+## Automation Ideas
+
+### Visual Regression Testing
+- Capture screenshots
+- Compare against Figma exports
+- Highlight pixel differences
+- Tools: Percy, Chromatic, BackstopJS
+
+### Design Token Validation
+- Extract Figma design tokens
+- Compare with CSS variables
+- Flag mismatches
+- Automate with scripts
+
+---
+
+## Best Practices
+
+**DO:**
+- ✅ Always reference specific Figma URLs
+- ✅ Test all component states
+- ✅ Check responsive breakpoints
+- ✅ Document exact values (not "close enough")
+- ✅ Screenshot both design and implementation
+- ✅ Test in multiple browsers
+
+**DON'T:**
+- ❌ Assume "it looks right"
+- ❌ Skip hover/active states
+- ❌ Ignore small color differences
+- ❌ Test only on one screen size
+- ❌ Forget to check typography
+- ❌ Miss spacing issues
+
+---
+
+## Checklist for UI Test Cases
+
+Per component:
+- [ ] Figma URL documented
+- [ ] Desktop layout validated
+- [ ] Mobile/tablet responsive checked
+- [ ] All interactive states tested
+- [ ] Colors match exactly (use color picker)
+- [ ] Typography specifications correct
+- [ ] Spacing (padding/margins) accurate
+- [ ] Icons match design
+- [ ] Shadows/borders match
+- [ ] Animations match timing/easing
+
+---
+
+## Quick Reference
+
+| Element | What to Check | Tool |
+|---------|---------------|------|
+| Colors | Hex values exact | Browser color picker |
+| Spacing | Padding/margin px | DevTools computed styles |
+| Typography | Font, size, weight | DevTools font panel |
+| Layout | Width, height, position | DevTools box model |
+| States | Hover, active, focus | Manual interaction |
+| Responsive | Breakpoint behavior | DevTools device mode |
+
+---
+
+**Remember:** Pixel-perfect implementation builds user trust and brand consistency.
--- a/skills/qa-test-planner/references/regression_testing.md
+++ b/skills/qa-test-planner/references/regression_testing.md
@@ -0,0 +1,371 @@
+# Regression Testing Guide
+
+Comprehensive guide to regression testing strategies and execution.
+
+---
+
+## What is Regression Testing?
+
+**Definition:** Re-testing existing functionality to ensure new changes haven't broken anything.
+
+**When to run:**
+- Before every release
+- After bug fixes
+- After new features
+- After refactoring
+- Weekly/nightly builds
+
+---
+
+## Regression Test Suite Structure
+
+### 1. Smoke Test Suite (15-30 min)
+
+**Purpose:** Quick sanity check
+
+**When:** Daily, before detailed testing
+
+**Coverage:**
+- Critical user paths
+- Core functionality
+- System health checks
+- Build stability
+
+**Example Smoke Suite:**
+```
+SMOKE-001: User can login
+SMOKE-002: User can navigate to main features
+SMOKE-003: Critical API endpoints respond
+SMOKE-004: Database connectivity works
+SMOKE-005: User can complete primary action
+SMOKE-006: User can logout
+```
+
+### 2. Full Regression Suite (2-4 hours)
+
+**Purpose:** Comprehensive validation
+
+**When:** Before releases, weekly
+
+**Coverage:**
+- All functional test cases
+- Integration scenarios
+- UI validation
+- Data integrity
+- Security checks
+
+### 3. Targeted Regression (30-60 min)
+
+**Purpose:** Test impacted areas
+
+**When:** After specific changes
+
+**Coverage:**
+- Modified feature area
+- Related components
+- Integration points
+- Dependent functionality
+
+---
+
+## Building a Regression Suite
+
+### Step 1: Identify Critical Paths
+
+**Questions:**
+- What can users absolutely NOT live without?
+- What generates revenue?
+- What handles sensitive data?
+- What's used most frequently?
+
+**Example Critical Paths:**
+- User authentication
+- Payment processing
+- Data submission
+- Report generation
+- Core business logic
+
+### Step 2: Prioritize Test Cases
+
+**P0 (Must Run):**
+- Business-critical functionality
+- Security-related tests
+- Data integrity checks
+- Revenue-impacting features
+
+**P1 (Should Run):**
+- Major features
+- Common user flows
+- Integration points
+- Performance checks
+
+**P2 (Nice to Run):**
+- Minor features
+- Edge cases
+- UI polish
+- Optional functionality
+
+### Step 3: Group by Feature Area
+
+```
+Authentication & Authorization
+├─ Login/Logout
+├─ Password reset
+├─ Session management
+└─ Permissions
+
+Payment Processing
+├─ Checkout flow
+├─ Payment methods
+├─ Refunds
+└─ Receipt generation
+
+User Management
+├─ Profile updates
+├─ Preferences
+├─ Account settings
+└─ Data export
+```
+
+---
+
+## Regression Suite Examples
+
+### E-commerce Regression Suite
+
+**Smoke Tests (20 min):**
+1. Homepage loads
+2. User can login
+3. Product search works
+4. Add to cart functions
+5. Checkout accessible
+6. Payment gateway responds
+
+**Full Regression (3 hours):**
+
+**User Account (30 min):**
+- Registration
+- Login/Logout
+- Password reset
+- Profile updates
+- Address management
+
+**Product Catalog (45 min):**
+- Browse categories
+- Search functionality
+- Filters and sorting
+- Product details
+- Image zoom
+- Reviews display
+
+**Shopping Cart (30 min):**
+- Add items
+- Update quantities
+- Remove items
+- Apply discounts
+- Save for later
+- Cart persistence
+
+**Checkout & Payment (45 min):**
+- Guest checkout
+- Registered user checkout
+- Multiple addresses
+- Payment methods
+- Order confirmation
+- Email notifications
+
+**Order Management (30 min):**
+- Order history
+- Order tracking
+- Cancellations
+- Returns/Refunds
+- Reorders
+
+---
+
+## Execution Strategy
+
+### Test Execution Order
+
+**1. Smoke first**
+- If smoke fails → stop, fix build
+- If smoke passes → proceed to full regression
+
+**2. P0 tests next**
+- Critical functionality
+- Must pass before proceeding
+
+**3. P1 then P2**
+- Complete remaining tests
+- Track failures
+
+**4. Exploratory**
+- Unscripted testing
+- Find unexpected issues
+
+### Pass/Fail Criteria
+
+**PASS:**
+- All P0 tests pass
+- 90%+ P1 tests pass
+- No critical bugs open
+- Performance acceptable
+
+**FAIL (Block Release):**
+- Any P0 test fails
+- Critical bug discovered
+- Security vulnerability
+- Data loss scenario
+
+**CONDITIONAL PASS:**
+- P1 failures with workarounds
+- Known issues documented
+- Fix plan in place
+
+---
+
+## Regression Test Management
+
+### Test Suite Maintenance
+
+**Monthly Review:**
+- Remove obsolete tests
+- Update changed functionality
+- Add new critical paths
+- Optimize slow tests
+
+**After Each Release:**
+- Update test data
+- Fix broken tests
+- Add regression for bugs found
+- Document changes
+
+### Automation Considerations
+
+**Good Candidates for Automation:**
+- Stable, repetitive tests
+- Smoke tests
+- API tests
+- Data validation
+- Cross-browser checks
+
+**Keep Manual:**
+- Exploratory testing
+- Usability evaluation
+- Visual design validation
+- Complex user scenarios
+
+---
+
+## Regression Test Execution Report
+
+```markdown
+# Regression Test Report: Release 2.5.0
+
+**Date:** 2024-01-15
+**Build:** v2.5.0-rc1
+**Tester:** QA Team
+**Environment:** Staging
+
+## Summary
+
+| Suite | Total | Pass | Fail | Blocked | Pass Rate |
+|-------|-------|------|------|---------|-----------|
+| Smoke | 10 | 10 | 0 | 0 | 100% |
+| P0 Critical | 25 | 23 | 2 | 0 | 92% |
+| P1 High | 50 | 47 | 2 | 1 | 94% |
+| P2 Medium | 40 | 38 | 1 | 1 | 95% |
+| **TOTAL** | **125** | **118** | **5** | **2** | **94%** |
+
+## Critical Failures (P0)
+
+### BUG-234: Payment processing fails for Visa
+- **Test:** TC-PAY-001
+- **Impact:** High - Blocks 40% of transactions
+- **Status:** In Progress
+- **ETA:** 2024-01-16
+
+### BUG-235: User session expires prematurely
+- **Test:** TC-AUTH-045
+- **Impact:** Medium - Users logged out unexpectedly
+- **Status:** Under investigation
+
+## Recommendation
+
+**Status:** ⚠️ CONDITIONAL GO
+- Fix BUG-234 (payment) before release
+- BUG-235 acceptable with documented workaround
+- Retest after fixes
+- Final regression run before production deployment
+
+## Risks
+
+- Payment issue could impact revenue
+- Session bug may frustrate users
+- Limited time before release deadline
+
+## Next Steps
+
+1. Fix BUG-234 by EOD
+2. Retest payment flow
+3. Document session workaround
+4. Final smoke test before release
+```
+
+---
+
+## Common Pitfalls
+
+**❌ Don't:**
+- Run same tests without updating
+- Skip regression "to save time"
+- Ignore failures in low-priority tests
+- Test only happy paths
+- Forget to update test data
+- Run regression once and forget
+
+**✅ Do:**
+- Maintain suite regularly
+- Run regression consistently
+- Investigate all failures
+- Include edge cases
+- Keep test data fresh
+- Automate repetitive tests
+
+---
+
+## Regression Checklist
+
+**Before Execution:**
+- [ ] Test environment ready
+- [ ] Build deployed
+- [ ] Test data prepared
+- [ ] Previous bugs verified fixed
+- [ ] Test suite reviewed/updated
+
+**During Execution:**
+- [ ] Follow test execution order
+- [ ] Document all failures
+- [ ] Screenshot/record issues
+- [ ] Note unexpected behavior
+- [ ] Track blockers
+
+**After Execution:**
+- [ ] Compile results
+- [ ] File new bugs
+- [ ] Update test cases
+- [ ] Report to stakeholders
+- [ ] Archive artifacts
+
+---
+
+## Quick Reference
+
+| Suite Type | Duration | Frequency | Coverage |
+|------------|----------|-----------|----------|
+| Smoke | 15-30 min | Daily | Critical paths |
+| Targeted | 30-60 min | Per change | Affected areas |
+| Full | 2-4 hours | Weekly/Release | Comprehensive |
+| Sanity | 10-15 min | After hotfix | Quick validation |
+
+**Remember:** Regression testing is insurance against breaking existing functionality.