test: Comprehensive E2E test suite — full CDP click-through coverage by ParkerM2 · Pull Request #61 · ParkerM2/Agentic-Desktop-Command

ParkerM2 · 2026-02-20T06:49:05Z

Summary

Rewrote the entire E2E test suite from scratch — 15 spec files covering all 24 routes
Every test uses real Playwright/CDP clicks — zero page.evaluate() for navigation, zero pushState, zero programmatic routing
Patient, methodical coverage: auth flow, sidebar navigation, sidebar mechanics, dashboard, briefing, my work, notes, fitness/planner/productivity, alerts/comms, project management, project-scoped pages (9 sub-routes), settings (every section), global overlays + keyboard shortcuts, theme visual verification, full smoke flow
Deleted 9 old spec files that used programmatic navigation
Created shared helpers: navigation.ts (click-only nav), page-helpers.ts (interaction patterns)
Added screenshot capture at 13 visual checkpoints across 5 test files for PR review evidence
Added post-test script (scripts/post-e2e-screenshots.sh) that commits screenshots and posts an image gallery to the PR description

Bug Fixes (3 critical UI issues)

Fix 1: Production Routing — Hash History

Problem: TanStack Router uses browser pushState() by default. Electron production builds load via file:// protocol where pushState doesn't work, causing "Not Found" on every route.
Fix: Added createHashHistory() from TanStack Router. URLs now use /#/path format which works on both file:// and http:// protocols.
File: src/renderer/app/router.tsx

Fix 2: Sidebar Expand/Collapse

Problem: react-resizable-panels Panel had minSize="56px" matching collapsedSize="56px", so panel.expand() expanded to the minimum which looked identical to collapsed. Also used bg-card instead of bg-sidebar.
Fix: Changed minSize to "160px" creating proper gap between collapsed (56px) and minimum expanded (160px). Switched to bg-sidebar + text-sidebar-foreground.
Files: src/renderer/app/layouts/RootLayout.tsx, src/renderer/app/layouts/Sidebar.tsx

Fix 3: AG-Grid Dark Mode Theming

Problem: AG-Grid task grid had white background in dark mode despite CSS variable overrides. Tailwind v4 CSS layer ordering caused ag-theme-quartz defaults to win.
Fix: Added all missing CSS variables (--ag-data-background-color, --ag-secondary-foreground-color, etc.), color-scheme: dark for native scrollbar styling, and !important on explicit background overrides for every AG-Grid internal container element.
Files: src/renderer/features/tasks/components/grid/ag-grid-theme.css, TaskDataGrid.tsx

Test Files (15)

File	Coverage
`01-auth.spec.ts`	Login, register, validation, error states
`02-navigation-sweep.spec.ts`	Click every sidebar item, verify route loads
`03-sidebar-mechanics.spec.ts`	Collapse/expand, active states, persist
`04-dashboard.spec.ts`	QuickCapture, RecentProjects, stats cards
`05-briefing.spec.ts`	Generate button, stats/empty state
`06-my-work.spec.ts`	Status filter tabs, task display
`07-notes.spec.ts`	Split panel, note CRUD, editor
`08-personal-tools.spec.ts`	Fitness tabs, Planner nav, Productivity
`09-alerts-comms.spec.ts`	Alert tabs/modal, Communications tabs
`10-project-management.spec.ts`	TopBar +, Init Wizard, New Project wizard
`11-project-scoped-pages.spec.ts`	All 9 project sub-pages (AG-Grid, terminals, etc.)
`12-settings-full.spec.ts`	Every settings section, theme switching
`13-global-overlays.spec.ts`	CommandBar, AssistantWidget, Ctrl+K/J
`14-theme-visual.spec.ts`	Computed style verification across themes
`15-smoke-flow.spec.ts`	Full app walkthrough in one test

Verification

npm run lint       ✅ 0 errors (27 warnings — all react-refresh)
npm run typecheck  ✅ 0 errors
npm run test       ✅ 156 passing
npm run build      ✅ Success

Test plan

Run npm run test:e2e with .env.test credentials to execute the full suite
Verify all 15 spec files pass against running app
Verify sidebar expand shows full labels, collapse shows icon-only
Verify AG-Grid has dark background matching theme (not white)
Verify production build routes work (no "Not Found")

🤖 Generated with Claude Code

E2E Screenshots (After Fixes)

