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

markdown

## 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

Requirements documented
Designs finalized
Test environment ready
Test data prepared
Build deployed to test environment

Exit Criteria

All high-priority test cases executed
90%+ test case pass rate
All critical bugs fixed
No open high-severity bugs
Regression suite passed
Stakeholder sign-off

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:

Retrieve spacing values from design
Verify color palette matches
Check typography specifications
Validate component states (hover, active, disabled)
Confirm breakpoint behavior
Review iconography and assets
Check accessibility annotations

Bug Reporting Best Practices

Effective Bug Report Template

markdown

# 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

markdown

# 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

bash

./scripts/generate_test_plan.sh

Interactive workflow for creating comprehensive test plans.

Generate Manual Test Cases

bash

./scripts/generate_test_cases.sh

Create manual test cases for features with step-by-step instructions.

Build Regression Suite

bash

./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

bash

./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

Review requirements and designs
Create test plan
Identify test scenarios
Estimate effort and timeline
Set up test environment

2. Test Design Phase

Write test cases
Review test cases with team
Prepare test data
Build regression suite
Get Figma design access

3. Test Execution Phase

Execute test cases
Log bugs with clear reproduction steps
Validate against Figma designs (UI tests)
Track test progress
Communicate blockers

4. Reporting Phase

Compile test results
Analyze coverage
Document risks
Provide go/no-go recommendation
Archive test artifacts

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:

bash

# Follow Figma MCP installation instructions
# Configure with your Figma API token
# Set file access permissions

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

markdown

## 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

markdown

## 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

qa-test-planner

NPX Install

SKILL.md Content

QA Test Planner

What This Skill Does

Why You Need This Skill

Core Components

1. Test Plan Generator

2. Manual Test Case Generator

3. Regression Test Suite Builder

4. Figma Design Validation (with MCP)

5. Bug Report Generator

Test Case Structure

Standard Test Case Format

Test Plan Template

Executive Summary

Test Scope

Test Strategy

Test Environment

Entry Criteria

Exit Criteria

Risk Assessment

Test Deliverables

Test Types and Approaches

1. Functional Testing

2. UI/Visual Testing

3. Regression Testing

4. Integration Testing

5. Exploratory Testing

Figma MCP Integration

Design Validation Workflow

Design-Dev Handoff Checklist

Bug Reporting Best Practices

Effective Bug Report Template

Bug Severity Definitions

Test Coverage Analysis

Coverage Metrics

Coverage Matrix

Regression Test Suite Structure

Smoke Test Suite (15-30 min)

Full Regression Suite (2-4 hours)

Targeted Regression (30-60 min)

Test Execution Tracking

Test Run Template

Using This Skill

Generate Test Plan

Generate Manual Test Cases

Build Regression Suite

Validate Design with Figma

Create Bug Report

Access Templates

QA Process Workflow

1. Planning Phase

2. Test Design Phase

3. Test Execution Phase

4. Reporting Phase

Best Practices

Test Case Writing

Bug Reporting

Regression Testing

Figma MCP Setup

Configuration

Test Case Examples

Example 1: Login Flow

Example 2: Responsive Design Validation

Summary