Implementation:Getgauge Taiko Element Base
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Abstract base class for all DOM element representations in the Taiko browser automation library.
Description
The `Element` class is the foundational abstract base class from which all specialized element types (`CheckBox`, `Color`, `DropDown`, `RadioButton`, `Range`, `TextBox`, `TimeField`) inherit. It encapsulates a CDP (Chrome DevTools Protocol) `objectId` reference to a live DOM node, a human-readable `description` string, and a `runtimeHandler` for executing JavaScript functions against the browser context. The class provides a comprehensive set of DOM introspection methods: `text()` retrieves the inner text (handling text nodes by accessing the parent element), `getAttribute(value)` fetches any HTML attribute, `isVisible()` checks offset dimensions and client rects, `isWritable()` inspects tag name, content editability, disabled state, and read-only status, `isDisabled()` checks both element and parent disabled state, `isConnected()` verifies DOM attachment, `isPassword()` checks if the input type is password, and `isDraggable()` checks the draggable property. The `registerNativeValueSetter()` method defines a `setNativeValue` utility on the element's prototype that correctly invokes native property setters, which is critical for triggering framework-aware state changes in React and similar libraries. The static `create()` factory method converts an array of object IDs into Element instances.
Usage
This class is not used directly by library consumers. It serves as the internal base for all element subclasses and is accessed indirectly through Taiko's selector API functions (`$`, `text`, `image`, etc.) which return `ElementWrapper` instances that delegate to `Element` and its subclasses.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elements/element.js
- Lines: 1-193
Signature
class Element {
constructor(objectId, description, runtimeHandler) { ... }
get() { ... }
async text() { ... }
async getAttribute(value) { ... }
async isVisible() { ... }
async isWritable() { ... }
async isDisabled() { ... }
async isConnected() { ... }
async isPassword() { ... }
async isDraggable() { ... }
async registerNativeValueSetter() { ... }
static create(objectIds, runtimeHandler) { ... }
// Private helper
async _executeAndGetValue(callback) { ... }
}
Import
// Internal class, used by other element subclasses
const Element = require('./element');
// Not directly accessed by Taiko API consumers
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| objectId | string | Yes (constructor) | CDP Runtime.RemoteObjectId referencing the DOM node in the browser |
| description | string | Yes (constructor) | Human-readable description for logging and event emission |
| runtimeHandler | object | Yes (constructor) | Handler providing `runtimeCallFunctionOn()` for executing JavaScript in the browser context |
| objectIds | string[] | Yes (for `create`) | Array of CDP object IDs to convert into Element instances |
| value | string | Yes (for `getAttribute`) | The name of the HTML attribute to retrieve |
Outputs
| Name | Type | Description |
|---|---|---|
| get() | string | Returns the CDP `objectId` for this element |
| text() | Promise<string> | Returns the `innerText` of the element. For text nodes, returns the parent element's `innerText`. |
| getAttribute() | null> | Returns the value of the specified HTML attribute, or `null` if not present |
| isVisible() | Promise<boolean> | Returns `true` if the element has non-zero offset dimensions or client rects |
| isWritable() | Promise<boolean> | Returns `true` if the element is an INPUT, TEXTAREA, or SELECT (or contentEditable) and is neither disabled nor read-only |
| isDisabled() | Promise<boolean> | Returns `true` if the element or its parent element is disabled |
| isConnected() | Promise<boolean> | Returns `true` if the element is currently attached to the DOM tree |
| isPassword() | Promise<boolean> | Returns `true` if the element's type attribute is `"password"` |
| isDraggable() | Promise<boolean> | Returns `true` if the element or its parent has the `draggable` property set |
| registerNativeValueSetter() | Promise<void> | Defines a `setNativeValue` method on the element's constructor prototype that invokes the native property setter, enabling correct value changes in framework-managed inputs (e.g., React controlled components) |
| create() | Element[] | Static factory that maps an array of object IDs to new Element instances |
Usage Examples
Basic Usage
const { openBrowser, goto, $, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com');
// The $ selector returns an ElementWrapper backed by Element instances
const heading = await $('h1').text();
console.log('Heading text:', heading);
// Check element properties via the ElementWrapper delegation
const isVisible = await $('h1').isVisible();
console.log('Is visible:', isVisible);
// Get an HTML attribute
const href = await $('a.main-link').attribute('href');
console.log('Link href:', href);
await closeBrowser();
})();