Element Extraction

Element extraction is part of the Discovery step. It extracts interactive elements from your discovered pages.

Overview

Element Extraction visits each page and identifies interactive elements:

Buttons and links
Form inputs (text, email, password, etc.)
Select dropdowns
Checkboxes and radio buttons
Textareas
Embedded iframes with forms

Running Element Extraction

Starting Extraction

Navigate to the Discovery step (Pages)
Ensure pages have been discovered (status shows page count)
Click "Extract Elements"
Wait for the job to complete

Understanding Elements

Element Types

Type	Description	Examples
`link`	Clickable links	Navigation, external links
`button`	Action buttons	Submit, cancel, toggle
`input`	Text inputs	Name, email, search
`select`	Dropdown menus	Country picker, filters
`checkbox`	Toggle options	Terms acceptance
`radio`	Single-select options	Payment method
`textarea`	Multi-line text	Message, comments

Element Importance

QAID classifies elements by importance:

Level	Meaning	Example
Primary	Core functionality	Submit button, main navigation
Secondary	Supporting features	Secondary actions, filters
Tertiary	Minor interactions	Social links, minor toggles

Selectors

Each element has multiple selector strategies:

Role-based (preferred): getByRole('button', { name: 'Submit' })
Test ID: getByTestId('submit-btn')
Label: getByLabel('Email Address')
CSS: button.submit-button

QAID prefers role-based selectors for stability.

Viewing Elements

Statistics Dashboard

The Elements step shows aggregate statistics:

Total elements discovered
Breakdown by type (with counts)
Breakdown by importance
Quality issues found

View Modes

By Type Groups elements by their type (link, button, input, etc.). Each group shows:

Type icon and count
Expandable list of elements
Element details on hover

By Page Groups elements by their source page:

Page URL as header
Elements listed under each page
Useful for page-specific analysis

Filtering Elements

Use filters to find specific elements:

Filter	Options
Type	All, Link, Button, Input, etc.
Importance	All, Primary, Secondary, Tertiary
Search	Text search across element labels

Element Details

Click an element to see:

Label/Text: Visible text on the element
Type: Element type
Importance: Primary/Secondary/Tertiary
Selectors: All generated selectors
Page: Source page URL
Attributes: HTML attributes

Quality Issues

The Quality Issues tab shows problems detected during extraction:

Issue Types

Issue	Description	Impact
Missing Alt Text	Images without alt attributes	Accessibility
Missing Labels	Form inputs without labels	Accessibility, Testability
Duplicate IDs	Multiple elements with same ID	Selector reliability
Broken Links	Links pointing to 404 pages	User experience
Empty Buttons	Buttons with no text/label	Accessibility

Reviewing Issues

Click the Quality Issues tab
Issues are grouped by page
Each issue shows:
- Issue type
- Affected element
- Recommendation
Use this to improve your application

Iframe Handling

QAID detects and extracts elements from iframes:

Supported Iframes

Same-origin iframes
Named iframes
HubSpot forms
Embedded widgets

Cross-Origin Limitations

Some iframes cannot be scanned:

Different domain without CORS headers
Sandboxed iframes
Third-party payment forms

Re-running Extraction

You can re-run extraction at any time:

Click "Extract Elements" again
QAID compares with existing elements:
- New elements are added
- Changed elements are updated
- Missing elements are marked for review

When to Re-run

After adding new pages
When your site UI changes
After significant code deployments
When element tests fail unexpectedly

Exporting Elements

Export element data for external analysis:

Click "Export"
Choose format (CSV, JSON)
Download the file

Export includes:

All element details
Selectors
Page associations
Importance classifications

Best Practices

Before Extraction

Complete page discovery first
Blacklist pages you don't want to test
Configure authentication if needed

Improving Element Quality

Add data-testid attributes to key elements
Use semantic HTML (<button>, <nav>, <main>)
Ensure proper form labels
Avoid generic class names

Managing Large Element Sets

Use filters to focus on specific types
Prioritize Primary importance elements
Review Quality Issues and fix underlying problems

Troubleshooting

Elements Not Being Detected

Possible causes:

Element is in Shadow DOM (not supported)
Element appears after complex user interactions
Element is hidden until scrolled into view

Solutions:

QAID automatically detects and expands dropdown menus during crawling
Runtime element discovery handles menus/tabs during test execution
Use recording feature to capture complex interactive sequences
Check if element is in a cross-origin iframe
Verify element is visible on page load or behind a simple menu

Wrong Selectors Generated

Symptoms:

Tests fail with "element not found"
Multiple elements match selector

Solutions:

Add unique data-testid attributes
Use more specific HTML structure
Check for duplicate elements

Missing Form Elements

Check:

Is the form in an iframe?
Does the form require JavaScript to render?
Is authentication required to see the form?

Page Discovery - Finding pages first
Automated Tests - Generating tests from discovered elements
Bug Detection - Finding application bugs

Page Discovery

Previous Page

Bug Detection

Next Page