Testpilot Ui
🎨 AI Frontend Test Generation Agent — auto-generates unit tests for any frontend project. React, Next.js, Vue, Nuxt, Angular, Svelte. Backend-flow aware. Self-learning.
🎨 TestPilot UI — AI Frontend Test Generation Agent
Drop-in agentic workflow that auto-generates unit tests for any frontend project, in any framework. Zero production code changes. 90%+ coverage. Backend-flow aware. Self-learning.
🎯 What It Does
TestPilot UI is an AI-powered frontend test engineer that understands component trees, user interactions, state management, and API integrations — then generates comprehensive tests that cover behavior, not implementation details.
Your Frontend Project + TestPilot UI = 90%+ Test Coverage
Key Capabilities
| Feature | Description |
|---|---|
| 🔍 Auto Framework Detection | Detects React/Vue/Angular/Svelte, routing, state management, CSS approach |
| 🧠 Component Tree Analysis | Maps pages → layouts → components, understands prop drilling and context |
| 🎭 Behavior-First Testing | Tests how users interact, not how code is structured |
| 🔗 Backend Flow Awareness | Understands API contracts, auth flows, data fetching to write meaningful tests |
| ♿ Accessibility Testing | Tests ARIA roles, labels, keyboard navigation, semantic HTML |
| 🔄 Iterative Coverage Loop | Up to 5 iterations, targeting biggest gaps each round |
| 🛡️ Rollback Protection | Never allows coverage to drop |
| 📚 Self-Learning | Captures JSDOM quirks, framework gotchas, and fix patterns automatically |
🚀 Quick Start
1. Clone TestPilot UI (once per team)
git clone https://github.com/switchcompany/testpilot-ui.git
cd testpilot-ui
2. Set Up Your Project
./setup.sh /path/to/your/frontend/project
3. Run with Copilot
Open your project in VS Code with GitHub Copilot, then:
Option A — Full Project Run:
@workspace Run the full-workflow prompt to analyze and generate tests for this frontend project
Option B — Specific Components:
@workspace Run full-workflow for: Navbar, ContactForm, AuthModal, Dashboard
📊 Supported Frameworks
| Framework | Test Runner | Component Testing | DOM Environment | Coverage |
|---|---|---|---|---|
| React | Jest / Vitest | @testing-library/react | jsdom | c8 / istanbul |
| Next.js | Jest / Vitest | @testing-library/react | jsdom | c8 / istanbul |
| Vue | Vitest | @vue/test-utils, @testing-library/vue | jsdom / happy-dom | c8 |
| Nuxt | Vitest | @vue/test-utils | jsdom / happy-dom | c8 |
| Angular | Karma / Jest | TestBed | jsdom | karma-coverage |
| Svelte | Vitest | @testing-library/svelte | jsdom / happy-dom | c8 |
| SvelteKit | Vitest | @testing-library/svelte | jsdom / happy-dom | c8 |
| SolidJS | Vitest | @solidjs/testing-library | jsdom | c8 |
🔄 How It Works
┌──────────────────────────────────────────────────────────────────┐
│ TestPilot UI — Workflow │
│ │
│ ┌─────────┐ ┌─────────┐ ┌──────────┐ ┌───────────────┐ │
│ │ Load │──▶│ Detect │──▶│ Analyze │──▶│ Baseline │ │
│ │Learnings│ │Framework│ │Components│ │ Coverage │ │
│ └─────────┘ └─────────┘ └──────────┘ └───────┬───────┘ │
│ │ │
│ ┌─────────┐ ┌─────────────────────────────────────┐│ │
│ │ Self- │◀──│ Iteration Loop (×5) ││ │
│ │ Learn │ │ Fix → Generate → Run → Rollback │◀┘ │
│ └─────────┘ └─────────────────────────────────────┘ │
│ │
│ Output: Tests + Coverage Report + Learnings │
│ │
│ 🔗 Backend Flow Awareness: │
│ API contracts · Auth flows · Data fetching · Error handling │
└──────────────────────────────────────────────────────────────────┘
What Makes TestPilot UI Different
Backend Flow Awareness — Most frontend test tools only understand components. TestPilot UI understands the full picture:
| Flow | What We Test |
|---|---|
| API Integration | Request payloads, response handling, error states (4xx, 5xx, network) |
| Auth Flow | Login → verify → redirect, token refresh, protected routes, logout |
| Form Submission | Validation → API call → success/error response → UI update |
| Data Fetching | Loading → data → error states, refetch, cache invalidation |
| Optimistic Updates | UI update → API call → rollback on failure |
🧪 Testing Philosophy
TestPilot UI follows industry best practices:
✅ DO: Test behavior (what users see and do)
❌ DON'T: Test implementation (state variables, internal methods)
✅ DO: Use Testing Library queries (getByRole, getByText, getByLabelText)
❌ DON'T: Use CSS selectors or test IDs for everything
✅ DO: Mock external dependencies (API, router, auth)
❌ DON'T: Mock internal components (test them integrated)
✅ DO: Test accessibility (ARIA, keyboard, screen readers)
❌ DON'T: Skip a11y — it's both good UX and required by law
Test Priority Order
| Priority | What to Test | Why |
|---|---|---|
| 🔴 Critical | Pages with forms, auth flows, payment | Direct business impact |
| 🟠 High | Components with user interaction logic | Core user experience |
| 🟡 Medium | Hooks/composables, state management | Reusable logic |
| 🟢 Normal | Pure display components, layouts | Visual correctness |
| ⚪ Low | Static pages, wrappers, providers | Minimal logic |
🛡️ JSDOM Mastery
TestPilot UI knows every JSDOM limitation and has workarounds pre-loaded:
| Missing API | Workaround |
|---|---|
Response / Request |
Mock next/server entirely |
IntersectionObserver |
Global mock in setup file |
ResizeObserver |
Global mock in setup file |
matchMedia |
Mock with jest.fn() returning match object |
window.scrollTo |
Mock as jest.fn() |
fetch |
Global mock or msw for realistic API mocking |
crypto.randomUUID() |
Mock or polyfill |
TextEncoder / TextDecoder |
Import from util in setup |
📚 Knowledge Packs
Pre-seeded knowledge for common frameworks (in knowledge-packs/):
| Pack | Patterns | Source |
|---|---|---|
react-nextjs.md |
20+ patterns | Learned from production Next.js 16 project |
vue-nuxt.md |
15+ patterns | Vue 3 + Nuxt 3 best practices |
angular.md |
12+ patterns | Angular 17+ patterns |
svelte.md |
10+ patterns | Svelte 5 + SvelteKit patterns |
📁 Repository Structure
testpilot-ui/
├── .github/
│ ├── copilot-instructions.md # Agent brain — frontend-specialized
│ ├── copilot-setup-steps.yml # Environment verification
│ ├── agent-config.yml # Central hub path config
│ ├── ISSUE_TEMPLATE/
│ │ └── analyze-and-test.yml # GitHub Issue trigger template
│ └── prompts/
│ ├── full-workflow.prompt.md # Main orchestrator
│ ├── detect-tech-stack.prompt.md # Framework detection
│ ├── analyze-project.prompt.md # Component tree analysis
│ ├── analyze-existing-tests.prompt.md # Test audit
│ ├── generate-coverage-report.prompt.md # Coverage config
│ ├── write-unit-tests.prompt.md # Test writing playbook
│ ├── fix-broken-tests.prompt.md # JSDOM + framework fixes
│ └── self-learn.prompt.md # Knowledge capture
├── knowledge-packs/
│ ├── react-nextjs.md
│ ├── vue-nuxt.md
│ ├── angular.md
│ └── svelte.md
├── LEARNINGS.md # Cross-project knowledge base
├── setup.sh # Project setup script
├── update.sh # Update script
├── CONTRIBUTING.md # Contribution guide
├── SECURITY.md # Security policy
└── LICENSE # MIT License
📈 POC Results
TheSwitchCompany Website — Next.js 16 + React 19
| Metric | Before | After | Delta |
|---|---|---|---|
| Line Coverage | 0% | 85% | +85% |
| Test Files | 0 | 6 | +6 |
| Test Cases | 0 | 71 | +71 |
| Iterations | — | 3 | — |
| Production Files Modified | — | 0 | ✅ |
Tests Generated:
- ✅ Component rendering (Navbar, Footer, AuthCTA)
- ✅ Contact form validation (7 field validations, email format, submission)
- ✅ API route testing (Brevo integration, SMTP fallback, error handling)
- ✅ Auth flow (signup, login, verification, redirect)
- ✅ Analytics tracking (Google Sheets integration)
- ✅ Supabase config (environment detection, URL validation)
- ✅ Middleware (route matching patterns)
Patterns Discovered: 15 (JSDOM Response mock, next/jest transform handling, module-level env capture, SWC JSX limitation, Suspense wrapper requirements, and more)
🏢 Enterprise Features
- Cross-project learning — React patterns help Vue projects and vice versa
- Central knowledge hub — team-wide frontend learnings sync via git
- Targeted mode — test specific components without full project analysis
- Backend flow awareness — understands API contracts for meaningful assertions
- Accessibility built-in — every test considers a11y
- CI/CD integration — trigger via GitHub Issues or Copilot CLI
📄 License
MIT © 2025 TheSwitchCompany
TestPilot UI — Part of the TheSwitchCompany AI Agent Suite
TestPilot Core · TestPilot UI · More agents coming soon
