tilbudgivern/_archive/VISUAL_AI_TESTING.md

🤖 AI-Powered Visual Testing Suite

Automatisk UI/UX kvalitetsvurdering ved hjælp af Selenium og OpenAI Vision API.

📋 Oversigt

Denne test suite kombinerer:

• Selenium WebDriver - Automatisk browser navigation og screenshots
• OpenAI GPT-4 Vision - AI-baseret analyse af UI/UX kvalitet

🎯 Formål

Evaluer visuelt design og brugervenlighed automatisk gennem:

1. Visuelt Design - Farver, typografi, spacing, modernitet
2. Layout & Struktur - Information hierarchy, placering, alignment
3. Brugervenlighed (UX) - Navigation, CTAs, forms, feedback
4. Professionelt Udtryk - Credibility, polish, brand konsistens

🚀 Kom i gang

Prerequisites

# Python pakker (allerede installeret hvis Selenium virker)
pip install selenium openai python-dotenv

# Chrome/ChromeDriver (allerede installeret)
# OpenAI API key i .env fil

Tilføj API Key

Tilføj din OpenAI API key til .env filen:

OPENAI_API_KEY=sk-your-api-key-here

Kør Test Suite

# Direkte Python kommando
python3 selenium_visual_ai_test.py

# Via npm script
npm run test-visual-ai

# Alias
npm run visual-qa

📊 Output

Test suiten genererer:

1. Screenshots - Højkvalitets billeder af alle sider
2. AI Analyse - Detaljeret feedback for hver side
3. HTML Rapport - Interaktiv rapport med scores og anbefalinger

Rapport Placering

test-results/visual-ai/
├── visual_ai_report_YYYYMMDD_HHMMSS.html  # Hoved rapport
├── YYYYMMDD_HHMMSS_homepage.png           # Screenshots
├── YYYYMMDD_HHMMSS_projekt_flow.png
├── YYYYMMDD_HHMMSS_geometry_form.png
├── YYYYMMDD_HHMMSS_smart_packages.png
└── YYYYMMDD_HHMMSS_materials_manager.png

📈 Test Struktur

Test Cases

Test	Beskrivelse	Fokus
Homepage	Dashboard view	Overall første indtryk
Projekt Flow	Step interface	Workflow navigation
Geometri Form	Input fields + preview	Form design, input handling
Smart Pakker	Package selection	Card design, information density
Materialestyring	Material manager	Table design, data presentation

Evaluerings Metrikker

Hver test evalueres på en skala fra 1-10 for:

• Visuelt Design (farver, typografi, spacing)
• Layout & Struktur (hierarchy, placering, alignment)
• Brugervenlighed (navigation, CTAs, feedback)
• Professionelt Udtryk (credibility, polish, konsistens)

🎨 Rapport Features

Den genererede HTML rapport indeholder:

• ✅ Overall Score - Gennemsnitsscore for alle tests
• 📸 Screenshots - Højopløselige billeder
• 🔍 Detaljeret Feedback - AI-genereret analyse
• ⚠️ Identificerede Problemer - Konkrete issues
• 💡 Anbefalinger - Forbedringsforslag
• 📊 Score Breakdown - Per metrik scores

💻 Eksempel Output

🤖 AI-POWERED VISUAL TESTING SUITE
================================================================================

🔧 Starter Chrome for visuelt AI test...
✅ Chrome klar

🔐 Logger ind...
✅ Login gennemført

================================================================================
🏠 TEST: Homepage / Dashboard
================================================================================
📸 Screenshot: 20251114_143052_homepage.png
🤖 AI analyserer: Hovedside/Dashboard...
✅ AI Analyse gennemført - Overall Score: 8.2/10

================================================================================
🏗️  TEST: Projekt Flow
================================================================================
📸 Screenshot: 20251114_143055_projekt_flow.png
🤖 AI analyserer: Projekt Flow - Step interface...
✅ AI Analyse gennemført - Overall Score: 7.8/10

[... flere tests ...]

================================================================================
📊 GENERERER RAPPORT
================================================================================

✅ Rapport gemt: test-results/visual-ai/visual_ai_report_20251114_143052.html
📊 Gennemsnitsscore: 8.1/10
🎯 Status: Excellent ✅

🔧 Tilpasning

Tilføj Nye Tests

Tilføj metoder til VisualAITester klassen:

def test_new_page(self):
    """Test new page visual quality"""
    print("=" * 80)
    print("🎯 TEST: New Page")
    print("=" * 80)
    
    # Navigate to page
    self.driver.get(f"{BASE_URL}/new-page")
    time.sleep(3)
    
    # Take screenshot
    screenshot = self.take_screenshot("new_page", "New page description")
    
    # Analyze
    analysis = self.analyze_visual_quality(screenshot, "Context for AI")
    
    # Store result
    self.test_results.append({
        "test": "New Page",
        "screenshot": screenshot,
        "analysis": analysis
    })

Tilføj til run_all_tests():

self.test_new_page()

Justér AI Prompt

Rediger analyze_visual_quality() metoden for at ændre evalueringskriterier.

🎯 Best Practices

1. Kør efter deployment - Test efter hver release
2. Sammenlign over tid - Gem rapporter for historik
3. Følg anbefalinger - Implementer AI's forslag
4. Kombiner med manuel QA - AI finder ikke alt
5. Iterér - Gentag test efter fixes

⚡ Performance

• Typisk køretid: 2-3 minutter
• Cost per test run: ~$0.10-0.20 (OpenAI API)
• Screenshots: ~5MB total
• Rapport: ~500KB HTML

🐛 Troubleshooting

"OPENAI_API_KEY ikke fundet"

Tilføj til .env:

OPENAI_API_KEY=sk-your-key-here

"Chrome binary not found"

Scriptet bruger allerede den korrekte Chrome sti (/usr/bin/google-chrome)

AI analyse fejler

Check API key og internet forbindelse. OpenAI API skal være tilgængelig.

Lav score men siden ser fin ud

AI'en er konservativ. Læs feedback for konkrete forbedringsforslag.

📚 Resources

• Selenium Docs
• OpenAI Vision API
• GPT-4 Vision Best Practices

🤝 Bidrag

Forbedringsforslag til test suite:

1. Tilføj flere test cases
2. Forbedre AI prompt for bedre feedback
3. Tilføj responsive testing (forskellige skærmstørrelser)
4. Integrer med CI/CD pipeline
5. Tilføj accessibility checks

📝 Changelog

v1.0.0 (2025-11-14)

• Initial release
• 5 test cases
• OpenAI GPT-4 Vision integration
• HTML rapport generation
• Screenshot capture med high detail

---

Lavet med ❤️ for Tilbudgivern projektet