Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
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.
Activation: This skill is triggered only when explicitly called by name (e.g., /qa-test-planner, qa-test-planner, or use the skill qa-test-planner).
Quick Start
Create a test plan:
"Create a test plan for the user authentication feature"
Generate test cases:
"Generate manual test cases for the checkout flow"
Build regression suite:
"Build a regression test suite for the payment module"
Validate against Figma:
<details>
<summary><strong>Deep Dive: Test Case Structure</strong></summary>
</details>
<details>
<summary><strong>Deep Dive: Test Plan Template</strong></summary>
</details>
<details>
<summary><strong>Deep Dive: Bug Reporting</strong></summary>
</details>
<details>
<summary><strong>Deep Dive: Figma MCP Integration</strong></summary>
</details>
<details>
<summary><strong>Deep Dive: Regression Testing</strong></summary>
</details>
<details>
<summary><strong>Deep Dive: Test Execution Tracking</strong></summary>
</details>
<details>
<summary><strong>QA Process Workflow</strong></summary>
</details>
<details>
<summary><strong>Best Practices</strong></summary>
</details>
<details>
<summary><strong>Example: Login Flow Test Case</strong></summary>
</details>
<details>
<summary><strong>Example: Responsive Design Test Case</strong></summary>
</details>
"Compare the login page against the Figma design at [URL]"
Create bug report:
"Create a bug report for the form validation issue"
Quick Reference
Task
What You Get
Time
Test Plan
Strategy, scope, schedule, risks
10-15 min
Test Cases
Step-by-step instructions, expected results
5-10 min each
Regression Suite
Smoke tests, critical paths, execution order
15-20 min
Figma Validation
Design-implementation comparison, discrepancy list
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]
What to Validate
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
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"
## 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 ([email protected] / 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: [email protected]
**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
### 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
## 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)
"Testing shows the presence, not the absence of bugs." - Edsger Dijkstra
"Quality is not an act, it is a habit." - Aristotle