KI gestützte Design Tests von Shops

MArio hat uns einen Prompt zukommen lassen, mit dem er den Seltmann Shop aufgrund eines akuten Problems geprüft hat. Wir könnten den Prompt verwenden, um das Design mithilfe eines KI Agenten automatisiert zu prüfen und einen Report zu erhalten.

Dazu empfehle ich perplexity.ai zu nutzen. Loggt euch dafür als shopmanager@constancy.de ein, es wird dann ein Code an die Email geschickt, ein Passwort ist nicht notwendig. In Perplexity wählt ihr dann den “Computer” Modus aus und verwendet den Prompt. Ersetzt die URL durch die zu prüfende URL, der Prompt prüft aber auch Verlinkungen und bestimmte weitere Seiten:

Du bist QA-Tester für unsere Marken-Onlineshops. Prüfe die unten gelisteten Shops vollständig und selbstständig im Browser und erstelle am Ende einen Bericht im vorgegebenen Format. Arbeite Shop für Shop, Testfall für Testfall. Rate nie — was du nicht prüfen kannst, markiere als „nicht prüfbar" mit Grund.

Shops: https://www.seltmann-shop.de/werksverkauf

Viewports/Geräte (je Testfall alle durchgehen):
1. Android-Phone: 360×800 und 375×812, Android-Chrome-User-Agent, Touch
2. iPhone: 390×844, iOS-Safari-User-Agent
3. Tablet: 768×1024
4. Desktop: 1440×900

Testfälle je Shop (jeweils in allen Viewports):
1. Startseite laden — Cookie-Banner erscheint, ist bedienbar, „nur essenzielle" wählbar
2. Hauptnavigation öffnen/schließen (mobil: Burger-Menü)
3. Eine Kategorieseite öffnen (möglichst eine Neuheiten-/Aktionsserie)
4. Eine Produktdetailseite öffnen (Artikel mit und ohne Produktbild)
5. Suche: Begriff eingeben, Ergebnisseite prüfen
6. Artikel in den Warenkorb, Warenkorb öffnen, Menge ändern
7. Checkout starten bis zur Zahlartenauswahl (NICHT bestellen, KEINE echten Daten)
8. Impressum + Datenschutz aufrufen
9. Absichtlich falsche URL → 404-Seite prüfen

Prüfkriterien auf jeder Seite:
- Text läuft über Ränder hinaus, wird abgeschnitten oder überlagert andere Texte/Icons
- Floating-Elemente (Siegel, Filter-, Scroll-Buttons) verdecken Inhalte oder Bedienelemente
- Horizontales Scrollen der Gesamtseite (darf nicht auftreten)
- Bilder: fehlend, Platzhalter, verzerrt, überlaufend
- Bedienelemente erreichbar und groß genug für Touch
- Browser-Konsole: JavaScript-Fehler notieren
- Grobe Ladezeit (auffällig langsam = Befund)

Berichtsformat (standardisiert, exakt einhalten):
1. Kopf: Datum/Uhrzeit, geprüfte Shops, Viewports, Tool/Version
2. Zusammenfassung: Anzahl Befunde je Schweregrad, Top-3-Probleme in je einem Satz
3. Befundtabelle mit GENAU diesen Spalten:
ID | Shop | Seite/URL | Testfall | Viewport | Schweregrad | Beschreibung | Schritte zur Reproduktion
Schweregrade: KRITISCH (Kauf unmöglich/Rechtstext unerreichbar) · HOCH (Funktion beeinträchtigt) · MITTEL (deutlicher Darstellungsfehler) · NIEDRIG (Schönheitsfehler)
4. Abschnitt „Nicht prüfbar" mit Gründen
5. Maschinenlesbarer Anhang: derselbe Inhalt als JSON-Array (Felder: id, shop, url, testfall, viewport, schweregrad, beschreibung, schritte)

Versand: Speichere den Bericht als YYYY-MM-DD_shoptest-report.md. Wenn du eine E-Mail-Anbindung hast, sende ihn an VERTEILER-ADRESSE mit Betreff „[Shoptest] YYYY-MM-DD — X Befunde (davon Y kritisch)". Ohne Anbindung: Bericht ausgeben und darauf hinweisen, dass er manuell versendet werden muss.

Der Prozess dauerte in meinem Fall knapp eine Stunde, ihr müsst zwischendurch nichts genehmigen, da Perplexity die Aufgabe allein in der Cloud bearbeitet.

Hier einmal eine Beispieldatei, die Perplexity generiert hat: 2026-09-24_shoptest-report_perplexity.md

Schreibe einen Kommentar

Menü schließen