qa-element-extraction

QA Element Extraction Skill

Capture targeted screenshots of UI elements referenced in test procedures to create visual documentation.

Purpose

When a test step says "Click the Login button", capture a screenshot of that specific button so testers know exactly what to look for. This creates a visual glossary alongside full-page screenshots.

Element Screenshot Directory

qa-tests/
├── active/
│   └── QA-20250105-001-login.md        # QA test document
└── screenshots/
    └── QA-20250105-001/                 # Matches test-id
        ├── 01-initial-state.png         # Full page screenshots
        ├── 02-form-filled.png
        ├── 03-success-state.png
        └── elements/                     # Extracted UI elements
            ├── login-button.png
            ├── email-field.png
            └── password-field.png

Note: The {test-id} folder name (e.g., QA-20250105-001) matches the QA test document filename.

Element Extraction Process

Step 1: Parse Test Procedure

Identify actionable elements from test steps:

Test Step Text	Element to Extract
"Click the Login button"	Login button
"Enter email in the Email field"	Email input field
"Select Settings from dropdown"	Settings menu item
"Check the Remember me checkbox"	Remember me checkbox
"Click the hamburger menu icon"	Hamburger menu icon

Step 2: Element Identification Patterns

Look for these patterns in test steps:

Action + "the" + [Element Name] + element type

Action verbs to scan:

• Click, Tap, Press
• Enter, Type, Input
• Select, Choose, Pick
• Check, Uncheck, Toggle
• Hover, Focus
• Drag, Drop
• Scroll to

Element type keywords:

• button, btn, link
• field, input, textbox
• dropdown, select, combobox
• checkbox, radio, toggle
• icon, image, logo
• menu, nav, tab
• modal, dialog, popup
• card, tile, panel

Step 3: Capture Element

Using Playwright MCP:

// Find element by accessible name or text
const element = page.getByRole('button', { name: 'Login' });

// Capture just this element
await element.screenshot({
  path: 'qa-tests/screenshots/QA-20250105-001/elements/login-button.png'
});