Implementation:Getgauge Taiko Specialized Inputs

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

Overview

Concrete tools for interacting with HTML5 specialized input types including date/time pickers, range sliders, and color pickers provided by the Taiko library.

Description

This page covers three Taiko APIs for specialized HTML5 input controls that cannot be filled with standard text input: timeField() for date and time inputs, range() for range sliders, and color() for color pickers. Each API returns a wrapper object with a select() method that accepts a type-appropriate value: Date objects for time fields, numeric values for range sliders, and hex color strings for color pickers.

All three wrappers set values via CDP Runtime execution in the browser context, dispatching change and input events to trigger application-level handlers.

Usage

Use these APIs when automating forms that include HTML5 specialized input types: date pickers, time selectors, datetime-local fields, week/month selectors, range sliders (volume controls, price filters), or color pickers (theme customization).

Code Reference

Source Locations

TimeField

• Repository: Taiko
• File: lib/taiko.js (L1728), lib/elementWrapper/timeFieldWrapper.js (L64-97), lib/elements/timeField.js

Range

• Repository: Taiko
• File: lib/taiko.js (L1752), lib/elementWrapper/rangeWrapper.js (L44-75), lib/elements/range.js

Color

• Repository: Taiko
• File: lib/taiko.js (L1780), lib/elementWrapper/colorWrapper.js (L44-71), lib/elements/color.js

Signatures

// TimeField - for date, datetime-local, month, time, week inputs
timeField(labelOrAttrValuePairs, _options, ...args) -> TimeFieldWrapper

// Range - for range slider inputs
range(attrValuePairs, _options, ...args) -> RangeWrapper

// Color - for color picker inputs
color(attrValuePairs, _options, ...args) -> ColorWrapper

Import

const { timeField, range, color } = require('taiko');

I/O Contract

TimeField Inputs

Name	Type	Required	Description
labelOrAttrValuePairs	string / Object	Yes	Label text or attribute-value pairs to identify the time/date input element.
_options	Object	No	Configuration options for element search behavior.
args	RelativeSearchElement[]	No	Proximity selectors to narrow element search.

TimeFieldWrapper Methods

Method	Signature	Description
select	select(value: Date) -> Promise<string>	Sets the field value from a JavaScript Date object. Converts to the appropriate format based on input type (date, datetime-local, month, time, week). Returns the formatted value string.
value	value() -> Promise<string>	Returns the current value of the time field.
exists	exists() -> Promise<boolean>	Returns true if the element exists in the DOM.

Supported Input Types

Input Type	Date Conversion Format	Example Value
date	YYYY-MM-DD	2020-01-15
datetime-local	YYYY-MM-DDTHH:MM	2020-01-15T09:30
month	YYYY-MM	2020-01
time	HH:MM	09:30
week	YYYY-Www	2020-W03

Range Inputs

Name	Type	Required	Description
attrValuePairs	Object	Yes	Attribute-value pairs to identify the range input element (e.g., {id: 'volume'}).
_options	Object	No	Configuration options for element search behavior.
args	RelativeSearchElement[]	No	Proximity selectors to narrow element search.

RangeWrapper Methods

Method	Signature	Description
select	select(value: number) -> Promise<string>	Sets the slider to the specified numeric value. The value should be within the element's min/max range. Returns the set value as a string.
value	value() -> Promise<string>	Returns the current value of the range slider.
exists	exists() -> Promise<boolean>	Returns true if the element exists in the DOM.

Color Inputs

Name	Type	Required	Description
attrValuePairs	Object	Yes	Attribute-value pairs to identify the color input element (e.g., {id: 'theme-color'}).
_options	Object	No	Configuration options for element search behavior.
args	RelativeSearchElement[]	No	Proximity selectors to narrow element search.

ColorWrapper Methods

Method	Signature	Description
select	select(value: string) -> Promise<string>	Sets the color picker to the specified hex color value (e.g., '#ff0000'). Returns the set color value.
value	value() -> Promise<string>	Returns the current color value as a hex string.
exists	exists() -> Promise<boolean>	Returns true if the element exists in the DOM.

Outputs

Name	Type	Description
timeField return	TimeFieldWrapper	Wrapper providing select(), value(), and exists() methods for date/time input interaction.
range return	RangeWrapper	Wrapper providing select(), value(), and exists() methods for range slider interaction.
color return	ColorWrapper	Wrapper providing select(), value(), and exists() methods for color picker interaction.

Usage Examples

Select a Date

// Set a date input labeled 'Birthday' to January 15, 2020
await timeField('Birthday').select(new Date('2020-01-15'));

Select a DateTime

// Set a datetime-local input to a specific date and time
await timeField({id: 'meeting-time'}).select(new Date('2020-06-15T14:30'));

Select a Time

// Set a time input to 9:30 AM
await timeField('Alarm').select(new Date('2020-01-01T09:30'));

Set a Range Slider

// Set a volume slider to 75
await range({id: 'volume'}).select(75);

Set a Color Picker

// Set a color picker to orange
await color({id: 'theme-color'}).select('#ff6600');

Get Current Values

// Read current values from specialized inputs
const dateVal = await timeField('Birthday').value();
const rangeVal = await range({id: 'volume'}).value();
const colorVal = await color({id: 'theme-color'}).value();

Related Pages

Implements Principle

• Principle:Getgauge_Taiko_Specialized_Input_Controls

Requires Environment

• Environment:Getgauge_Taiko_Node_Runtime
• Environment:Getgauge_Taiko_Chromium_Browser