QA Testing Agent (Frontend and Backend)

Home
Loading each agent tools
Report
Frontend Issues
History of Testing
Frontend Issues
Backend Errors and Issues
Backend Errors and Issues

Inspiration

Modern software is developed at light speed, but tested at a snail's pace

Every developer knows the sinking feeling of shipping a product only to discover broken layouts, failed APIs, and visual bugs that slipped past "perfect" code. Traditional QA is a broken paradigm—it demands hundreds of manual scripts, expensive engineering hours, and days of regression checks. I realized that in the age of AI, this friction is obsolete.

I built the QA Testing Tool to be more than a utility; it’s an autonomous brain for your application. It perceives your UI with a human eye and inspects your backend with surgical precision. No scripts. No setup. No compromises. One URL, and the AI does the rest. Testing is finally automatic.

What it does

QA Testing Tool is a comprehensive, autonomous QA Engineer in a box. It eliminates the manual drudgery of writing test scripts by using an agentic AI to "think" its way through your web application.

Autonomous Page Exploration: Unlike traditional tools that require defined test paths, our agent uses Playwright to "look" at your app, understand its navigation, and automatically discover hidden pages, form workflows, and interactive components.
Multimodal Visual Auditing: Leveraging Gemini 2.5 Pro, the agent acts as a pixel-perfect designer. It identifies layout shifts, broken glassmorphism, overlapping elements, and low-contrast text that deterministic code-based tests always miss.
Deep Full-Stack Inspection: While the agent navigates, it operates a "Network Interceptor" to monitor backend health. It detects broken API responses (4xx/5xx), identifies slow-loading endpoints, and flags potential security vulnerabilities like unhandled CORS or JS exceptions.
Deterministic Fix Generation: It doesn't just find problems; it solves them. Every bug in the generated report comes with a verified CSS fix and a one-click DevTools console command, allowing developers to ship fixes in seconds.
Accessibility & Security Shield: It automatically injects accessibility engines (axe-core) and security fuzzers into every page scan, ensuring your app is compliant and hardened against common web vulnerabilities.

How we built it

LangGraph — 6-node agent loop: Observe → Navigate → Detect → Fix → Verify → Report
Gemini 2.5 Pro — multimodal vision for all visual bug detection via Google GenAI SDK
Playwright — autonomous browser navigation and network interception
Vision: Gemini 2.5 serves as our visual brain, comparing live sites against Figma designs and identifying visual regressions.
Frameworks: The frontend is a high-performance React/Vite app featuring a custom glassmorphic vertical sidebar and spring-physics animations via Framer Motion.
Backend: A FastAPI backend manages the scan queue, while SQLite provides persistent history tracking.
Reporting: Leveraged ReportLab to engineer a professional, structured PDF generation engine with high-contrast information hierarchy.

Challenges we ran into

Agentic Navigation: Teaching an AI to navigate complex, authenticated web apps autonomously required fine-tuning our LangGraph logic to handle edge cases like modals, infinite scrolls, and dynamic redirects.
UI Information Density: Designing a vertical sidebar that felt futuristic and "pro" without cluttering the viewport was a balancing act. Overcame this using tooltips and dynamic scaling indicators.
*Handling false positives *— teaching the agent to distinguish real bugs from intentional design choices

What We Learned

Gemini's multimodal vision is powerful enough to replace an entire manual visual QA process
LangGraph's stateful agent loop is the perfect architecture for multi-step autonomous testing workflows
Combining frontend vision testing with backend network interception in one unified pipeline is genuinely something no existing tool does today