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.
🏗️ System Architecture
OptiQA follows a modular microservice-inspired structure:
Frontend (React.js)
Handles user interaction, authentication, prompt submission, and data visualization.Backend (Node.js + Express)
Manages user requests, invokes GPT-4o-mini for AI processing, executes Playwright tests, and interacts with PostgreSQL.AI Layer (OpenAI GPT-4o-mini)
Generates test scripts based on natural language prompts.Database Layer (PostgreSQL)
Stores users, prompts, test results, execution logs, and screenshots.Playwright Test Engine
Executes generated test scripts and sends results back to the backend for storage and visualization.
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 |