---
title: "Playwright-Monitor"
description: "Für kritische Prozesse wie Login, Checkout oder Registrierung reicht ein einfacher HTTP-Check oft nicht aus. Der Playwright Monitor lädt Ihre Website in einem echten Browser (Headless Chromium) und führt ein von Ihnen definiertes Skript aus."
---

Dies simuliert einen echten Benutzer und deckt JavaScript-Fehler, defekte Buttons oder UI-Probleme auf.

## Funktionsweise

Wir führen Ihr Playwright-Skript in unserer sicheren Cloud-Umgebung aus.

- **Erfolg**: Das Skript läuft ohne Fehler durch.
- **Fehler**: Eine `expect`-Prüfung schlägt fehl oder ein Timeout tritt auf. Wir speichern automatisch einen **Screenshot** und die Fehlermeldung.

## Beispiel: Login Testen

Hier ist ein einfaches Skript, um einen Login-Vorgang zu testen:

```javascript
import { test, expect } from '@playwright/test';

test('User can login', async ({ page }) => {
  // 1. Navigation
  await page.goto('https://app.deinkunde.com/login');
  
  // 2. Formular ausfüllen (Nutzung von Env-Variablen)
  await page.fill('input[name="email"]', 'monitor-user@deinkunde.com');
  await page.fill('input[name="password"]', process.env.MONITOR_PASSWORD);
  
  // 3. Absenden
  await page.click('button[type="submit"]');
  
  // 4. Verifizierung (Warten auf Dashboard-Element)
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.locator('.welcome-message')).toContainText('Hallo');
});
```

## Umgebungsvariablen (Secrets)

Sie sollten niemals Passwörter, API-Keys oder sensible Daten direkt im Skript speichern ("hardcoden"). Nutzen Sie stattdessen **Environment Variables**.

### Einrichtung

1. Navigieren Sie zu den **Monitor-Einstellungen**.
2. Öffnen Sie den Bereich **Erweiterte Einstellungen** (Advanced Settings).
3. Finden Sie den Abschnitt **Environment Variables**.
4. Tragen Sie Schlüssel (Key) und Wert (Value) ein.
   - Beispiel Key: `PASSWORD`
   - Beispiel Value: `GeheimesPasswort123!`

### Verwendung im Skript
Im Playwright-Code greifen Sie über `process.env.KEY` auf die Werte zu. Die Werte werden erst zur Laufzeit in der sicheren Worker-Umgebung injiziert.

```javascript
test('Secure Login', async ({ page }) => {
  await page.goto('https://deinkunde.com/login');
  
  // Sicherer Zugriff via process.env
  await page.fill('#password', process.env.PASSWORD);
  
  await page.click('#submit');
});
```

### Sicherheit

- Die Werte werden **verschlüsselt** in unserer Datenbank gespeichert.
- Sie sind im Frontend-Editor nach dem Speichern nicht mehr im Klartext einsehbar (je nach Berechtigung).
- Sie tauchen nicht im Screenshot-Log auf (sofern Sie sie nicht explizit `console.log`gen).

## Tipps für stabile Tests

- Nutzen Sie `data-testid` Attribute für Selektoren, wo möglich.
- Warten Sie auf Elemente (`expect(locator).toBeVisible()`) statt feste `sleep()` Zeiten zu nutzen.
- Halten Sie die Szenarien kurz und fokussiert (z.B. nur "Login" statt "Login + Kauf + Logout").