UI-Testing-Tool

UI/UX Testing-Tool für den Europa-Park KI-Chatbot (mAIstack).

Voraussetzungen

• Python 3.9+
• Node.js (für AXE MCP Server, optional)

Setup

# Virtuelle Umgebung erstellen und aktivieren
python3 -m venv .venv
source .venv/bin/activate

# Dependencies installieren
pip install playwright pytest pytest-playwright axe-playwright-python pyyaml python-dotenv jinja2 flask

# Playwright-Browser installieren
playwright install chromium

# Konfiguration anlegen
cp .env.example .env
cp config/prompts.example.yaml config/prompts.yaml

Konfiguration

1. Umgebungen (config/environments.yaml)

Trage die URLs eurer Chatbot-Umgebungen ein:

environments:
  dev:
    url: "https://dev-chatbot.europapark.example.com"
  staging:
    url: "https://staging-chatbot.europapark.example.com"
  prod:
    url: "https://chatbot.europapark.de"
default: dev

2. CSS-Selektoren erkennen

python run.py --discover --env dev

Die erkannten Selektoren werden in config/selectors.yaml gespeichert. Bei Bedarf manuell anpassen.

3. Branding (optional, config/brand.yaml)

Trage die CI-Werte des getesteten Produkts ein, sobald bekannt:

brand:
  colors:
    primary: "#244369"
    accent: "#ee353a"
  fonts:
    primary: "Source Sans Pro"

Nicht gesetzte Werte (null) führen dazu, dass der jeweilige Test übersprungen wird — nicht dazu, dass er fehlschlägt.

4. Fachliche Testinhalte (config/prompts.yaml)

Welche Fragen der Chatbot beantworten soll und welche Begriffe in der Antwort vorkommen müssen, steht nicht im Testcode, sondern in dieser Datei. Damit läuft das Werkzeug gegen jeden Chatbot, ohne dass Tests angepasst werden müssen.

cp config/prompts.example.yaml config/prompts.yaml

Die Vorlage dokumentiert alle Felder und bringt die domänenfreien Fälle (Begrüßung, Sonderzeichen, HTML-Injection, Schnellfeuer) fertig vorbelegt mit. Einzutragen sind die fachlichen Fragen:

prompts:
  domain_knowledge:
    opening_hours:
      prompt: "Wann habt ihr geöffnet?"
      expect_any: ["uhr", "geöffnet", "montag"]

Jeder Eintrag unter domain_knowledge und off_topic wird zu einem eigenen Testfall — beliebig viele, ohne Codeänderung. Fehlt ein Eintrag, überspringt sich der zugehörige Test. Ein Lauf ohne prompts.yaml prüft also nur die domänenfreien Fälle und ist trotzdem grün.

config/prompts.yaml ist bewusst nicht versioniert: die Fragen beschreiben das getestete Produkt, nicht das Testwerkzeug.

Nutzung

Web-Frontend (empfohlen)

# Web-Dashboard starten
python app.py

Öffne http://localhost:5000 im Browser. Das Dashboard bietet:

• Umgebung und Testsuite per Dropdown wählen
• Tests per Klick starten mit Live-Ergebnissen
• Selektor-Discovery direkt im Browser
• Reports und Screenshots ansehen

CLI

# Alle Tests ausführen
python run.py

# Spezifische Umgebung
python run.py --env staging

# Nur eine Testsuite
python run.py --suite ui      # UI-Konsistenz
python run.py --suite ux      # UX-Flows
python run.py --suite a11y    # Accessibility

# Browser sichtbar (nicht headless)
python run.py --headed

# Umgebungen anzeigen
python run.py --list-envs

# CSS-Selektoren erkennen
python run.py --discover

Testbereiche

UI-Konsistenz (tests/ui/)

• Layout und Dimensionen des Chat-Widgets
• Branding: Farben, Fonts, Logo
• Responsive Darstellung (Desktop, Tablet, Mobile)
• Automatische Screenshots

UX-Flows (tests/ux/)

• Begrüßungsnachricht
• Gesprächsverläufe und Folgefragen
• Fehlerbehandlung (leere Eingabe, Sonderzeichen, XSS)
• Antwortzeiten und Performance

Accessibility (tests/a11y/)

• WCAG 2.1 AA Audit (via axe-core)
• Tastaturnavigation
• ARIA-Labels und Fokus-Management
• Farbkontraste

Reports

Nach jedem Testlauf wird ein Markdown-Bericht in reports/ generiert mit:

• Automatischen Testergebnissen als Checkliste
• Manuellen Prüfpunkten zum Abhaken
• Verweisen auf Screenshots in screenshots/

AXE MCP Server (interaktive Analyse)

Für tiefgehende, KI-gestützte Accessibility-Analysen kann zusätzlich der AXE MCP Server in Claude Code genutzt werden.

Setup-Anleitung: config/mcp_axe_setup.md

Projektstruktur

EP-Testing_Tool/
├── app.py                 # Web-Frontend (Flask)
├── run.py                 # CLI-Einstiegspunkt
├── conftest.py            # pytest Fixtures
├── config/                # Konfigurationsdateien
├── tests/
│   ├── ui/                # UI-Tests
│   ├── ux/                # UX-Tests
│   └── a11y/              # Accessibility-Tests
├── utils/                 # Hilfsfunktionen
├── templates/
│   ├── web/               # HTML-Templates (Frontend)
│   └── *.md.j2            # Report-Templates
├── static/                # CSS & JS für Frontend
├── reports/               # Generierte Berichte
└── screenshots/           # Aufgenommene Screenshots