desktop-chat-app/e2e/INDEX.md

E2E Test Suite Documentation Index

Complete end-to-end testing suite for Lilith AI Desktop Chat Application.

Quick Navigation

New to E2E Tests? Start Here

1. QUICK_START.md - Step-by-step setup guide
2. IMPLEMENTATION_EXAMPLE.md - See real code examples
3. README.md - Comprehensive documentation

Adding Test IDs to Components

1. DATA_TESTIDS.md - Complete reference list
2. IMPLEMENTATION_EXAMPLE.md - 6 detailed examples

Running and Writing Tests

1. README.md - Running tests, best practices
2. TEST_SUMMARY.md - What's included, coverage

File Directory

Test Files (Executable)

e2e/
├── electron.ts           # Electron fixture + test helpers
├── app.e2e.ts           # App launch, layout, window tests (16 tests)
├── settings.e2e.ts      # Settings modal tests (27 tests)
└── chat.e2e.ts          # Chat, tabs, messages tests (37 tests)

Documentation Files (Read Me)

e2e/
├── INDEX.md                    # This file - navigation
├── QUICK_START.md             # Getting started checklist
├── README.md                  # Full documentation
├── DATA_TESTIDS.md           # Test ID reference
├── IMPLEMENTATION_EXAMPLE.md # Code examples
└── TEST_SUMMARY.md           # Overview & stats

Documentation by Use Case

"I want to get tests running ASAP"

→ QUICK_START.md - Follow the numbered steps

"I need to add test IDs to my components"

→ DATA_TESTIDS.md - See what's needed → IMPLEMENTATION_EXAMPLE.md - Copy/paste examples

"I want to understand the test structure"

→ README.md - Architecture and patterns → TEST_SUMMARY.md - Stats and coverage

"I want to write new tests"

→ README.md - Best practices section → electron.ts - See helper functions

"Tests are failing and I need to debug"

→ README.md - Debugging section → QUICK_START.md - Troubleshooting

Document Descriptions

QUICK_START.md (Priority: Must Read)

What: Step-by-step guide to get tests running Contains:

• Prerequisites checklist
• Build instructions
• Test ID implementation order
• Troubleshooting guide
• Command reference

Read this if: You're setting up E2E tests for the first time

DATA_TESTIDS.md (Priority: Reference)

What: Complete list of required data-testid attributes Contains:

• All 65+ test IDs organized by component
• Priority levels (High/Medium/Low)
• Example implementations
• Testing verification steps

Read this if: You need to know which test IDs to add

IMPLEMENTATION_EXAMPLE.md (Priority: Tutorial)

What: Before/after code examples for adding test IDs Contains:

• 6 detailed component transformations
• AppLayout example
• AgentChat example
• ChatTabs example
• SettingsModal example
• TypeScript typing patterns
• Find & replace tips

Read this if: You want to see exactly how to modify components

README.md (Priority: Reference)

What: Comprehensive testing documentation Contains:

• Setup and running instructions
• Test structure explanation
• Helper functions reference
• Best practices
• Debugging guide
• CI integration examples

Read this if: You want to understand the full testing system

TEST_SUMMARY.md (Priority: Overview)

What: High-level overview of test suite Contains:

• 80 tests across 3 suites
• Coverage summary
• Test scenarios covered
• Success metrics
• Next steps guide

Read this if: You want to understand what's tested

INDEX.md (Priority: Navigation)

What: This file - documentation navigator Contains:

• Quick links to relevant docs
• File directory structure
• Use case → document mapping

Read this if: You're not sure which document to read

Test Files Description

electron.ts (Fixture & Helpers)

Purpose: Provides Playwright + Electron test infrastructure Exports:

• test - Extended test fixture with electronApp and page
• expect - Playwright expect assertions
• testHelpers - Utility functions for common operations

Key helpers:

testHelpers.openSettings(page)
testHelpers.sendMessage(page, 'text')
testHelpers.createNewTab(page)
testHelpers.getTabs(page)

app.e2e.ts (16 tests)

Tests: App launch, layout, window management Covers:

