Element Library

​

Purpose

• Store every captured element with rich metadata.
• Provide fast search, filtering, and tagging.
• Centralize stability scoring and selector updates.

​

Primary users

• QA teams tracking element stability over time.
• Engineers debugging regressions.
• Product teams triaging issues with concrete UI evidence.

​

Plan limits

​

Entry points

• Project dashboard
• Elements list view
• Search and filter results

​

Core workflows

• Browse elements by project and tags.
• Inspect element details for selectors and context.
• Update metadata, add notes, and share.
• Generate test code snippets.

​

Page structure (web app)

​

1. Elements list

• Search bar with filters and tags
• Sort by stability, recency, or usage
• Grid or table view
• Quick actions: bookmark, share, copy selector

​

2. Element detail view

• Overview tab: preview, selectors, stability score
• Console & logs: captured logs with filters
• CSS & styles: computed styles and layout
• Variations: alternate selectors and fallbacks
• Testing: code generation and waits

​

3. Collaboration panel

• Notes and comments
• Activity timeline
• Ownership and assignment

​

Data model

• Element identifiers and project linkage
• Selector set with confidence levels
• Stability score with risk factors
• Attributes, text, and computed styles
• Captured screenshots and URLs
• Usage history and last activity timestamp

​

Key actions

• Bookmark and share elements
• Export selectors or code snippets
• Create bug reports from element context
• Add tags and classify stability

​

Performance expectations

• Fast search and filtering
• Responsive grid and detail load
• Smooth transitions between tabs

​

Known limits

• Very large style payloads are summarized
• Screenshot size limits apply to keep pages fast