qa-element-extraction

What problem does it solves?

Providing clear visual references for UI elements in QA test steps is essential for unambiguous testing, but manually capturing and organizing these can be tedious and inconsistent. This Skill automates the extraction and capture of specific UI element screenshots.

Core Features & Use Cases

• Element Screenshot Directory: Standardized directory structure (qa-tests/screenshots/{test-id}/elements/) for organizing extracted UI elements.
• Element Extraction Process: Identifies actionable elements from test steps, uses Playwright to locate and capture specific UI elements.
• Screenshot Specifications: Defines image requirements (format, padding, background, state) and capture states (default, hover, focus, disabled).
• Element Reference Table: Generates a visual reference table in the test procedure, linking elements to their screenshots and selectors.
• Playwright Commands: Provides specific Playwright commands for capturing elements by role, name, text content, or test ID.
• Use Case: Generating visual references for a new QA test procedure, capturing screenshots of specific buttons or input fields, building a reusable UI element glossary, or integrating element extraction into an automated testing workflow.

Quick Start

Use the qa-element-extraction skill to generate Playwright code to capture a screenshot of a 'Login button' by its accessible name.