SideButton Dashboard Knowledge Pack Files

Run Logs — QA Test Playbook

Prerequisites

• SideButton server running on localhost:9876
• Browser extension connected
• Navigate to SPA root first (localhost:9876), then use in-app navigation
• At least one completed workflow run in history (for non-empty state tests)
• /run-logs has no sidebar nav entry — reach via Skills "View Run Logs" link or programmatic navigation

Phase 1: Run Log List — Page Load & Structure

#	Test	Method	Pass Criteria
1.1	Run Logs page loads	Navigate to /run-logs via Skills "View Run Logs" link	h1 "Run Logs" heading visible, no .loading-state spinner
1.2	Header elements	snapshot header	"Run Logs" heading + .item-count badge + "Clear All" .btn-secondary + .reload-btn visible
1.3	KPI stats bar	snapshot .kpi-bar	.kpi-hero-value (time saved today) + .kpi-time-breakdown (This Week / This Month / All Time) + .kpi-stats (Runs Today + Success Rate) visible
1.4	History cards	snapshot .run-list	At least one button.run-card with .run-header (title + StatusBadge) and .run-meta (run_id + duration + timestamp)
1.5	StatusBadge colors	screenshot .run-list	Success cards show green badge, failed cards show red badge

Phase 2: Run Log List — Navigation & Actions

#	Test	Method	Pass Criteria
2.1	Open completed run	Click button.run-card in history	Navigates to /run-logs/{id} — Run Log Detail view loads
2.2	Reload button	Click .reload-btn	Run logs and running workflows refetched. List content refreshes
2.3	Clear All — confirm flow	Click .btn-secondary "Clear All"	Button area replaced by inline .confirm-text "Clear all logs?" + .btn-danger "Yes, Clear" + .btn-secondary "Cancel"
2.4	Clear All — cancel	Click "Cancel" in confirm UI	Confirm UI dismissed, original "Clear All" button returns. No logs deleted
2.5	Clear All — execute	Click "Yes, Clear" .btn-danger	All logs deleted. .empty-state appears with "No Run History" heading

Phase 3: Run Log List — Empty State

#	Test	Method	Pass Criteria
3.1	Empty state content	Clear all logs or start fresh	.empty-state visible with clock SVG + h3 "No Run History" + "Workflow executions will appear here."
3.2	KPI bar absent	snapshot in empty state	.kpi-bar is NOT present in the DOM
3.3	Header still functional	snapshot header in empty state	"Run Logs" heading + .item-count badge (showing 0) + buttons still present

Phase 4: Run Log Detail — Page Load & Structure

#	Test	Method	Pass Criteria
4.1	Detail page loads	Click a .run-card from list	.run-info container with .title-row (h1 workflow title + StatusBadge) visible
4.2	Back button	snapshot header	.back-btn "Back" visible
4.3	Meta grid	snapshot .meta-grid	.meta-item cards for: Run ID, Workflow ID, Duration, Events, Triggered By, Timestamp
4.4	Events section	snapshot .events-container	h2 "Events ({count})" heading + .event-item rows with index, type, message
4.5	Event type colors	screenshot .events-container	.event-run (blue), .event-end (green), .event-step (gray), .event-error (red) correctly colored

Phase 5: Run Log Detail — Parameters & Delete

#	Test	Method	Pass Criteria
5.1	Parameters shown	Open detail of a run that had params	.params-list visible with .param-item cards (.param-name + .param-value)
5.2	Parameters absent	Open detail of a run without params	.params-list is NOT present in the DOM
5.3	Delete — confirm flow	Click Delete button in .header-actions	Inline confirm: .confirm-text "Delete this log?" + .btn-danger "Yes, Delete" + .btn-secondary "Cancel"
5.4	Delete — cancel	Click "Cancel"	Confirm dismissed, delete button returns. Log not deleted
5.5	Delete — execute	Click "Yes, Delete"	Log deleted, auto-navigates to run logs list
5.6	Back navigation	Click .back-btn "Back"	Navigates to /run-logs list view

Phase 6: Run Log Detail — Terminal States

#	Test	Method	Pass Criteria
6.1	Not found	Navigate to /run-logs/nonexistent-id	.not-found with text "Run log not found."
6.2	Loading state	Observe during fetch	.loading with text "Loading run log..." (may be transient)

Phase 7: Execution View — Live Monitoring

#	Test	Method	Pass Criteria
7.1	Execution starts	Trigger a workflow run, observe ExecutionView	.status.running badge (blue) with .pulse dot + .btn-stop visible
7.2	Back button disabled	snapshot during execution	.back-btn has disabled attribute while running
7.3	Waiting state	Observe before first event arrives	.empty-state with .spinner + "Waiting for execution events..."
7.4	Log entries stream	Observe after events arrive	.log-entry rows appearing with .log-time, .log-type, .log-message
7.5	Auto-scroll	Watch .log-container during streaming	Container scrolls to bottom as new entries arrive
7.6	Log type colors	screenshot .log-container	.log-run (blue), .log-success (green), .log-error (red), .log-step (gray), .log-result (purple)

Phase 8: Execution View — Stop & Complete

#	Test	Method	Pass Criteria
8.1	Stop execution	Click .btn-stop during running	stopWorkflow(runId) called; transitions to completed state
8.2	Completed state	Wait for workflow to finish naturally	.status.completed badge (green) + .btn-primary "Done" visible
8.3	Back button enabled	snapshot after completion	.back-btn no longer has disabled attribute
8.4	Done button	Click .btn-primary "Done"	Navigates back (to previous view)
8.5	Error banner	Trigger an error during execution	.error-banner visible with error message text

Phase 9: Running Workflows Section (Run Log List)

#	Test	Method	Pass Criteria
9.1	Running section visible	Start a workflow, navigate to /run-logs	h2 with .pulse dot + "Currently Running ({count})" heading visible
9.2	Running card	snapshot .running-list	button.running-card with .running-header (title + "running" StatusBadge) + .running-meta (run_id + started time)
9.3	Click running card	Click button.running-card	Opens ExecutionView with real-time log stream
9.4	History heading appears	snapshot with both running + history	h2 "History" heading rendered (only when running section also visible)
9.5	Auto-refresh on complete	Wait for running workflow to finish	History list refreshes after ~500ms delay; completed run appears

Automation Tips

• No sidebar nav entry: /run-logs is NOT in the left sidebar. Navigate via Skills page "View Run Logs" link, or use navigate(url) directly after loading the SPA root
• SPA-only navigation: Always load root / first, then navigate. Direct URL /run-logs returns Fastify 404 JSON if SPA shell isn't loaded
• Inline confirms, NOT window.confirm(): Both "Clear All" and "Delete" use in-page inline confirm UI (.confirm-text + .btn-danger + .btn-secondary). Must click through two-step sequence — no browser dialog to intercept
• ExecutionView has no URL: Cannot be deep-linked. Must be reached by clicking a .running-card or triggering a workflow execution. Navigating to any URL will NOT open it
• KPI bar is data-dependent: .kpi-bar is absent from the DOM when runs.length === 0. Do not assert its presence in empty-state tests
• History heading is conditional: h2 "History" only renders when there are also running workflows. Without running workflows, the list renders with no heading
• id vs run_id: Detail view URLs use RunLogMetadata.id (database record ID). Running workflows use run_id (execution handle). Different fields
• WebSocket refresh delay: When a running workflow completes, RunLogView waits 500ms before refetching. The history list may briefly lag
• Toast notifications: Success/error messages auto-hide after ~3s. Screenshot immediately after actions
• Event depth indentation: .event-item and .log-entry rows use depth field for left padding. Verify nested events are visually indented