Implementation:Getgauge Taiko Focus
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, User_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for programmatically setting keyboard focus on a web page element provided by the Taiko browser automation library.
Description
The `focus` function transfers keyboard focus to a specified DOM element using the browser's native `focus()` method executed through the Chrome DevTools Protocol. The algorithm proceeds in three steps:
1. **Element Resolution:** If the `selector` parameter is a Taiko selector, an Element wrapper, or a string CSS selector, the function calls `waitAndGetActionableElement` to locate the element in the DOM and wait for it to become actionable. If the selector is already a resolved element reference, it is used directly.
2. **Optional Highlighting:** When running in headful mode (`defaultConfig.headful` is true) and the `highlight` parameter is set to `true`, the element is visually highlighted before focus is applied, aiding in visual debugging and test observation.
3. **Focus Execution:** The function uses `runtimeHandler.runtimeCallFunctionOn` to execute a small function (`this.focus()`) in the context of the target element's JavaScript object via CDP. This invokes the native DOM `focus()` method on the element, which triggers the browser's standard focus behavior including firing `focus` and `focusin` events, updating `document.activeElement`, and showing the element's focus ring if applicable.
The entire action is wrapped in `doActionAwaitingNavigation` so that any page navigation triggered by the focus event (e.g., an `onfocus` handler that redirects) is properly awaited according to the provided options.
Usage
Use `focus` when you need to direct keyboard focus to a specific element before performing keyboard input. Common scenarios include focusing an input field before typing, focusing a contenteditable div, shifting focus to trigger validation logic, activating dropdown menus that respond to focus events, or testing accessibility workflows that depend on tab order and focus management.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/actions/focus.js
- Lines: 1-31
Signature
const focus = async (selector, options = {}, highlight = false) => { ... }
Import
const { focus } = require('taiko');
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| selector | Selector / Element / string | Yes | The target element to receive focus. Accepts a Taiko selector, an Element wrapper, or a plain string CSS selector. |
| options | object | No | Configuration object. Supports `force` (boolean) to bypass actionability checks, plus navigation-awaiting options passed through to `doActionAwaitingNavigation`. Defaults to `{}`. |
| highlight | boolean | No | When `true` and running in headful mode, the element is visually highlighted before receiving focus. Defaults to `false`. |
Outputs
| Name | Type | Description |
|---|---|---|
| result | Promise<string> | A human-readable confirmation string, e.g. `"Focussed on the <element description>"`. |
Usage Examples
Basic Usage
const { openBrowser, goto, focus, write, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/login');
// Focus the username input field, then type into it
await focus('#username');
await write('testuser');
// Focus with visual highlighting enabled
await focus('#password', {}, true);
await write('secret123');
await closeBrowser();
})();