Implementation:Getgauge Taiko RadioButton Element
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for interacting with HTML radio button input elements provided by the Taiko browser automation library.
Description
The `RadioButton` class extends the base `Element` class to represent `<input type="radio">` elements in the DOM. It provides methods to query whether a radio button is currently selected, to programmatically select it, and to deselect it. State changes are performed via the private helper function `setChecked(value)`, which uses the native value setter (registered through the parent class) to set the `checked` property and then dispatches `change`, `input`, and `click` events in sequence to simulate genuine user interaction. The `select()` method registers the native value setter before performing the action, while `deselect()` proceeds directly. Both methods are wrapped in `doActionAwaitingNavigation` to handle any page navigation that might be triggered by the state change, and both highlight the element in headful mode.
Usage
Use this class when you need to automate radio button interactions such as selecting payment methods, choosing shipping options, or picking from mutually exclusive option groups. Instances of `RadioButton` are not created directly by library consumers. Instead, calling the Taiko API function `radioButton()` returns an `ElementWrapper` that internally constructs `RadioButton` instances via the static `RadioButton.from(element, description)` factory method.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elements/radioButton.js
- Lines: 1-79
Signature
class RadioButton extends Element {
async isSelected() { ... }
async select() { ... }
async deselect() { ... }
static from(element, description) { ... }
}
// Private helper (module-scoped)
function setChecked(value) {
// Sets this.checked via native setter, dispatches change/input/click events
}
Import
// Internal class, accessed through Taiko API
const { radioButton } = require('taiko');
// Returns ElementWrapper that creates RadioButton instances internally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| element | Element | Yes (for `from`) | Base Element instance to convert into a RadioButton |
| description | string | Yes (for `from`) | Human-readable description used in event logging |
Outputs
| Name | Type | Description |
|---|---|---|
| isSelected() | Promise<boolean> | Returns `true` if the radio button is currently selected (checked), `false` otherwise. Emits a success event describing the state. |
| select() | Promise<void> | Sets the radio button to selected state. Registers native value setter, highlights element in headful mode, dispatches change/input/click events. Awaits navigation. |
| deselect() | Promise<void> | Sets the radio button to deselected state. Highlights element in headful mode, dispatches change/input/click events. Awaits navigation. |
| from() | RadioButton | Static factory that constructs a new RadioButton from an existing Element instance. |
Usage Examples
Basic Usage
const { openBrowser, goto, radioButton, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/form');
// Select the "Express Shipping" radio button
await radioButton('Express Shipping').select();
// Verify it is selected
const selected = await radioButton('Express Shipping').isSelected();
console.log('Is selected:', selected); // true
// Deselect the radio button (note: typically handled by selecting another option)
await radioButton('Express Shipping').deselect();
await closeBrowser();
})();