Intelligent QA Testing Platform with Session Recording and Automated Analysis
Terrific QA is a fullstack application designed to revolutionize manual testing processes. It allows you to record test sessions in real-time, capturing every user interaction, console logs, network requests, and session video. Additionally, it integrates intelligent analysis capabilities through LLM to automatically generate reports and detect patterns.
- 🎥 Complete Session Recording: Captures video, user actions, console logs, and network traffic, with both browser-window and full-screen recording modes
- 🔄 Real-Time Updates: WebSocket for live event streaming
- 🧠 Intelligent LLM Analysis: Automatic context generation and bug reports
- 🎯 Smart Crawling: Automatic DOM capture with SmartDiff for token optimization
- 📊 Interactive Timeline: Temporal visualization of all captured events
- 🏷️ Profile Management: Save and reuse browser configurations with credentials
- 🔍 Advanced Filters: Filter events by type, errors, crawls, and more
- 📝 Notes and Flags: Add annotations and markers during tests
- 🌓 Dark Mode: Minimalist Apple-inspired interface with dark mode support
- 💾 Context Export: Generate optimized context for LLMs with applied filters
- 🌐 Workspaces and MCP integration: Workspace-aware storage plus an MCP server for AI assistants (Cursor and other MCP clients)
terrific-qa/
├── frontend/ # React 19 + Vite + TypeScript
│ ├── components/ # UI components and features
│ │ ├── ui/ # Base components (Button, Card, etc.)
│ │ ├── layout/ # Layout and Header
│ │ └── features/ # ActivityFeed, SessionReplay, etc.
│ ├── src/ # Application logic
│ └── public/ # Static assets
│
├── backend/ # Node.js + Express + Playwright
│ ├── src/
│ │ ├── controllers/ # Endpoint logic
│ │ ├── services/ # Playwright, SmartDiff, Crawler
│ │ ├── models/ # Types and data models
│ │ └── utils/ # Utilities
│ └── dist/ # Compiled build
│
├── docs/ # Documentation and specifications
└── (runtime data) # Sessions, workspaces, credentials stored under user home in .terrific/
- Node.js >= 18.x
- npm >= 9.x
- PowerShell (for Windows)
git clone https://github.com/your-username/terrific-qa.git
cd terrific-qaCreate a .env file in the project root:
# Backend Configuration
PORT=3001
NODE_ENV=development
# OpenAI Configuration (optional, for LLM analysis)
OPENAI_API_KEY=your_api_key_here
OPENAI_MODEL=gpt-4o-mini
# Session Configuration
SESSION_STORAGE_PATH=./sessions
CREDENTIALS_PATH=./credentials.jsoncd backend
npm install
npx playwright install chromium
npm run devBackend will be available at http://localhost:3001
On Windows you can also start it from the repo root with:
.\start-backend.cmdIn another terminal:
cd frontend
npm install
npm run devFrontend will be available at http://localhost:5173
On Windows you can also start it from the repo root with:
.\start-frontend.cmd- Open the application in your browser
- Configure recording options:
- ✅ Record user actions
- ✅ Record console logs
- ✅ Record network requests
- ✅ Record video (optional)
- ✅ Smart auto-crawl
- Enter the initial URL to test
- Click "Start Session"
- A browser will open automatically
- Interact normally with the web application
- All events are captured in real-time
- Add notes, flags, or bug reports from the side panel
- The system will perform automatic crawls when detecting significant DOM changes
- Click "End Session"
- Review the event timeline
- Play back the video synchronized with events
- Export context for LLM analysis
- Apply filters to focus on errors or specific events
The system uses an intelligent diff algorithm to optimize storage and context generation:
- Change Detection: Only saves differences between consecutive crawls
- Blank Line Compression: Removes redundancies while maintaining semantics
- Automatic Decision: Chooses between diff or full snapshot based on token efficiency
- Save browser configurations with cookies and localStorage
- Automatically reuse login credentials
- Launch configurator to create new profiles
- All Errors: Groups console, network, and server errors
- Crawls Only: Visualize only DOM captures
- Network Events: Filter HTTP requests
- Console Logs: Show only browser logs
Generates an optimized context file that includes:
- Session metadata
- Filtered events based on selection
- Crawls with SmartDiff applied
- TOON format for maximum readability
- Workspace-aware storage keeps sessions organized per project.
- Expose Terrific as an MCP server so AI coding assistants (such as Cursor) can query sessions, logs, and context directly.
- React 19 - UI Framework
- TypeScript - Static typing
- Vite - Build tool and dev server
- Lucide React - Icons
- React Router - Navigation
- Node.js - Runtime
- Express - Web framework
- TypeScript - Static typing
- Playwright - Browser automation
- WebSocket (ws) - Real-time communication
- Turndown - HTML to Markdown conversion
- Diff - Diff algorithm
- TOON Format - Serialization format
- Vitest - Testing framework
- Design Specifications - Complete UI/UX guide
- Smart Autocrawl Plan - Crawling system details
- Terrific MCP tutorial - Connect Terrific as an MCP server for Cursor
Contributions are welcome! Please:
- Fork the project
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the design specifications in
docs/design-specifications.md - Maintain TypeScript code with strict typing
- Add tests for new features
- Document significant changes
This project is licensed under the MIT License. See the LICENSE file for details.
Rodrigo Garciaguirre
- Playwright for the excellent automation tool
- React for the UI framework
- OpenAI for LLM analysis capabilities
- The open source community for the amazing tools
Questions or suggestions? Open an issue on GitHub.
Made with ❤️ to improve the QA process