Technical Document (HLD + LLD)
Technology Stack
| Layer | Technology |
|---|---|
| Frontend | React.js + Tailwind CSS |
| Backend | Node.js + Express.js |
| Database | PostgreSQL |
| AI/ML | OpenAI GPT-4o-mini |
| Test Execution | Playwright |
| Authentication | JWT (JSON Web Tokens) |
| Hosting (Optional) | AWS / Render / Vercel |
Workflow Description
- User Registration/Login → User signs up or logs in.
- Prompt Submission → User enters URL + natural language steps (e.g., “Login to Gmail and verify inbox count”).
- AI Processing → Backend sends the prompt to GPT-4o-mini to generate Playwright test script.
- Test Execution → The system executes the generated code using Playwright.
- Result Storage → Logs, status, and screenshots are saved in the database.
- Result Visualization → User views the detailed report and test history from the frontend.
High Level Design (HLD)
Overview
The system follows a modular, scalable architecture that connects frontend, backend, AI, and database layers.
The frontend communicates securely with backend APIs, which orchestrate test execution, AI analysis, and reporting.
Key Components
- Frontend: Interactive dashboard for test management, execution tracking, and result visualization.
- Backend: API layer managing test execution requests, log collection, and AI interactions.
- Database: Centralized storage for test cases, execution results, and logs.
- AI/ML Layer: Processes logs, predicts failure patterns, and generates intelligent test suggestions.
- Authentication: Uses JWT tokens for secure and stateless user sessions.
HLD Diagram
/./image-1760006042069.png)
/./image-1760006059671.png)
Low Level Design (LLD)
Core Modules
- Test Case Manager: Converts unstructured requirements into structured, testable cases using NLP.
- Execution Engine: Runs automated Playwright tests and captures execution logs.
- AI Analyzer: Combines rule-based logic and NLP for anomaly detection and failure summaries.
- Log Parser: Normalizes error logs from different environments for consistent analysis.
- Report Generator: Aggregates and visualizes results into actionable insights.
LLD Diagram
/./image-1760006122665.png)
🗄️ Database Design
Tables
users
| Column | Type | Description |
|---|---|---|
| id | UUID (PK) | Unique user identifier |
| name | VARCHAR | User’s full name |
| VARCHAR | Unique email address | |
| password_hash | TEXT | Encrypted password |
| created_at | TIMESTAMP | Timestamp of registration |
prompts
| Column | Type | Description |
|---|---|---|
| id | UUID (PK) | Unique prompt identifier |
| user_id | UUID (FK → users.id) | Owner of the prompt |
| prompt_text | TEXT | User-entered prompt |
| generated_code | TEXT | AI-generated Playwright test code |
| created_at | TIMESTAMP | Date/time of prompt creation |
test_results
| Column | Type | Description |
|---|---|---|
| id | UUID (PK) | Unique test result identifier |
| prompt_id | UUID (FK → prompts.id) | Related prompt |
| status | VARCHAR | Test status (e.g., PASSED, FAILED, ERROR) |
| execution_log | TEXT | Execution logs |
| screenshot_url | TEXT | Optional screenshot of result |
| created_at | TIMESTAMP | Timestamp of execution |