SupaGuardSupaGuard Docs
Playwright

Complete Playwright Guide

A comprehensive guide to mastering Playwright tests in SupaGuard.

Test Structure

Every Playwright test in SupaGuard follows this structure:

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

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Setup code runs before each test
    await page.goto('https://your-site.com');
  });

  test('should do something', async ({ page }) => {
    // Test implementation
  });

  test('should do something else', async ({ page }) => {
    // Another test
  });
});

Going to Pages

// Navigate to URL
await page.goto('https://example.com');

// Wait for navigation
await page.waitForURL('**/dashboard');

// Go back/forward
await page.goBack();
await page.goForward();
// Click and wait for navigation
await page.getByRole('link', { name: 'About' }).click();
await page.waitForURL('**/about');

Forms and Inputs

Filling Forms

// Text input
await page.getByLabel('Email').fill('user@example.com');

// Password
await page.getByLabel('Password').fill('secret123');

// Submit form
await page.getByRole('button', { name: 'Sign In' }).click();
// Select dropdown
await page.getByLabel('Country').selectOption('US');

// Checkbox
await page.getByLabel('Accept terms').check();

// Radio button
await page.getByLabel('Option A').check();

Assertions

Common Assertions

// Visibility
await expect(page.getByText('Welcome')).toBeVisible();
await expect(page.getByText('Error')).toBeHidden();

// Text content
await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByRole('heading')).toContainText('Dash');

// URL and title
await expect(page).toHaveURL(/.*dashboard/);
await expect(page).toHaveTitle('My App');

// Count
await expect(page.getByRole('listitem')).toHaveCount(5);

Advanced Patterns

API Mocking

await page.route('**/api/users', async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: 'John' }]),
  });
});

Screenshots

// Full page screenshot
await page.screenshot({ path: 'screenshot.png', fullPage: true });

// Element screenshot
await page.getByRole('main').screenshot({ path: 'main.png' });

Next Steps

On this page