• Window opens successfully
• Three-panel layout visible
• Title bar and controls
• Panel resizing
• Keyboard shortcuts
• System tray

Key test groups:

• App Launch (7 tests)
• Window Management (2 tests)
• Panel Resizing (2 tests)
• Keyboard Shortcuts (3 tests)
• System Tray (1 test)
• Error Handling (1 test)

settings.e2e.ts (27 tests)

Tests: Settings modal and all panels Covers:

• Opening/closing settings
• Tab navigation
• All 5 settings panels
• Settings persistence
• Input validation

Key test groups:

• Settings Modal (5 tests)
• Tab Navigation (4 tests)
• Speech Settings (4 tests)
• Appearance Settings (3 tests)
• System Settings (3 tests)
• Agent Settings (2 tests)
• Model Settings (2 tests)
• Persistence (2 tests)
• Validation (2 tests)

chat.e2e.ts (37 tests)

Tests: Chat functionality, messages, conversations Covers:

• Sending/receiving messages
• Message display and styling
• Conversation tabs
• Agent selection
• Speech synthesis
• Message actions

Key test groups:

• Basic Chat (7 tests)
• Message Display (7 tests)
• Conversation Tabs (9 tests)
• Agent Selection (4 tests)
• Speech Synthesis (4 tests)
• Message Actions (2 tests)
• Context Panel (2 tests)
• Message History (2 tests)

Reading Order by Role

Developer (First Time)

1. QUICK_START.md - Get oriented
2. DATA_TESTIDS.md - See what's needed
3. IMPLEMENTATION_EXAMPLE.md - Start implementing
4. README.md - Reference as needed

QA/Test Engineer

1. TEST_SUMMARY.md - Understand coverage
2. README.md - Learn test structure
3. electron.ts - See available helpers
4. Write new tests using examples

Project Manager/Lead

1. TEST_SUMMARY.md - See overview
2. QUICK_START.md - Understand effort
3. DATA_TESTIDS.md - Review requirements

Implementation Checklist

From QUICK_START.md, here's the abbreviated checklist:

• 1. Build app: pnpm build
• 2. Try running: pnpm test:e2e (will fail)
• 3. Add test IDs to AppLayout.tsx
• 4. Add test IDs to AgentChat.tsx
• 5. Add test IDs to SettingsModal.tsx
• 6. Rebuild and test: pnpm build && pnpm test:e2e
• 7. Add remaining test IDs iteratively
• 8. Verify all tests pass
• 9. Set up CI integration

See QUICK_START.md for detailed steps.

Key Statistics

• Total Tests: 80 across 3 test suites
• Test IDs Required: 65+ attributes
• Documentation: 2,400+ lines across 6 files
• Test Code: 1,400+ lines
• Implementation Time: 4-6 hours estimated
• Test Runtime: <2 minutes target

Common Commands

# Build (required first)
pnpm build

# Run all tests
pnpm test:e2e

# Run with UI (recommended)
pnpm test:e2e:ui

# Run specific file
npx playwright test e2e/app.e2e.ts

# Debug mode
npx playwright test --debug

Support Resources

Within This Repo

• All documentation in /e2e/*.md
• Test helper functions in electron.ts
• Example tests in *.e2e.ts files

External Resources

• Playwright Documentation
• Playwright Electron
• Testing Best Practices

Version Information

• Test Suite Version: 1.0.0
• Playwright Version: 1.57.0
• Electron Support: Yes (via @playwright/test Electron fixture)
• Created: 2024-12-27

Quick Reference Card

Want to...	Read...	Section/File
Get started	QUICK_START.md	Steps 1-5
Add test IDs	IMPLEMENTATION_EXAMPLE.md	Examples 1-6
Find test ID name	DATA_TESTIDS.md	Component sections
Run tests	README.md	Running Tests
Debug failing test	README.md	Debugging Tests
Write new test	README.md	Writing New Tests
Understand coverage	TEST_SUMMARY.md	Test Coverage
Use helpers	electron.ts	testHelpers object

---

Start here: QUICK_START.md

Questions? Check the README.md debugging section.