Implementation:Getgauge Taiko Color Element
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for interacting with HTML color picker input elements provided by the Taiko browser automation library.
Description
The `Color` class extends the base `Element` class to represent `<input type="color">` elements in the DOM. It provides a `select(value)` method that accepts color values in multiple formats -- hexadecimal (with or without the leading `#`) and RGB notation (e.g., `rgb(255, 0, 0)`). The method validates the color using `isValidColor()`, converts RGB values to hexadecimal via `convertFullRGBToHex()` when necessary, ensures the hex string is prefixed with `#`, and then sets the element's value through the Chrome DevTools Protocol runtime. It also provides a `value()` method that retrieves the current color value from the element. All mutations are wrapped in `doActionAwaitingNavigation` to handle any navigation triggered by the color change.
Usage
Use this class when you need to automate interactions with color picker inputs, such as theme customization forms or design tool interfaces. Instances of `Color` are not created directly by library consumers. Instead, calling the Taiko API function `color()` returns an `ElementWrapper` that internally constructs `Color` instances via the static `Color.from(element, description)` factory method.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elements/color.js
- Lines: 1-70
Signature
class Color extends Element {
async select(value) { ... }
async value() { ... }
static from(element, description) { ... }
}
Import
// Internal class, accessed through Taiko API
const { color } = require('taiko');
// Returns ElementWrapper that creates Color instances internally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| value | string | Yes (for `select`) | The color to set. Accepts hex codes (e.g., `#ff0000` or `ff0000`) or RGB strings (e.g., `rgb(255, 0, 0)`). Must pass `isValidColor()` validation. |
| element | Element | Yes (for `from`) | Base Element instance to convert into a Color element |
| description | string | Yes (for `from`) | Human-readable description used in event logging |
Outputs
| Name | Type | Description |
|---|---|---|
| select() | Promise<void> | Validates the provided color, converts RGB to hex if needed, ensures `#` prefix, and sets the color on the DOM element. Throws an Error if the color code is invalid or if the runtime call fails. |
| value() | Promise<string> | Returns the current hex color value of the element (e.g., `#ff0000`). |
| from() | Color | Static factory that constructs a new Color from an existing Element instance. |
Usage Examples
Basic Usage
const { openBrowser, goto, color, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/settings');
// Select a color using hex notation
await color('Theme Color').select('#3498db');
// Select a color using RGB notation
await color('Theme Color').select('rgb(52, 152, 219)');
// Retrieve the current color value
const currentColor = await color('Theme Color').value();
console.log('Current color:', currentColor); // #3498db
await closeBrowser();
})();