Writing Playwright Tests for SupaGuard

While our AI can write tests for you, sometimes you need the precision of a manual script. SupaGuard uses standard Playwright syntax, making it easy for developers to write robust checks.

The Basics

Every check runs in an isolated browser environment. You have access to the global page object.

A Simple Example

Here is a script that checks if your pricing page loads and displays the correct currency.

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

test('check pricing page', async ({ page }) => {
  // 1. Visit the page
  await page.goto('https://your-saas.com/pricing');

  // 2. Click the monthly toggle
  await page.click('[data-testid="billing-toggle-monthly"]');

  // 3. Verify the price is correct
  const price = page.locator('.starter-plan-price');
  await expect(price).toContainText('$49');
});

Common Actions

Clicking

await page.click('button#submit');
await page.click('text=Log in');

Typing

await page.fill('input[name="email"]', 'user@example.com');
await page.type('#search', 'synthetic monitoring');

Waiting

SupaGuard (via Playwright) auto-waits for elements to be actionable. You rarely need manual waits.

// Explicitly waiting for a specific network response
await page.waitForResponse(resp => resp.url().includes('/api/auth') && resp.status() === 200);

Best Practices

Use Resilient Selectors: Prefer data-testid or user-facing text (text=Login) over brittle CSS classes (div > span > .btn-blue).
Keep it Focused: One check should test one core user flow (e.g., "Signup", "Checkout"). Don't try to test your whole app in one script.
Clean Up: If your test creates data (like a user), try to ensure it doesn't pollute your production database, or use a specific test user account.