qa-screenshot-management

QA Screenshot Management Skill

Standardize screenshot capture and organization during QA testing.

Directory Structure

qa-tests/
├── draft/                           # QA test documents by status
├── active/
├── executed/
├── archived/
└── screenshots/
    ├── {test-id}/                   # e.g., QA-20250105-001
    │   ├── 01-initial-state.png     # Numbered sequence
    │   ├── 02-form-filled.png
    │   ├── 03-success-state.png
    │   └── elements/                # Extracted UI elements
    │       ├── login-button.png
    │       ├── email-field.png
    │       └── password-field.png
    ├── baseline/                    # Reference screenshots for comparison
    │   └── {feature}/
    │       └── {state}.png
    └── failures/                    # Failed test evidence
        └── {date}/
            └── {test-id}-{timestamp}.png

Key: Screenshots are stored in qa-tests/screenshots/{test-id}/ where {test-id} matches the QA test document name (e.g., QA-20250105-001).

Naming Convention

Format

{sequence}-{state-description}.{png|jpeg}

Sequence Numbers

• 01- through 99- for ordered steps
• Preserves execution order in file listings

State Descriptions

Use descriptive, kebab-case names:

State	Example Filename
Initial page load	01-initial-state.png
After form fill	02-form-filled.png
Validation error	03-validation-error.png
Success message	04-success-message.png
Modal open	05-modal-open.png
Dropdown expanded	06-dropdown-expanded.png

Bad vs Good Names

Bad	Good
screenshot1.png	01-login-page-loaded.png
test.png	02-credentials-entered.png
error.png	03-invalid-password-error.png
final.png	04-dashboard-after-login.png

When to Capture Screenshots

Always Capture

1. Initial State - Before any test actions
2. After Critical Actions - Form submissions, navigation
3. Error States - Any validation or system errors
4. Success States - Confirmation messages, completed flows
5. Final State - End of test case