TESTHEON Practice Lab

Component Lab F · Temporal and numeric controls

Date, Time, and Range Controls

Practise native and custom date selection, ranges, fixed timezone assertions, sliders, linked values, steppers, and deterministic async progress.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Native date input

The browser control writes a normalized ISO date to the visible result.

Release date: 2026-10-15.

Reusable custom calendar

A dialog calendar uses grid semantics, a stable October 2026 fixture, and keyboard-selectable dates.

October 2026

No custom date selected.

Date range

Start and end dates are validated together with an explicit invalid state.

Range: 2026-10-15 to 2026-10-18 (3 days).

Month, year, and time selectors

Each control reports a stable machine-readable value.

Month 2026-10 · year 2026 · time 09:30.

Fixed fictional timezone scenario

The default reference is fixed; ?now= accepts a valid ISO timestamp so tests can pin another instant.

Reference instant
UTC
Asia/Kolkata
America/New_York

Single slider

The range input keeps its visible numeric output synchronized.

Dual-thumb range

Two linked native sliders expose a valid minimum and maximum salary range.

Salary range: ₹50,000–₹1,50,000.

Dynamically linked values

Changing estimated hours or hourly rate immediately recalculates the synthetic project cost.

Estimated cost: ₹19,200.

Numeric stepper

Minus and plus buttons update the same labelled value with fixed bounds.

2

Retry count: 2.

Asynchronous job progress

Choose a controlled duration and wait for the progress bar and status to reach completion.

0%

Async job idle.

Passing examples

Start with observable behavior

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

Select a custom date
await page.getByRole('button', { name: 'Choose custom date' }).click();
await page.getByRole('gridcell', { name: 'October 18, 2026' }).click();
await expect(page.getByTestId('custom-date-result')).toHaveText('Selected date: 2026-10-18.');