claude-skills-reference/engineering-team/playwright-pro/templates/forms/conditional-fields.md

Conditional Fields Template

Tests show/hide fields based on selection and correct validation of visible fields only.

Prerequisites

• Form at {{baseUrl}}/{{formPath}}
• Trigger field: {{triggerField}} (e.g. country, type selector)
• Conditional field shown when value is {{triggerValue}}

---

TypeScript

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

test.describe('Conditional Fields', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/{{formPath}}');
  });

  // Happy path: conditional field shown on trigger
  test('shows conditional field when trigger value selected', async ({ page }) => {
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
  });

  // Happy path: conditional field hidden when trigger changes
  test('hides conditional field when trigger changes back', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
  });

  // Happy path: form submits with conditional field filled
  test('submits form when conditional field is shown and filled', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i }).fill('{{conditionalFieldValue}}');
    await page.getByRole('button', { name: /submit/i }).click();
    await expect(page.getByRole('alert')).toContainText(/submitted|saved/i);
  });

  // Error case: conditional field required when visible
  test('validates conditional field when it is visible', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await page.getByRole('button', { name: /submit/i }).click();
    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeVisible();
  });

  // Error case: hidden field not validated
  test('does not validate conditional field when hidden', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
    await page.getByRole('button', { name: /submit/i }).click();
    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeHidden();
  });

  // Edge case: conditional field value cleared when hidden
  test('clears conditional field value when field is hidden', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i }).fill('some value');
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
    // Re-show and verify value is cleared
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toHaveValue('');
  });

  // Edge case: radio trigger shows/hides field
  test('shows field based on radio button selection', async ({ page }) => {
    await page.getByRole('radio', { name: '{{radioTriggerLabel}}' }).check();
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
    await page.getByRole('radio', { name: '{{radioOtherLabel}}' }).check();
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
  });
});

---

JavaScript

const { test, expect } = require('@playwright/test');

test.describe('Conditional Fields', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('{{baseUrl}}/{{formPath}}');
  });

  test('shows conditional field when trigger selected', async ({ page }) => {
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
  });

  test('validates visible conditional field on submit', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
    await page.getByRole('button', { name: /submit/i }).click();
    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeVisible();
  });

  test('does not validate hidden conditional field', async ({ page }) => {
    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
    await page.getByRole('button', { name: /submit/i }).click();
    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeHidden();
  });
});

Variants

Variant	Description
Show on trigger	Selecting value reveals hidden field
Hide on change	Changing back hides field again
Submit with field	Visible field filled → success
Validate visible	Visible empty field → required error
Skip hidden	Hidden field not validated
Clear on hide	Value cleared when field hidden
Radio trigger	Radio button controls field visibility