Browser Test

Automate user interactions with Playwright. Navigate pages, fill forms, click buttons, and validate content. Browser tests run in isolated containers with Chromium, Firefox, or WebKit.

Example

/**
 * Authentication flow test (Login & Logout).
 * 
 * Purpose:
 * - Verify user can successfully log in with valid credentials
 * - Verify user is redirected to the secure area
 * - Verify user can log out successfully
 * 
 * @see https://playwright.dev/docs/writing-tests
 */
import { expect, test } from '@playwright/test';

const APP_URL = 'https://the-internet.herokuapp.com';
const CREDENTIALS = { username: 'tomsmith', password: 'SuperSecretPassword!' };

test.describe('authentication flow', () => {
  test('user can sign in and sign out', async ({ page }) => {
    await page.goto(APP_URL + '/login');

    // Fill login form
    await page.getByLabel('Username').fill(CREDENTIALS.username);
    await page.getByLabel('Password').fill(CREDENTIALS.password);
    await page.getByRole('button', { name: 'Login' }).click();

    // Verify successful login
    await expect(page.getByText('You logged into a secure area!')).toBeVisible();
    
    // Perform logout
    await page.getByRole('link', { name: 'Logout' }).click();
    
    // Verify redirect to login page
    await expect(page).toHaveURL(APP_URL + '/login');
  });
});

📚 Playwright Writing Tests

Create Test

Go to Create → Browser Test
Write your test script
Click Run to validate
Save when passing

Common Actions

Action	Code
Navigate	`await page.goto('url')`
Click	`await page.click('selector')`
Fill input	`await page.fill('selector', 'value')`
Check text	`await expect(page.locator('selector')).toHaveText('text')`
Wait	`await page.waitForSelector('selector')`
Screenshot	`await page.screenshot({ path: 'file.png' })`

Selectors

Use stable selectors:

// Good - data attributes
await page.click('[data-testid="submit-btn"]');

// Good - role-based
await page.click('button:has-text("Submit")');

// Avoid - class names change
await page.click('.btn-primary');

Assertions

// URL
await expect(page).toHaveURL('/dashboard');

// Text visible
await expect(page.locator('.message')).toBeVisible();

// Text content
await expect(page.locator('h1')).toHaveText('Welcome');

Tips

Use data-testid attributes for stable selectors
Playwright auto-waits for elements
Avoid fixed waitForTimeout() calls
Take screenshots on failure for debugging
Use getSecret().toString() for passwords and API keys

Learn More

Playwright Documentation — Complete Playwright guide
Playwright Locators — Finding elements reliably
Playwright Assertions — Available assertion methods
Playwright Auto-waiting — How Playwright waits for elements