A comprehensive web application for automated quality assurance analysis, test scenario generation, and visual testing documentation.
The QA Analysis Tool is a full-stack application designed to streamline the quality assurance process for web applications. It automatically analyzes websites, generates comprehensive test scenarios using AI, and provides detailed visual reports to help development teams identify potential testing areas and improve their QA coverage.
- Visual Screenshot Capture: High-quality, full-page screenshots using Playwright
- Interactive Element Detection: Automatically identifies buttons, forms, links, and other UI components
- Responsive Analysis: Captures websites at optimal viewport dimensions
- GPT-4 Vision Integration: Analyzes both visual elements and metadata for comprehensive understanding
- Smart Test Scenarios: Generates contextually relevant test cases based on UI analysis
- Quality Insights: Provides actionable recommendations for testing focus areas
- Visual Documentation: Side-by-side screenshot and test scenario presentation
- Structured Reports: Organized test cases with clear descriptions and priorities
- Historical Tracking: Save and review past analysis runs for comparison
- REST API: Well-documented FastAPI backend with automatic OpenAPI documentation
- Modern Frontend: React with TypeScript for type safety and maintainability
- Containerized Deployment: Docker Compose for easy setup and deployment
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ React Frontend │ │ FastAPI Backend │ │ AI Services │
│ │◄──►│ │◄──►│ │
│ • TypeScript │ │ • Python │ │ • OpenAI GPT-4 │
│ • TailwindCSS │ │ • Playwright │ │ • Vision API │
│ • Axios │ │ • Pydantic │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
qa-analysis-tool/
├── frontend/ # React TypeScript application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Main application pages
│ │ ├── services/ # API communication layer
│ │ └── types/ # TypeScript type definitions
│ └── public/
├── backend/ # FastAPI Python application
│ ├── app/
│ │ ├── routes/ # API endpoint definitions
│ │ ├── services/ # Business logic and external integrations
│ │ ├── models/ # Pydantic data models
│ │ └── storage/ # Data persistence layer
│ └── requirements.txt
└── docker-compose.yml # Container orchestration
Before running the application, ensure you have:
- Docker & Docker Compose (recommended for easy setup)
- Node.js v18+ and npm (for local development)
- Python 3.10+ and pip (for local development)
- OpenAI API Key (for AI-powered analysis)
git clone <repository-url>
cd qa-analysis-tool
# Copy environment template and configure
cp .env.example .env
# Edit .env file with your OpenAI API keyEdit the .env file and add your configuration:
OPENAI_API_KEY=your_actual_openai_api_key_here
VITE_BACKEND_URL=http://localhost:8000
ENVIRONMENT=development# Build and start all services
docker-compose up --build
# Access the application
# Frontend: http://localhost:5173
# Backend API: http://localhost:8000
# API Documentation: http://localhost:8000/docs# Navigate to backend directory
cd backend
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Install Playwright browsers
playwright install
# Run development server
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- Enter Website URL: Input the URL you want to analyze
- Automatic Analysis: The tool captures a screenshot and extracts UI elements
- AI Processing: GPT-4 Vision analyzes the interface and generates test scenarios
- Review Results: Examine the generated test cases and quality recommendations
- Export/Save: Download or save the analysis for your testing documentation
The backend provides several key endpoints:
POST /api/v1/analyze_url # Analyze a website URL
GET /api/v1/runs # Retrieve past analysis runs
POST /api/v1/generate_tests # Generate test cases from scenarios
GET /api/v1/checklist/{id} # Get specific analysis checklist
Full API documentation is available at http://localhost:8000/docs when running the application.
- Environment Variables: All sensitive configuration is managed through environment variables
- API Keys: Never commit API keys to version control
- CORS: Configured for development; adjust origins for production deployment
- Input Validation: All inputs are validated using Pydantic models
-
Environment Configuration:
# Set production environment variables export OPENAI_API_KEY=your_production_key export ENVIRONMENT=production export DEBUG=false
-
Update CORS Origins: Modify
backend/app/main.pyto include your production domains -
Build and Deploy:
docker-compose -f docker-compose.prod.yml up --build -d
- Consider implementing rate limiting for API endpoints
- Add proper logging and monitoring
- Implement database storage for persistent data
- Consider using a message queue for long-running AI analysis tasks
We welcome contributions! Please see our contributing guidelines for:
- Code style and formatting standards
- Testing requirements
- Pull request process
- Issue reporting guidelines
This project is licensed under the MIT License - see the LICENSE file for details.
Issue: "OpenAI API key not configured"
Solution: Ensure your .env file contains a valid OPENAI_API_KEY
Issue: "Playwright browsers not found"
Solution: Run playwright install in your Python environment
Issue: "CORS errors in frontend"
Solution: Verify VITE_BACKEND_URL in your environment configuration
- Check the API documentation for endpoint details
- Review the browser console for frontend errors
- Check Docker logs:
docker-compose logs backendordocker-compose logs frontend
Built with ❤️ for the development community
This tool helps development teams maintain high-quality standards through automated analysis and intelligent test generation.