Playwright Monitor

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:

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

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

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