Playwright Monitor

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:

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

test('User can login', async ({ page }) => {
  // 1. Navigation
  await page.goto('https://app.example.com/login');
  
  // 2. Formular ausfüllen (Nutzung von Env-Variablen)
  await page.fill('input[name="email"]', 'monitor-user@example.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.

test('Secure Login', async ({ page }) => {
  await page.goto('https://example.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.loggen).

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").