Workflow:Getgauge Taiko Form Interaction Testing
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Testing, UI_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
End-to-end process for automating HTML form interactions including text input, dropdowns, checkboxes, radio buttons, file uploads, and content-editable elements using Taiko's element-specific APIs.
Description
This workflow covers testing web forms through Taiko's specialized element wrapper APIs. Each form control type (text box, checkbox, radio button, dropdown, file field, range slider, color picker, date/time fields) has a dedicated selector function that locates the element by its label text, placeholder, or surrounding content. The workflow leverages proximity selectors to disambiguate between multiple similar form controls on the same page. File upload is handled through the attach API, and content-editable rich text editors are supported through the write API with appropriate targeting.
Usage
Execute this workflow when you need to automate testing of web forms with multiple input types. This applies to registration forms, checkout flows, settings pages, data entry screens, and any user interface that collects structured input through HTML form elements.
Execution Steps
Open the browser and navigate to the page containing the form under test. Wait for the page to fully load, including any dynamically rendered form fields. Taiko's implicit wait mechanism automatically waits for navigation to complete and XHR requests to settle before proceeding.
Key considerations:
- Use the `goto` API with appropriate navigation options
- For single-page applications, ensure the form component has rendered before interacting
- Set `waitForEvents` to `['DOMContentLoaded']` or `['firstMeaningfulPaint']` for specific load strategies
Step 2: Fill Text Fields
Use the `write` API to type text into input fields, textareas, and content-editable elements. Target specific fields using the `into` helper combined with element selectors like `textBox`, `toLeftOf`, `near`, or `above`. For fields that are already focused, calling `write` without a target types into the active element.
Key considerations:
- `write("text", into(textBox({placeholder: "Username"})))` targets by placeholder
- `write("text", into(textBox(near("Label"))))` targets by proximity to a label
- Content-editable elements (rich text editors) are also supported via `write`
- Use `clear(textBox("Field"))` before `write` to replace existing content
Step 3: Interact with Selection Controls
Use dedicated APIs for each selection control type. For dropdowns, use the `dropDown` selector with `select` to choose an option by text or value. For checkboxes, use `checkBox` with `check` or `uncheck`. For radio buttons, use `radioButton` with `select`. Proximity selectors disambiguate when multiple controls of the same type exist.
Key considerations:
- `dropDown("Country").select("India")` selects a dropdown option
- `checkBox(near("Terms")).check()` checks a checkbox near a label
- `radioButton("Male").select()` selects a radio button
- All selection controls support `.value()`, `.isChecked()`, or `.isSelected()` for assertions
Step 4: Handle File Uploads
Use the `attach` API to upload files to file input elements. Locate the file field using the `fileField` selector, optionally combined with proximity selectors. Provide the absolute path to the file to be uploaded. After attaching, click the submit button and verify the upload succeeded.
Key considerations:
- `attach("path/to/file.txt", fileField(above(button("Upload"))))` targets a specific file input
- The file path must be absolute or relative to the working directory
- For download testing, use CDP's `Page.setDownloadBehavior` to set a download directory
- Multiple file uploads require separate `attach` calls
Step 5: Handle Specialized Input Types
Interact with date/time inputs, range sliders, and color pickers using their dedicated APIs. Time fields accept ISO date strings, range inputs accept numeric values within their min/max bounds, and color inputs accept hex color values.
Key considerations:
- `timeField("Birthday").select("2023-01-15")` sets a date input
- `range("Volume").select(75)` sets a slider to 75
- `color("Theme").select("#ff5733")` sets a color picker
- These specialized inputs bypass the standard keyboard input path for reliability
Step 6: Submit and Verify
Click the form's submit button and verify the expected outcome. Use Taiko's implicit assertions (the click fails if the button is not visible) combined with explicit assertions on resulting page content. Check for success messages, redirects, or error states using the `text` selector's `.exists()` method.
Key considerations:
- `click(button("Submit"))` or `click("Submit")` submits the form
- Taiko automatically waits for the resulting navigation or XHR requests
- Use `text("Success").exists()` to verify the submission result
- Check for validation errors with `text("Required field").exists()` to test negative cases