qa-screenshot-management

Capture and organize QA screenshots with standardized naming and directory structures.

14|1|Updated Dec 5, 2025
One-click install
npx skills add https://github.com/jpoutrin/product-forge --skill qa-screenshot-management
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: qa-screenshot-management
Source: https://github.com/jpoutrin/product-forge/tree/main/plugins/product-design/skills/qa-screenshot-management
Command: npx skills add https://github.com/jpoutrin/product-forge --skill qa-screenshot-management

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves?

Managing and organizing screenshots captured during QA testing with consistent naming, structured directories, and clear traceability to test cases is essential for effective bug reporting and documentation. Without proper management, visual evidence can be chaotic. This Skill standardizes screenshot capture and organization.

Core Features & Use Cases

  • Directory Structure: Standardized organization of screenshots by test ID, including separate directories for baseline references and failures.
  • Naming Convention: A clear format ({sequence}-{state-description}.{png|jpeg}) for descriptive and ordered screenshot filenames.
  • When to Capture: Guidelines for always capturing initial states, critical actions, error states, success states, and final states.
  • Playwright Commands: Specific Playwright commands for basic, full-page, and element-specific screenshot captures.
  • Visual Comparison Strategy: Guidance on creating baselines, comparing current states, and handling acceptable differences for visual regression testing.
  • Use Case: Capturing screenshots during a test run and organizing them by test ID, creating a baseline for visual regression testing, documenting a failed test with relevant screenshots, or organizing responsive screenshots by breakpoint.

Quick Start

Use the qa-screenshot-management skill to generate a Playwright command to capture a full-page screenshot named 01-initial-state.png.

Frequently Asked Questions about qa-screenshot-management

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I organize screenshots captured during Playwright testing?

Organize screenshots by test ID into standardized directories with separate folders for baseline references and failures. Use a consistent naming format like `{sequence}-{state-description}.{png|jpeg}` to track initial states, user interactions, validation errors, and success states for clear traceability back to test cases.

What's the best way to capture full-page screenshots in Playwright for visual testing?

Playwright provides specific commands for basic, full-page, and element-specific screenshot captures. Full-page captures are ideal for visual regression testing and cross-browser comparisons. Combine full-page captures with a baseline management strategy to detect visual differences across test runs.

How do I create and maintain baseline screenshots for visual regression testing?

Establish baselines by capturing reference screenshots during initial test runs and storing them separately from failure screenshots. Compare current states against baselines to identify visual regressions, handling acceptable differences systematically for consistent visual evidence across web and mobile interfaces.

Can I use screenshot management for cross-browser and responsive testing?

Yes. Capture and organize screenshots across different browsers and device breakpoints to document responsive design behavior and cross-browser consistency. Store these organized by test ID with descriptive naming, enabling comparison of interface states across different environments.

What screenshots should I capture during a QA test run?

Capture initial states before any interaction, critical user actions, validation error states, success confirmations, and final states. This comprehensive evidence trail ensures bug reports include relevant context, supports documentation, and enables traceability from visual state back to specific test cases.

Why is standardized screenshot naming important for bug reporting?

Standardized naming conventions make screenshots discoverable, orderable, and self-documenting. A consistent format like `{sequence}-{state-description}.{png|jpeg}` eliminates confusion, accelerates bug report creation, and ensures test evidence remains traceable and organized across multiple test executions.