Principle:Getgauge Taiko Input Clearing
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
Technique for removing existing content from input fields before entering new values in browser automation.
Description
Clearing input fields is a necessary prerequisite before writing new values to avoid appending to existing content. When automating form interactions, input fields may already contain default values, placeholder text that becomes real content on focus, or values from previous test steps. Without clearing first, any new text entered via keyboard simulation is appended to the existing value, producing incorrect results.
Taiko implements input clearing using the selectAll+backspace approach via DOM commands. This method first selects all content in the input field (equivalent to Ctrl+A / Cmd+A) and then sends a backspace key event to delete the selection. This approach is preferred over direct value manipulation (e.g., setting element.value = ) because it correctly triggers the full chain of event handlers: keydown, input, change, and keyup events. Many modern web applications (especially those built with React, Vue, or Angular) rely on these events for state management, validation, and UI updates.
If the selector parameter is omitted, the clear operation targets the currently focused element. This allows chaining operations naturally: focus an input, then clear it, then type new content.
Usage
Use input clearing in these scenarios:
- Before entering new values -- Clear existing content before typing into a text field to ensure the final value is exactly what was intended.
- Resetting form fields -- Clear fields that need to be emptied as part of a form reset workflow.
- Correcting input -- When a test step enters incorrect data and needs to retry with the correct value.
- Testing validation -- Clear a required field and submit the form to verify that validation messages appear correctly.
Theoretical Basis
The input clearing process works as follows:
- Focus the element -- If a selector is provided, locate and focus the target input element. If no selector is given, operate on the currently focused element.
- Select all content -- Issue a
document.execCommand('selectAll')or equivalent command to select the entire content of the input field. This works for both simple text inputs and contentEditable elements. - Delete selection -- Send a backspace key event to remove the selected content. This triggers the standard DOM event sequence (
keydown,beforeinput,input,keyup), ensuring that any framework-level event handlers execute properly. - Verify cleared state -- The input field's value should now be an empty string.
This approach is superior to alternatives such as:
- Direct value assignment (
element.value =) -- Does not triggerinputorchangeevents, breaking framework state management. - Triple-click + delete -- Less reliable across different input types and browsers.
- Repeated backspace -- Slow for long content and fragile if the content length is unknown.