Playwright Basics: Text Validation, Login Testing, Checkboxes, and Radio Buttons

  await passField.fill('wrong_password');
    await submitBtn.click();

    // Verify error message appears
    await expect(errorAlert).toHaveText('Invalid username or password.');
});

test('successful login redirects to workspace', async ({ page }) => {
    await page.goto('/auth/login');

    await page.getByLabel('Username').fill('admin');
    await page.getByLabel('Password').fill('secure_pass_123');
    await page.getByRole('button', { name: 'Sign In' }).click();

    // Verify navigation and workspace content
    await expect(page).toHaveURL('/app/workspace');
    await expect(page.getByText('Welcome back, Admin')).toBeVisible();
});

});

**Rationale:**
- Testing `clear` and `fill` ensures input fields behave correctly under user manipulation.
- Verifying the URL and post-login content confirms the full authentication cycle.
- Using `getByLabel` links inputs to their accessible labels, improving test stability.

#### 3. Checkbox and Radio Button Interactions

Toggle controls require precise state management. Checkboxes allow multiple selections, while radio buttons enforce mutual exclusion. Tests must verify checked states, disabled states, and batch operations.

**Implementation Pattern:**
Use `check` and `uncheck` for toggles. Validate states with `toBeChecked` and `toBeDisabled`. Use loops for dynamic lists.

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

test.describe('User Preferences', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/settings/preferences');
    });

    test('toggle notification settings and verify state', async ({ page }) => {
        const emailNotif = page.getByLabel('Email Notifications');
        const smsNotif = page.getByLabel('SMS Alerts');
        const disabledOption = page.getByLabel('Legacy Alerts');

        // Check and verify
        await emailNotif.check();
        await expect(emailNotif).toBeChecked();

        // Uncheck and verify
        await emailNotif.uncheck();
        await expect(emailNotif).not.toBeChecked();

        // Verify disabled state
        await expect(disabledOption).toBeDisabled();

        // Multi-select validation
        await smsNotif.check();
        await expect(smsNotif).toBeChecked();
    });

    test('validate subscription tier selection', async ({ page }) => {
        const basicRadio = page.getByRole('radio', { name: 'Basic Plan' });
        const proRadio = page.getByRole('radio', { name: 'Pro Plan' });
        const resultText = page.getByTestId('selection-result');

        // Select Pro plan
        await proRadio.check();
        await expect(proRadio).toBeChecked();
        await expect(basicRadio).not.toBeChecked();

        // Verify result text updates
        await expect(resultText).toHaveText('Selected: Pro Plan');
    });

    test('batch enable all active features', async ({ page }) => {
        const enableAllBtn = page.getByRole('button', { name: 'Enable All' });
        const activeCheckboxes = page.locator('input[type="checkbox"]:not(:disabled)');

        await enableAllBtn.click();

        const count = await activeCheckboxes.count();
        for (let i = 0; i < count; i++) {
            await expect(activeCheckboxes.nth(i)).toBeChecked();
        }
    });
});

Rationale:

• check and uncheck handle the interaction logic, including waiting for the element to be actionable.
• toBeChecked and not.toBeChecked provide clear state verification.
• toBeDisabled ensures UI constraints are enforced.
• Looping through locators allows validation of dynamic lists without hardcoding indices.

Pitfall Guide

Avoid these common mistakes to maintain a healthy test suite.

Production Bundle

Action Checklist

• Adopt Semantic Locators: Replace CSS selectors with getByRole, getByLabel, or getByTestId for resilience.
• Verify State, Not Just Actions: Always assert the result of an interaction, such as text changes or URL updates.
• Test Error Scenarios: Include tests for invalid inputs, disabled controls, and validation messages.
• Group Related Tests: Use test.describe to organize tests by feature or page, improving readability and reporting.
• Leverage beforeEach: Use test.beforeEach for common setup steps like navigation to reduce duplication.
• Validate Dynamic Lists: Use loops and count-based assertions for checkboxes or items that vary in number.
• Remove Manual Waits: Trust Playwright's auto-waiting; eliminate waitForTimeout to improve speed and reliability.

Decision Matrix

Configuration Template

Use this playwright.config.ts to enable parallel execution, retries, and multi-browser support.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
    testDir: './tests',
    fullyParallel: true,
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 2 : 0,
    workers: process.env.CI ? 1 : undefined,
    reporter: 'html',
    use: {
        baseURL: 'https://app.example.com',
        trace: 'on-first-retry',
    },
    projects: [
        {
            name: 'chromium',
            use: { ...devices['Desktop Chrome'] },
        },
        {
            name: 'firefox',
            use: { ...devices['Desktop Firefox'] },
        },
        {
            name: 'webkit',
            use: { ...devices['Desktop Safari'] },
        },
    ],
});

Quick Start Guide

1. Initialize Project: Run npm init playwright@latest to scaffold the test environment and configuration.
2. Write Test: Create a test file in the tests directory using the patterns above. Use semantic locators and assertions.
3. Run Tests: Execute npx playwright test to run the suite. Use --headed for visual debugging.
4. View Report: Open the HTML report with npx playwright show-report to analyze results and traces.
5. Integrate CI: Add the Playwright action to your CI pipeline to run tests on every pull request.