| name | qa-test-planner |
| description | Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation. |
QA Test Planner
A comprehensive skill for QA engineers to create test plans, generate manual test cases, build regression test suites, validate designs against Figma, and document bugs effectively.
What This Skill Does
Helps QA engineers with:
- Test Plan Creation - Comprehensive test strategy and planning
- Manual Test Case Generation - Detailed step-by-step test cases
- Regression Test Suites - Critical path and smoke test suites
- Figma Design Validation - Compare implementation against designs (requires Figma MCP)
- Bug Report Templates - Clear, reproducible bug documentation
- Test Coverage Analysis - Identify gaps in testing
- Test Execution Tracking - Monitor testing progress
Why You Need This Skill
Without structured testing:
- Inconsistent test coverage
- Missed edge cases
- Poor bug documentation
- No regression safety net
- Design implementation gaps
- Unclear test strategy
With this skill:
- Comprehensive test coverage
- Repeatable test cases
- Systematic regression testing
- Design-implementation validation
- Professional bug reports
- Clear testing roadmap
Core Components
1. Test Plan Generator
- Test scope and objectives
- Testing approach and strategy
- Test environment requirements
- Entry/exit criteria
- Risk assessment
- Resource allocation
- Timeline and milestones
2. Manual Test Case Generator
- Step-by-step instructions
- Expected vs actual results
- Preconditions and setup
- Test data requirements
- Priority and severity
- Edge case identification
3. Regression Test Suite Builder
- Smoke test cases
- Critical path testing
- Integration test scenarios
- Backward compatibility checks
- Performance regression tests
4. Figma Design Validation (with MCP)
- Compare UI implementation to designs
- Identify visual discrepancies
- Validate spacing, colors, typography
- Check component consistency
- Flag design-dev mismatches
5. Bug Report Generator
- Clear reproduction steps
- Environment details
- Expected vs actual behavior
- Screenshots and evidence
- Severity and priority
- Related test cases
Test Case Structure
Standard Test Case Format
## TC-001: [Test Case Title]
**Priority:** High | Medium | Low
**Type:** Functional | UI | Integration | Regression
**Status:** Not Run | Pass | Fail | Blocked
### Objective
[What are we testing and why]
### Preconditions
- [Setup requirement 1]
- [Setup requirement 2]
- [Test data needed]
### Test Steps
1. [Action to perform]
**Expected:** [What should happen]
2. [Action to perform]
**Expected:** [What should happen]
3. [Action to perform]
**Expected:** [What should happen]
### Test Data
- Input: [Test data values]
- User: [Test account details]
- Configuration: [Environment settings]
### Post-conditions
- [System state after test]
- [Cleanup required]
### Notes
- [Edge cases to consider]
- [Related test cases]
- [Known issues]
Test Plan Template
Executive Summary
- Feature/product being tested
- Testing objectives
- Key risks
- Timeline overview
Test Scope
In Scope:
- Features to be tested
- Test types (functional, UI, performance, etc.)
- Platforms and environments
- User flows and scenarios
Out of Scope:
- Features not being tested (deferred)
- Known limitations
- Third-party integrations (if applicable)
Test Strategy
Test Types:
- Manual testing
- Exploratory testing
- Regression testing
- Integration testing
- User acceptance testing
- Performance testing (if applicable)
Test Approach:
- Black box testing
- Positive and negative testing
- Boundary value analysis
- Equivalence partitioning
Test Environment
- Operating systems
- Browsers and versions
- Devices (mobile, tablet, desktop)
- Test data requirements
- Backend/API environments
Entry Criteria
Exit Criteria
Risk Assessment
| Risk | Probability | Impact | Mitigation |
|---|
| [Risk 1] | High/Med/Low | High/Med/Low | [How to mitigate] |
| [Risk 2] | High/Med/Low | High/Med/Low | [How to mitigate] |
Test Deliverables
- Test plan document
- Test cases
- Test execution reports
- Bug reports
- Test summary report
Test Types and Approaches
1. Functional Testing
What: Verify features work as specified
Test Cases:
- Happy path scenarios
- Error handling
- Input validation
- Business logic
- Data integrity
Example:
TC: User Login with Valid Credentials
1. Navigate to login page
2. Enter valid email and password
3. Click "Login" button
Expected: User redirected to dashboard, welcome message shown
2. UI/Visual Testing
What: Verify visual appearance and layout
Test Cases:
- Layout and alignment
- Responsive design
- Color and typography
- Component states (hover, active, disabled)
- Cross-browser compatibility
With Figma MCP:
- Compare implementation to Figma designs
- Verify spacing (padding, margins)
- Check font sizes and weights
- Validate color values
- Ensure icon accuracy
Example:
TC: Homepage Hero Section Visual Validation
1. Open homepage in browser
2. Compare against Figma design [link]
3. Verify:
- Heading font: 48px, bold, #1A1A1A
- CTA button: 16px padding, #0066FF background
- Image aspect ratio: 16:9
- Spacing: 64px margin-bottom
Expected: All visual elements match Figma exactly
3. Regression Testing
What: Ensure existing functionality still works
When to Run:
- Before each release
- After bug fixes
- After new features
- Weekly smoke tests
Suite Components:
- Smoke tests (critical paths)
- Full regression (comprehensive)
- Targeted regression (affected areas)
Example:
Regression Suite: User Authentication
- Login with valid credentials
- Login with invalid credentials
- Password reset flow
- Session timeout handling
- Multi-device login
- Social login (Google, GitHub)
4. Integration Testing
What: Verify different components work together
Test Cases:
- API integration
- Database operations
- Third-party services
- Cross-module interactions
- Data flow between components
Example:
TC: Checkout Payment Integration
1. Add item to cart
2. Proceed to checkout
3. Enter payment details (Stripe)
4. Submit payment
Expected:
- Payment processed via Stripe API
- Order created in database
- Confirmation email sent
- Inventory updated
5. Exploratory Testing
What: Unscripted, creative testing
Approach:
- Charter-based exploration
- User persona simulation
- Edge case discovery
- Usability evaluation
Session Template:
Exploratory Testing Session
Charter: Explore [feature] as [user type]
Time: 60 minutes
Focus: [Area to explore]
Findings:
- [Bug/issue discovered]
- [UX concern]
- [Improvement suggestion]
Follow-up:
- [Test cases to create]
- [Bugs to file]
Figma MCP Integration
Design Validation Workflow
Prerequisites:
- Figma MCP server configured
- Design file access
- Figma URLs available
Validation Process:
- Get Design Specs from Figma
"Get the button specifications from Figma file [URL]"
- Component: Primary Button
- Width: 120px
- Height: 40px
- Border-radius: 8px
- Background: #0066FF
- Font: 16px, Medium, #FFFFFF
- Compare Implementation
TC: Primary Button Visual Validation
1. Inspect primary button in browser dev tools
2. Compare against Figma specs:
- Dimensions: 120x40px ✓ / ✗
- Border-radius: 8px ✓ / ✗
- Background color: #0066FF ✓ / ✗
- Font: 16px Medium #FFFFFF ✓ / ✗
3. Document discrepancies
- Create Bug if Mismatch
BUG: Primary button color doesn't match design
Severity: Medium
Expected (Figma): #0066FF
Actual (Implementation): #0052CC
Screenshot: [attached]
Figma link: [specific component]
Design-Dev Handoff Checklist
Using Figma MCP:
Bug Reporting Best Practices
Effective Bug Report Template
# BUG-[ID]: [Clear, specific title]
**Severity:** Critical | High | Medium | Low
**Priority:** P0 | P1 | P2 | P3
**Type:** Functional | UI | Performance | Security
**Status:** Open | In Progress | Fixed | Closed
## Environment
- **OS:** [Windows 11, macOS 14, etc.]
- **Browser:** [Chrome 120, Firefox 121, etc.]
- **Device:** [Desktop, iPhone 15, etc.]
- **Build:** [Version/commit]
- **URL:** [Page where bug occurs]
## Description
[Clear, concise description of the issue]
## Steps to Reproduce
1. [Specific step]
2. [Specific step]
3. [Specific step]
## Expected Behavior
[What should happen]
## Actual Behavior
[What actually happens]
## Visual Evidence
- Screenshot: [attached]
- Video: [link if applicable]
- Console errors: [paste errors]
- Network logs: [if relevant]
## Impact
- **User Impact:** [How many users affected]
- **Frequency:** [Always, Sometimes, Rarely]
- **Workaround:** [If one exists]
## Additional Context
- Related to: [Feature/ticket]
- First noticed: [When]
- Regression: [Yes/No - if yes, since when]
- Figma design: [Link if UI bug]
## Test Cases Affected
- TC-001: [Test case that failed]
- TC-045: [Related test case]
Bug Severity Definitions
Critical (P0):
- System crash or data loss
- Security vulnerability
- Complete feature breakdown
- Blocks release
High (P1):
- Major feature not working
- Significant user impact
- No workaround available
- Should fix before release
Medium (P2):
- Feature partially working
- Workaround available
- Minor user inconvenience
- Can ship with fix in next release
Low (P3):
- Cosmetic issues
- Rare edge cases
- Minimal impact
- Nice to have fixed
Test Coverage Analysis
Coverage Metrics
Feature Coverage:
Total Features: 25
Tested: 23
Not Tested: 2
Coverage: 92%
Requirement Coverage:
Total Requirements: 150
With Test Cases: 142
Without Test Cases: 8
Coverage: 95%
Risk Coverage:
High-Risk Areas: 12
Tested: 12
Medium-Risk: 35
Tested: 30
Coverage Matrix
| Feature | Requirements | Test Cases | Status | Gaps |
|---|
| Login | 8 | 12 | ✓ Complete | None |
| Checkout | 15 | 10 | ⚠ Partial | Payment errors |
| Dashboard | 12 | 15 | ✓ Complete | None |
Regression Test Suite Structure
Smoke Test Suite (15-30 min)
Run: Before every test cycle, daily builds
Critical Paths:
- User login/logout
- Core user flow (e.g., create order)
- Navigation and routing
- API health checks
- Database connectivity
Example:
SMOKE-001: Critical User Flow
1. Login as standard user
2. Navigate to main feature
3. Perform primary action
4. Verify success message
5. Logout
Expected: All steps complete without errors
Full Regression Suite (2-4 hours)
Run: Weekly, before releases
Coverage:
- All functional test cases
- Integration scenarios
- UI validation
- Cross-browser checks
- Data integrity tests
Targeted Regression (30-60 min)
Run: After bug fixes, feature updates
Coverage:
- Affected feature area
- Related components
- Integration points
- Previously failed tests
Test Execution Tracking
Test Run Template
# Test Run: [Release Version]
**Date:** 2024-01-15
**Build:** v2.5.0-rc1
**Tester:** [Name]
**Environment:** Staging
## Summary
- Total Test Cases: 150
- Executed: 145
- Passed: 130
- Failed: 10
- Blocked: 5
- Not Run: 5
- Pass Rate: 90%
## Test Cases by Priority
| Priority | Total | Pass | Fail | Blocked |
|----------|-------|------|------|---------|
| P0 (Critical) | 25 | 23 | 2 | 0 |
| P1 (High) | 50 | 45 | 3 | 2 |
| P2 (Medium) | 50 | 45 | 3 | 2 |
| P3 (Low) | 25 | 17 | 2 | 1 |
## Failures
### Critical Failures
- TC-045: Payment processing fails
- Bug: BUG-234
- Status: Open
### High Priority Failures
- TC-089: Email notification not sent
- Bug: BUG-235
- Status: In Progress
## Blocked Tests
- TC-112: Dashboard widget (API endpoint down)
- TC-113: Export feature (dependency not deployed)
## Risks
- 2 critical bugs blocking release
- Payment integration needs attention
- Email service intermittent
## Next Steps
- Retest after BUG-234 fix
- Complete remaining 5 test cases
- Run full regression before sign-off
Using This Skill
Generate Test Plan
./scripts/generate_test_plan.sh
Interactive workflow for creating comprehensive test plans.
Generate Manual Test Cases
./scripts/generate_test_cases.sh
Create manual test cases for features with step-by-step instructions.
Build Regression Suite
./scripts/build_regression_suite.sh
Create smoke and regression test suites.
Validate Design with Figma
With Figma MCP configured:
"Compare the login page implementation against the Figma design at [URL] and generate test cases for visual validation"
Create Bug Report
./scripts/create_bug_report.sh
Generate structured bug reports with all required details.
Access Templates
references/test_case_templates.md - Various test case formats
references/bug_report_templates.md - Bug documentation templates
references/regression_testing.md - Regression testing guide
references/figma_validation.md - Design validation with Figma MCP
QA Process Workflow
1. Planning Phase
2. Test Design Phase
3. Test Execution Phase
4. Reporting Phase
Best Practices
Test Case Writing
DO:
- ✅ Be specific and unambiguous
- ✅ Include expected results for each step
- ✅ Test one thing per test case
- ✅ Use consistent naming conventions
- ✅ Keep test cases maintainable
DON'T:
- ❌ Assume knowledge
- ❌ Make test cases too long
- ❌ Skip preconditions
- ❌ Forget edge cases
- ❌ Leave expected results vague
Bug Reporting
DO:
- ✅ Provide clear reproduction steps
- ✅ Include screenshots/videos
- ✅ Specify exact environment details
- ✅ Describe impact on users
- ✅ Link to Figma for UI bugs
DON'T:
- ❌ Report without reproduction steps
- ❌ Use vague descriptions
- ❌ Skip environment details
- ❌ Forget to assign priority
- ❌ Duplicate existing bugs
Regression Testing
DO:
- ✅ Automate repetitive tests when possible
- ✅ Maintain regression suite regularly
- ✅ Prioritize critical paths
- ✅ Run smoke tests frequently
- ✅ Update suite after each release
DON'T:
- ❌ Skip regression before releases
- ❌ Let suite become outdated
- ❌ Test everything every time
- ❌ Ignore failed regression tests
Figma MCP Setup
Configuration
Install Figma MCP server:
Usage in test planning:
"Analyze the Figma design file at [URL] and generate visual validation test cases for:
- Color scheme compliance
- Typography specifications
- Component spacing
- Responsive breakpoints
- Interactive states"
Example queries:
"Get button specifications from Figma design [URL]"
"Compare navigation menu implementation against Figma design"
"Extract spacing values for dashboard layout from Figma"
"List all color tokens used in Figma design system"
Test Case Examples
Example 1: Login Flow
## TC-LOGIN-001: Valid User Login
**Priority:** P0 (Critical)
**Type:** Functional
**Estimated Time:** 2 minutes
### Objective
Verify users can successfully login with valid credentials
### Preconditions
- User account exists (test@example.com / Test123!)
- User is not already logged in
- Browser cookies cleared
### Test Steps
1. Navigate to https://app.example.com/login
**Expected:** Login page displays with email and password fields
2. Enter email: test@example.com
**Expected:** Email field accepts input
3. Enter password: Test123!
**Expected:** Password field shows masked characters
4. Click "Login" button
**Expected:**
- Loading indicator appears
- User redirected to /dashboard
- Welcome message shown: "Welcome back, Test User"
- Avatar/profile image displayed in header
### Post-conditions
- User session created
- Auth token stored
- Analytics event logged
### Visual Validation (with Figma)
- Compare dashboard layout against Figma design [link]
- Verify welcome message typography: 24px, Medium, #1A1A1A
- Check avatar size: 40x40px, border-radius 50%
### Edge Cases to Consider
- TC-LOGIN-002: Invalid password
- TC-LOGIN-003: Non-existent email
- TC-LOGIN-004: SQL injection attempt
- TC-LOGIN-005: Very long password
Example 2: Responsive Design Validation
## TC-UI-045: Mobile Navigation Menu
**Priority:** P1 (High)
**Type:** UI/Responsive
**Devices:** Mobile (iPhone, Android)
### Objective
Verify navigation menu works correctly on mobile devices
### Preconditions
- Access from mobile device or responsive mode
- Viewport width: 375px (iPhone SE) to 428px (iPhone Pro Max)
### Test Steps
1. Open homepage on mobile device
**Expected:** Hamburger menu icon visible (top-right)
2. Tap hamburger icon
**Expected:**
- Menu slides in from right
- Overlay appears over content
- Close (X) button visible
3. Tap menu item
**Expected:** Navigate to section, menu closes
4. Compare against Figma mobile design [link]
**Expected:**
- Menu width: 280px
- Slide animation: 300ms ease-out
- Overlay opacity: 0.5, color #000000
- Font size: 16px, line-height 24px
### Breakpoints to Test
- 375px (iPhone SE)
- 390px (iPhone 14)
- 428px (iPhone 14 Pro Max)
- 360px (Galaxy S21)
Summary
This QA Test Planner skill provides:
- Structured test planning - Comprehensive test strategies
- Manual test case generation - Detailed, repeatable tests
- Regression testing - Protect against breaking changes
- Figma validation - Design-implementation verification
- Bug documentation - Clear, actionable reports
- Coverage analysis - Identify testing gaps
Remember: Quality is everyone's responsibility, but QA ensures it's systematically verified.
"Testing shows the presence, not the absence of bugs." - Edsger Dijkstra
"Quality is not an act, it is a habit." - Aristotle
