---
title: "Playwright Monitor"
description: "For critical processes like Login, Checkout, or Registration, a simple HTTP check is often insufficient. The Playwright Monitor loads your website in a real browser (Headless Chromium) and executes a script defined by you."
---

This simulates a real user and uncovers JavaScript errors, broken buttons, or UI issues.

## How it works

We execute your Playwright script in our secure cloud environment.

- **Success**: The script runs to completion without errors.
- **Error**: An `expect` check fails or a timeout occurs. We automatically save a **screenshot** and the error message.

## Example: Testing Login

Here is a simple script to test a login process:

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

test('User can login', async ({ page }) => {
  // 1. Navigation
  await page.goto('https://app.deinkunde.com/login');
  
  // 2. Fill form (Using Env Variables)
  await page.fill('input[name="email"]', 'monitor-user@deinkunde.com');
  await page.fill('input[name="password"]', process.env.MONITOR_PASSWORD);
  
  // 3. Submit
  await page.click('button[type="submit"]');
  
  // 4. Verification (Wait for dashboard element)
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.locator('.welcome-message')).toContainText('Hello');
});
```

## Environment Variables (Secrets)

You should never store passwords, API keys, or sensitive data directly in the script ("hardcoding"). Instead, use **Environment Variables**.

### Setup

1. Navigate to **Monitor Settings**.
2. Open the **Advanced Settings** section.
3. Find the **Environment Variables** section.
4. Enter the Key and Value.
   - Example Key: `PASSWORD`
   - Example Value: `SecretPassword123!`

### Usage in Script
In Playwright code, access values via `process.env.KEY`. The values are injected into the secure worker environment only at runtime.

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

### Security

- Values are stored **encrypted** in our database.
- They are not visible in plain text in the frontend editor after saving (depending on permissions).
- They do not appear in the screenshot log (unless you explicitly `console.log` them).

## Tips for Stable Tests

- Use `data-testid` attributes for selectors where possible.