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
});
});Navigation
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();Clicking Links
// 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();Dropdowns and Checkboxes
// 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
- Set up Alerting for test failures
- Configure Communications channels