SideButton Dashboard Knowledge Pack Files

Recordings — QA Test Playbook

Prerequisites

• SideButton server running on localhost:9876
• Browser extension connected (required for recording)
• Navigate to SPA root first, then use in-app navigation

Phase 1: Page Load & Structure

#	Test	Method	Pass Criteria
1.1	Recordings page loads	Navigate via sidebar button:has-text("Recordings")	"Recordings" heading with count badge
1.2	Start Recording button	snapshot header	Red "Start Recording" button visible
1.3	Reload button	snapshot header	"Reload" button visible
1.4	Empty state	No recordings saved	Red circle icon + "No Recordings Yet" heading

Phase 2: Browser Connection

#	Test	Method	Pass Criteria
2.1	Connected state	Extension connected	Start Recording button enabled, no warning banner
2.2	Disconnected state	Extension disconnected	Warning banner "Browser extension not connected", Start Recording disabled

Phase 3: Recording Flow

#	Test	Method	Pass Criteria
3.1	Start recording	Click "Start Recording"	Red pulse indicator + "Recording (0 events)" label appears. Stop button replaces Start
3.2	Event capture	Interact in browser while recording	Event count increments in real-time (WebSocket updates)
3.3	Stop recording	Click "Stop"	Recording saved. Navigates to new recording detail view
3.4	Recording appears in list	Navigate back to list	New recording card with ID, event count, timestamp

Phase 4: Recording List

#	Test	Method	Pass Criteria
4.1	Card display	snapshot recording list	Cards show recording ID (monospace), event count badge, "n events", relative timestamp
4.2	Navigate to detail	Click recording card	Detail view opens with event timeline
4.3	Count badge in header	snapshot header	Total recording count shown in badge after "Recordings"

Phase 5: Recording Detail

#	Test	Method	Pass Criteria
5.1	Detail structure	snapshot detail view	Back button, recording ID, timestamp, event count visible
5.2	Event timeline	snapshot events section	Numbered events with color-coded type labels and details
5.3	Event types color-coded	Visual inspection	navigate=blue, click=green, input=purple, scroll=amber
5.4	Raw JSON section	Scroll to bottom	Complete JSON of recording in scrollable section (max-height 400px)
5.5	Back navigation	Click "Back" button	Returns to recordings list

Phase 6: Detail Actions

#	Test	Method	Pass Criteria
6.1	Delete recording	Click "Delete" in detail view	Confirmation prompt. On confirm, recording removed, returns to list
6.2	Save as Workflow	Click "Save as Workflow"	Basic YAML workflow created from recording events
6.3	Convert with AI	Click "Convert with AI"	LLM-enhanced conversion. Disabled if no API key configured

Automation Tips

• Browser extension required: Cannot test recording flow without connected extension. Check sidebar status indicator first
• WebSocket for live updates: Dashboard connects via ws://localhost:9876/ws/dashboard — event count updates in real-time
• Relative timestamps: "just now", "5m ago", "2h ago" — refreshes only on page load
• Delete may use native confirm: Confirmation could be browser confirm() dialog
• AI conversion needs LLM config: "Convert with AI" button disabled without API key in Settings > LLM Provider
• Recording detail is separate view: /recordings/{id} renders RecordingDetailView.svelte, not a sub-state of list