Dashboard — Expanded Sidebar

Sidebar — Collapsed (Icon-Only)

Sidebar — Re-Expanded

AG-Grid Task View (with Detail Row)

Settings Page

…click-only navigation - Delete 9 old spec files that used programmatic navigation (pushState, location.hash) - Rewrite helpers/navigation.ts with click-only patterns (real sidebar button clicks) - Create helpers/page-helpers.ts with shared interaction patterns (tabs, modals, forms) - Update electron.setup.ts with dotenv loading for .env.test credentials Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Covers login page rendering, empty form submission validation, register link navigation, register page fields, back-to-login navigation, Hub setup link presence, successful login with redirect to dashboard, and console error assertions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

10 tests covering all dashboard widgets: - Dashboard loads after login, greeting header, QuickCapture CRUD, RecentProjects, DailyStats, ActiveAgents, error boundary check, and console error monitoring. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Covers Alerts page (tabs, create modal open/close, alert actions) and Communications page (Overview/Slack/Discord/Rules tabs, panel content, non-blank rendering). Uses authenticatedWindow fixture and console error collector. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

02-navigation-sweep.spec.ts — 12 tests covering every top-level sidebar nav item click, Settings click, full sequential sweep with console error assertion, and page content verification. 03-sidebar-mechanics.spec.ts — 9 tests covering sidebar visibility, collapse/expand toggle, active state highlighting, active state change on navigation, Settings footer placement, sidebar persistence across pages, project-scoped items disabled state, and console error checks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Covers page load, interactive elements, content states, and console error checks for the three content pages (05-briefing, 06-my-work, 07-notes). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

13-global-overlays.spec.ts covers: - CommandBar: visible in TopBar, accepts text, Escape clears/blurs, Ctrl+K focuses, no console errors - Assistant Widget: FAB visible, click opens panel, chat input visible, type in chat, close via button, Ctrl+J toggle, no console errors Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

19 tests covering all Settings page sections: - Navigation to settings via sidebar footer - Appearance mode toggling (Light/Dark/System) - Color theme switching (Ocean, Forest, Oscura default) - data-theme attribute verification on html element - UI Scale range input visibility - Typography font family dropdown and font size slider - Language section (English) - Hub Connection section - Profiles section - Storage Management section - About section with ADC version - Reset defaults (Dark + Oscura) - Console error sweep during interaction Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Covers 08-personal-tools.spec.ts with three describe blocks: - Fitness: page load, tab visibility, tab switching, Log Workout button, no console errors - Planner: page load, date nav, Day/Week toggle, Today button, Weekly Review navigation, back to Daily, no console errors - Productivity: page load, tab visibility, tab switching, no console errors All navigation via real sidebar clicks using authenticatedWindow fixture. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

12 tests covering TopBar navigation to projects, page header, Init Wizard and Create Project wizard open/close, step indicators, empty/populated project list states, project row click navigation, TopBar project tabs, and console error assertions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Single sequential canary test that walks the entire app: - Dashboard verification after login - All 9 top-level sidebar nav items with URL + content checks - Projects list via TopBar, open first project if available - All 9 project-scoped sidebar items (conditional on project) - Settings with Ocean/Oscura theme switching - Keyboard shortcuts (Ctrl+K CommandBar, Ctrl+J Assistant) - Return to Dashboard, assert clean console Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Verifies computed style changes across theme and mode switches: - Default dark mode (class="dark", no data-theme) - Ocean theme sidebar background differs from default - Forest theme card background differs from Ocean - Light mode body background differs from dark mode - Dark mode restores correctly after toggling - Reset defaults (Oscura + dark) removes data-theme - No console errors during full theme cycle Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ec.ts Covers all 9 project-scoped pages (Tasks, Terminals, Agents, Pipeline, Roadmap, Ideation, GitHub, Changelog, Insights) with graceful empty-state handling and console error assertion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add screenshot helper (tests/e2e/helpers/screenshot.ts) with takeScreenshot() and takeFullPageScreenshot() functions - Add 13 screenshot captures across 5 E2E test files at visual checkpoints: sidebar states, dashboard layout, theme switching, light/dark modes, and smoke flow milestones - Add post-e2e-screenshots.sh script that commits screenshots and posts an image gallery to the PR description via gh CLI - Add test:e2e:report npm script combining test run + gallery post - Add tests/e2e/screenshots/ to .gitignore (force-added on branches) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Electron production builds serve the renderer via file:// protocol, which doesn't support browser pushState history. Switch TanStack Router to createHashHistory() so routes resolve correctly in packaged builds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…r theme var - RootLayout: change Panel minSize from "56px" to "160px" so expand() reveals labels - Sidebar: use bg-sidebar text-sidebar-foreground instead of bg-card for proper theme variable usage - Update FEATURES-INDEX.md and user-interface-flow.md to reflect sidebar changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…+ viewport overrides Add --ag-data-background-color (critical for dark mode data viewport), --ag-secondary-border-color, --ag-input-border-color, text variables, panel/menu variables, color-scheme: dark for native scrollbars, and explicit .ag-root-wrapper/.ag-body-viewport background fallbacks. Update ai-docs/PATTERNS.md AG-Grid theming section with full variable catalog and dark mode rules. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… history

