mirror of https://github.com/Ark0N/Codeman.git synced 2026-09-30 12:39:42 +02:00

Files

T

arkonandClaude Opus 4.5 bf41dab827 feat: UI improvements and E2E testing with agent-browser

- Move font controls (A+/A-) to left of connection status
- Redesign tab count with stepper buttons (−/number/+)
- Remove respawn panel, integrate settings into session options modal
- Fix Monitor panel SSE handler (wrong element ID)
- Add screen wrapping support to Session class
- Add E2E testing skill using agent-browser
- Document testing approach in README.md and CLAUDE.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-19 03:40:57 +01:00

3.1 KiB

Raw Blame History

E2E Testing with Agent-Browser

This skill uses agent-browser to perform end-to-end testing of the Claudeman web interface.

Usage

When this skill is invoked, run comprehensive E2E tests on the web interface.

Test Plan

Prerequisites

Ensure the server is running: npm run dev or claudeman web
Default URL: http://localhost:3000

Test Execution

Use npx agent-browser to run the following tests:

# Test 1: Connection and Initial Load
npx agent-browser open http://localhost:3000
npx agent-browser wait --load networkidle
npx agent-browser snapshot
npx agent-browser screenshot /tmp/claudeman-test-1-initial.png

# Test 2: Font Controls (A+/A-)
npx agent-browser find text "A-" click
npx agent-browser wait 500
npx agent-browser find text "A+" click
npx agent-browser find text "A+" click
npx agent-browser screenshot /tmp/claudeman-test-2-font.png

# Test 3: Tab Count Stepper
npx agent-browser find text "+" click  # Increment tab count
npx agent-browser find text "+" click
npx agent-browser find text "−" click  # Decrement
npx agent-browser screenshot /tmp/claudeman-test-3-tabcount.png

# Test 4: Create Claude Session
npx agent-browser find text "Run Claude" click
npx agent-browser wait 2000
npx agent-browser snapshot
npx agent-browser screenshot /tmp/claudeman-test-4-session.png

# Test 5: Open Session Options (gear icon on tab)
npx agent-browser snapshot  # Get element refs
# Find and click the gear icon on the session tab
npx agent-browser screenshot /tmp/claudeman-test-5-options.png

# Test 6: Test Respawn Settings in Modal
# Should see: Update Prompt, Idle Timeout, Step Delay, Duration, checkboxes
npx agent-browser screenshot /tmp/claudeman-test-6-respawn.png

# Test 7: Monitor Panel
npx agent-browser find text "Monitor" click
npx agent-browser wait 500
npx agent-browser snapshot
npx agent-browser screenshot /tmp/claudeman-test-7-monitor.png

# Test 8: Close Monitor Panel
npx agent-browser find text "×" click
npx agent-browser screenshot /tmp/claudeman-test-8-closed.png

# Cleanup
npx agent-browser close

Expected Results

Initial Load: Page loads with header containing: logo, session tabs, font controls (A-/14/A+), connection status, tokens display, settings gear
Font Controls: Font controls should be to the LEFT of connection status
Tab Count Stepper: Nice stepper with −/number/+ buttons, not just a plain number input
Session Creation: Session tab appears, terminal shows Claude starting
Session Options: Modal opens with session name, directory, AND respawn settings (Update Prompt, timeouts, checkboxes)
Monitor Panel: Shows "Screen Sessions" and "Background Tasks" sections
Respawn Settings: All settings integrated into the session options modal, NO separate bottom panel

Verification Checklist

Font controls positioned left of connection status
Tab count has nice stepper buttons (−/+)
No "Respawn Settings" button in footer
Respawn settings appear in Session Options modal
Monitor panel opens and shows both sections
Sessions are wrapped in GNU screen (check with screen -ls)

3.1 KiB Raw Blame History Unescape Escape