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

•

보안 및 테스팅

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.

주요 기능

Consistent naming conventions and directory structures for test-specific assets
Automatic generation of visual reference tables within test documentation
Targeted element screenshot capture with customizable padding using Playwright
Support for multiple element states including hover, focus, and disabled
2 GitHub stars
Automated parsing of test procedures to identify actionable UI elements

사용 사례

Documenting UI changes for developers and designers during regression testing
Generating visual glossaries for complex enterprise software test suites
Standardizing screenshot assets for manual QA teams and onboarding guides

소개

주요 기능

Consistent naming conventions and directory structures for test-specific assets
Automatic generation of visual reference tables within test documentation
Targeted element screenshot capture with customizable padding using Playwright
Support for multiple element states including hover, focus, and disabled
2 GitHub stars
Automated parsing of test procedures to identify actionable UI elements

사용 사례

Documenting UI changes for developers and designers during regression testing
Generating visual glossaries for complex enterprise software test suites
Standardizing screenshot assets for manual QA teams and onboarding guides