Implementation:Getgauge Taiko DollarWrapper

Knowledge Sources	Getgauge_Taiko
Domains	Browser_Automation, Element_Selection
Last Updated	2026-02-12 03:00 GMT

Overview

Concrete tool for selecting elements using custom CSS, XPath, or JavaScript function selectors provided by the Taiko browser automation library.

Description

`DollarWrapper` is a specialized subclass of `ElementWrapper` that powers Taiko's `$()` selector -- the most flexible element selection mechanism in the library. Unlike other wrappers that target a specific HTML tag, `DollarWrapper` delegates to one of three selector strategies based on the type of argument passed:

Function selectors -- When the argument is a JavaScript function, it is serialized and executed in the browser context via `runtimeHandler.findElements()`. The function must return a DOM `Node` or `NodeList`; otherwise an error is thrown. Additional arguments can be passed through `_options.args`.
XPath selectors -- When the string argument starts with `/` or `(`, it is treated as an XPath expression and evaluated using the `$$xpath()` search function.
CSS selectors -- All other string arguments are treated as CSS selectors and evaluated using the `$$()` search function.

After the initial element retrieval, results are further filtered through `handleRelativeSearch()` to apply any proximity-based constraints.

Usage

Use `DollarWrapper` (via the `$()` selector in Taiko) when you need maximum flexibility in element selection. This is the appropriate selector when targeting elements by CSS selector strings, XPath expressions, or custom JavaScript query functions that return DOM nodes.

Code Reference

Source Location

Repository: Getgauge_Taiko
File: lib/elementWrapper/dollarWrapper.js
Lines: 1-59

Signature

class DollarWrapper extends ElementWrapper {
  constructor(attrValuePairs, _options, ...args) {
    super('CustomSelector', 'query', attrValuePairs, _options, ...args);
    this._get = async () => {
      // Branch 1: Function selector -- serialize and execute in browser
      // Branch 2: XPath selector -- starts with '/' or '('
      // Branch 3: CSS selector -- all other strings
    };
  }
}

Import

const { $ } = require('taiko');

I/O Contract

Inputs

Name	Type	Required	Description
attrValuePairs	string / Function	Yes	The selector to use. A string starting with `/` or `(` is treated as XPath. Any other string is treated as a CSS selector. A function is serialized and executed in the browser context and must return a `Node` or `NodeList`.
_options	Object	No	Options object. When using function selectors, `_options.args` passes additional arguments to the function executed in the browser context.
...args	RelativeSearchElement[]	No	Zero or more relative search elements (e.g., `toRightOf()`, `below()`) used for proximity-based filtering of results.

Outputs

Name	Type	Description
DollarWrapper	DollarWrapper	An `ElementWrapper` instance representing all matched elements. Delegates to the first match for actions like `click()`, `exists()`, and `text()`.

Usage Examples

CSS Selector

const { openBrowser, goto, $, click, closeBrowser } = require('taiko');

(async () => {
  await openBrowser();
  await goto('https://example.com');
  await click($('.submit-button'));
  await closeBrowser();
})();

XPath Selector

const { openBrowser, goto, $, click, closeBrowser } = require('taiko');

(async () => {
  await openBrowser();
  await goto('https://example.com');
  await click($('//div[@class="content"]/a'));
  await closeBrowser();
})();

Function Selector

const { openBrowser, goto, $, click, closeBrowser } = require('taiko');

(async () => {
  await openBrowser();
  await goto('https://example.com');
  await click($(
    (args) => document.querySelector(`#item-${args}`),
    { args: '42' }
  ));
  await closeBrowser();
})();

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment