What technology is used for the element extraction?

The skill utilizes the Playwright MCP to interact with the browser's accessibility tree and DOM to locate and screenshot elements by role, text, or test ID.

Does it capture the whole page or just the specific UI element?

It captures the specific targeted element with 8-16px of padding, providing a clear visual reference without the clutter of a full-page screenshot.

How does the skill identify which elements to capture?

The skill parses test steps for action verbs and element keywords, looking for specific patterns like 'Click the [Element Name] button' or 'Select [Option] from dropdown'.

Can it handle different interactive states like hover or focus?

Yes, the skill can be configured to capture multiple states (default, hover, focus, and disabled) to provide a complete visual profile of interactive components.

QA Element Extraction

Name: QA Element Extraction
Author: jpoutrin

byjpoutrin

•

Security & Testing

Automates the capture of specific UI component screenshots from QA test procedures to create clear visual documentation.

The QA Element Extraction skill streamlines the creation of visual glossaries and test documentation by automatically identifying and isolating UI elements referenced in test steps. By parsing action-oriented language—such as 'Click the Login button'—it uses Playwright to capture specific buttons, fields, and icons with consistent padding and naming conventions. This capability is essential for teams looking to build comprehensive element libraries, ensuring that manual testers, developers, and stakeholders can instantly identify the exact components involved in any given test case.

Key Features

01Consistent naming conventions and directory structures for test-specific assets

02Automatic generation of visual reference tables within test documentation

03Targeted element screenshot capture with customizable padding using Playwright

04Support for multiple element states including hover, focus, and disabled

052 GitHub stars

06Automated parsing of test procedures to identify actionable UI elements

Use Cases

01Documenting UI changes for developers and designers during regression testing

02Generating visual glossaries for complex enterprise software test suites

03Standardizing screenshot assets for manual QA teams and onboarding guides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge qa-element-extraction

For use in Claude.ai and ChatGPT

Download Skill