Implementation:Getgauge Taiko ButtonWrapper
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Element_Selection |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for selecting HTML button and button-like input elements provided by the Taiko browser automation library.
Description
`ButtonWrapper` is a specialized subclass of `ElementWrapper` that locates HTML button elements on a page. It searches across two categories of elements: native `<button>` tags and `<input>` elements whose type attribute is one of `submit`, `reset`, `button`, or `image`. The class exposes two internal getter strategies -- `getByInput()` and `getByButton()` -- and combines them in its `_get()` method, which tries the input-based strategy first and falls back to the button-tag strategy if no matching inputs are found.
A standalone helper function, `getButtonElementWithLabel()`, supports label-based discovery. It finds `<label>` elements whose `innerText` contains the search term, then resolves the associated button-like element either through the label's `for` attribute or by inspecting child nodes. It also queries for `<input>` elements whose `value` attribute matches the label text.
Usage
Use `ButtonWrapper` (via the `button()` selector in Taiko) when you need to interact with clickable button elements on a page. This is the appropriate selector when the target is a `<button>` tag, or an `<input>` with type `submit`, `reset`, `button`, or `image`. The selector accepts a label string, attribute-value pairs, or proximity selectors to narrow the match.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elementWrapper/buttonWrapper.js
- Lines: 1-79
Signature
class ButtonWrapper extends ElementWrapper {
constructor(attrValuePairs, _options, ...args) {
super('Button', 'label', attrValuePairs, _options, ...args);
this.getByButton = getElementGetter(selector, matchFn, 'button');
this.getByInput = getElementGetter(selector, labelFn, 'input[type="submit"],input[type="reset"],input[type="button"],input[type="image"]');
this._get = async () => { /* tries inputs first, falls back to buttons */ };
}
}
function getButtonElementWithLabel(searchElement, label) { /* finds buttons by label text or value attributes */ }
Import
const { button } = require('taiko');
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| attrValuePairs | string / Object / RegExp | No | A label string to search for, an attribute-value pair object for CSS attribute matching, or a regular expression. When a string is provided, it is matched against button text, label text, and input value attributes. |
| _options | Object | No | Options object passed through to the parent `ElementWrapper`. May include proximity selectors or configuration overrides. |
| ...args | RelativeSearchElement[] | No | Zero or more relative search elements (e.g., `toLeftOf()`, `near()`) used for proximity-based filtering of results. |
Outputs
| Name | Type | Description |
|---|---|---|
| ButtonWrapper | ButtonWrapper | An `ElementWrapper` instance representing all matched button elements. Delegates to the first match for actions like `click()`, `exists()`, and `text()`. |
Usage Examples
Basic Usage
const { openBrowser, goto, button, click, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/form');
await click(button('Submit'));
await closeBrowser();
})();
With Attribute-Value Pairs
const { openBrowser, goto, button, click, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/form');
await click(button({ id: 'login-btn' }));
await closeBrowser();
})();
Existence Check
const { openBrowser, goto, button, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/form');
const found = await button('Cancel').exists();
console.log('Cancel button exists:', found);
await closeBrowser();
})();