Principle:Getgauge Taiko Specialized Input Controls

Knowledge Sources	Taiko
Domains	Browser_Automation, Form_Interaction
Last Updated	2026-02-12 00:00 GMT

Overview

Techniques for interacting with HTML5 specialized input types including date/time pickers, range sliders, and color pickers.

Description

HTML5 introduced specialized input types (date, datetime-local, month, time, week, range, color) that cannot be filled with simple text input. Each type has a browser-native widget (calendar picker, slider, color palette) that does not respond to standard keyboard input in the same way as a regular text field. Attempting to type a date string into a date input, for example, does not reliably set the value because browsers render these inputs with specialized UI controls that intercept keyboard events.

Each specialized input type requires a type-specific value setting approach:

• Date and time fields (date, datetime-local, month, time, week) -- Accept JavaScript Date objects. The implementation converts the Date object to the appropriate string format for the input type (e.g., YYYY-MM-DD for date inputs, HH:MM for time inputs) and sets the value programmatically.
• Range sliders (range) -- Accept numeric values. The implementation sets the value property to the specified number, respecting the min, max, and step attributes defined on the element.
• Color pickers (color) -- Accept hex color strings (e.g., #ff0000). The implementation sets the value property to the specified color string.

Values are set via CDP Runtime execution in the browser context, which allows direct manipulation of the element's value property. After setting the value, change and input events are dispatched to trigger any associated event handlers in the application.

Usage

Use specialized input controls when automating forms that include:

• Date pickers -- Selecting birth dates, appointment dates, booking dates, or date range filters.
• Time selectors -- Setting meeting times, alarm times, or scheduling hours.
• Date-time fields -- Entering precise timestamps for event scheduling or logging.
• Range sliders -- Adjusting volume levels, price ranges, rating scores, or any numeric value presented as a slider.
• Color pickers -- Choosing theme colors, background colors, or any configurable color value.
• Week/month selectors -- Selecting specific weeks or months for reporting or scheduling purposes.

Theoretical Basis

The specialized input control interaction follows a common pattern with type-specific variations:

Common Pattern

1. Locate the input element -- Find the specialized input by its label text, id, name, or other attributes.
2. Convert the value -- Transform the provided value into the format expected by the input type.
3. Set the value via CDP -- Execute JavaScript in the browser context to set the element's value property directly.
4. Dispatch events -- Fire input and change events to notify the application of the value change.

Type-Specific Conversions

Input Type	JavaScript Input	Internal Format	Example
date	Date object	YYYY-MM-DD	2020-01-15
datetime-local	Date object	YYYY-MM-DDTHH:MM	2020-01-15T09:30
month	Date object	YYYY-MM	2020-01
time	Date object	HH:MM	09:30
week	Date object	YYYY-Www	2020-W03
range	number	Numeric string	75
color	string	Hex color	#ff6600

The direct value-setting approach via CDP is necessary because:

• Native browser widgets intercept standard keyboard input, making character-by-character typing unreliable.
• Each browser renders these widgets differently, so visual interaction (clicking specific parts of the widget) is fragile across browsers.
• The CDP approach provides a consistent, cross-platform mechanism for value assignment.

Related Pages

Implemented By

• Implementation:Getgauge_Taiko_Specialized_Inputs