…sidebar

Replace __dirname (not available in ESM) with dirname(fileURLToPath(import.meta.url)). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The initial CSS variable overrides were being defeated by Tailwind v4's CSS layer ordering. Added !important to all AG-Grid container background declarations and expanded coverage to every internal element (root-wrapper, root-wrapper-body, root, body, body-viewport, center-cols-viewport, center-cols-container). Also added bg-card Tailwind utility on the wrapper div as belt-and-suspenders. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Captures 6 screenshots via CDP WebSocket: - Dashboard with expanded sidebar - Dashboard with collapsed sidebar (icon-only) - Sidebar re-expanded - AG-Grid task view with detail row - Settings page - Dashboard initial state Also adds scripts/capture-screenshots.mjs for future captures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ParkerES and others added 30 commits February 20, 2026 01:36

test: add E2E specs for Briefing, My Work, and Notes pages

a4e4382

Covers page load, interactive elements, content states, and console error checks for the three content pages (05-briefing, 06-my-work, 07-notes). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge work/e2e-suite/auth-tests: E2E tests

32599f4

Merge work/e2e-suite/nav-tests: E2E tests

3c58bb2

Merge work/e2e-suite/dashboard-tests: E2E tests

28605b7

Merge work/e2e-suite/briefing-work-notes: E2E tests

1f2778c

Merge work/e2e-suite/personal-tools: E2E tests

6d9a694

Merge work/e2e-suite/alerts-comms: E2E tests

b222c11

Merge work/e2e-suite/project-mgmt: E2E tests

a154f12

Merge work/e2e-suite/settings-full: E2E tests

e0965db

Merge work/e2e-suite/overlays: E2E tests

085432d

Merge work/e2e-suite/project-scoped: E2E tests

4f57949

Merge work/e2e-suite/theme-visual: E2E tests

fcf37bd

Merge work/e2e-suite/smoke-flow: E2E tests

e545385

Merge work/ui-fixes-r2/hash-routing: Fix production routing with hash…

3c67d79

… history

ParkerES and others added 5 commits February 20, 2026 03:01

Merge work/ui-fixes-r2/sidebar-fix: Fix sidebar expand/collapse + bg-…

d535a22

…sidebar

Merge work/ui-fixes-r2/ag-grid-theme: Fix AG-Grid dark mode theming

29f6ba3

fix: use ESM-compatible import.meta.url in screenshot helper

a202218

Replace __dirname (not available in ESM) with dirname(fileURLToPath(import.meta.url)). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ParkerM2 merged commit 40df684 into master Feb 20, 2026
8 checks passed

ParkerM2 deleted the feature/comprehensive-e2e-suite branch February 22, 2026 22:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: Comprehensive E2E test suite — full CDP click-through coverage#61

test: Comprehensive E2E test suite — full CDP click-through coverage#61
ParkerM2 merged 35 commits intomasterfrom
feature/comprehensive-e2e-suite

ParkerM2 commented Feb 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ParkerM2 commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Bug Fixes (3 critical UI issues)

Fix 1: Production Routing — Hash History

Fix 2: Sidebar Expand/Collapse

Fix 3: AG-Grid Dark Mode Theming

Test Files (15)

Verification

Test plan

E2E Screenshots (After Fixes)

Dashboard — Expanded Sidebar

Sidebar — Collapsed (Icon-Only)

Sidebar — Re-Expanded

AG-Grid Task View (with Detail Row)

Settings Page

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ParkerM2 commented Feb 20, 2026 •

edited

Loading