TESTHEON Practice Lab

Component Lab A · Fields

Input Components

Practice filling, clearing, validating, waiting, and selecting values across native and custom inputs while learning when labels, placeholders, and state assertions matter.

Start the fixtureRead the locator guide

PRACTICE FIXTURE — intentionally built for automation practice

Native text-like inputs

Each control uses its real HTML input type so Playwright can exercise browser-native semantics.

Password is hidden.

  • API testing
  • Accessibility testing
  • Visual regression

3 results visible.

Masked phone and card-style inputs

Formatting is deterministic and accepts digits only. Use obviously fake values such as 4111 1111 1111 1111.

0/10 phone digits entered.

0/16 fake card digits entered.

Disabled, readonly, dynamic, and populated fields

Assert state before action, then wait for a user-visible result rather than an arbitrary timeout.

Field disabled.

Waiting to populate.

Placeholder-only input

This field intentionally has no label. It exists to show why placeholder locators are weaker and less accessible.

Intentional anti-pattern

Validation and debounce

One field validates a fixed reference format; the other exposes its debounced value after 300 ms.

Use the format QA-123.

Debounced value: (empty)

Autosuggest and keyboard autocomplete

Autosuggest exposes clickable city suggestions. The ARIA combobox supports Arrow Up, Arrow Down, and Enter.

    Type to see city suggestions.

    Type and use the keyboard to select.

    Passing examples

    Start with observable behavior

    These snippets match executable tests stored inexamples/playwright-ts/.

    Label-first input test
    import { test, expect } from '@playwright/test';

test('fills labelled inputs', async ({ page }) => {
  await page.goto('/practice/components/inputs/');
  await page.getByLabel('Work email').fill('learner@example.test');
  await expect(page.getByLabel('Work email')).toHaveValue('learner@example.test');
});
    Debounce assertion
    await page.getByLabel('Debounced project name').fill('Apollo');
await expect(page.getByTestId('debounce-result')).toHaveText('Debounced value: Apollo');
    Keyboard autocomplete
    const skill = page.getByRole('combobox', { name: 'Automation skill' });
await skill.fill('Play');
await skill.press('ArrowDown');
await skill.press('Enter');
await expect(skill).toHaveValue('Playwright automation');