Automated web page interaction analysis powered by AI and Playwright
qa-1757009250665.mp4
- 🔗 URL Input - Enter any website URL to analyze
- ⚡ Auto-Discovery - Tool finds all interactive elements (buttons, forms, links)
- 🤖 Smart Interactions - Playwright clicks and interacts with each element
- 📸 Screenshot Capture - Before/after images of each interaction
- 🧠 AI Analysis - OpenAI analyzes what changed and generates annotations
- 📋 Structured Output - JSON results ready for testing frameworks
This tool automatically:
- 📊 Discovers all interactive elements on any web page
- 🤖 Interacts with buttons, forms, links, and controls using Playwright
- 📸 Captures before/after screenshots of each interaction
- 🧠 Analyzes changes using OpenAI to understand what each action does
- 📋 Generates structured annotations for QA testing and documentation
Perfect for understanding complex web applications, generating test cases, or documenting user workflows.
- Node.js 18+
- OpenAI API key
# Clone and install dependencies
cd component-analyzer
bun install
Create .env.local:
OPENAI_API_KEY=your_openai_api_key_here# Development server
bun run dev
# Production build
bun run build && npm start- Enter URL - Input any website URL
- Analyze - Click analyze to start automated discovery
- Review Results - See detailed annotations with:
- Element types and selectors
- Before/after screenshots
- AI-powered change analysis
- Interaction coordinates
- Confidence scores
- 80+ Interactive Element Types - Comprehensive selector coverage
- AI-Powered Analysis - Understands UI changes contextually
- Visual Diff Tracking - Screenshot comparisons
- Structured Output - JSON annotations ready for testing frameworks
- Modern UI - Clean interface built with Next.js + Tailwind
- Frontend: Next.js 15, React 19, Tailwind CSS
- Automation: Playwright
- AI: OpenAI GPT-4 with structured outputs
- Language: TypeScript