Why is WebUI.setText() not triggering my dynamic dependent dropdown?

Web Testing
1

Hey everyone, I’m pretty new to Katalon Studio and automated testing in general, and I am completely stuck on a form blocker.

I have two dropdowns on my application. The first one is for Vendor, and when you select a vendor, the second dropdown (Product) is supposed to automatically load with the right items.

When I test this manually, I click the Vendor box, type the name, and the Product list populates instantly. But in my Katalon script, I used WebUI.setText(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp').

Here is what happens: Katalon successfully types “ACME Corp” into the box, but the Product dropdown just stays grayed out and empty. It’s like the webpage doesn’t even realize Katalon wrote anything there. I tried adding a WebUI.delay(3) right after it, thinking it just needed time to load, but that didn’t help at all. Why does it work when I type it by hand, but fails when the script does it?

2

WebUI.setText() does not work on dropdowns.

For dropdown you should

  1. First click on dropdown and then select the desired option by using selectby keyword, if your DOM has tags for the dropdown list. Check out How to Handle Dropdown Menu in Katalon Studio | Katalon Docs
  2. If you DOM does not have tags for dropdown list but have tags for list then there is different stragegty.

Can you confirm on your DOM structure.

3

WebUI.setText() is the wrong keyword here if the vendor field is a styled dropdown or autocomplete input. For dependent dropdowns, you usually need to type the text, then trigger the change event by selecting an option or sending the right keys.

What to try

If it’s <select> element:

WebUI.selectOptionByLabel(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp', false)

If it’s an autocomplete input:

WebUI.click(findTestObject('Object Repository/Vendor_Field'))
WebUI.setText(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp')
WebUI.sendKeys(findTestObject('Object Repository/Vendor_Field'), Keys.chord(Keys.ENTER))

That extra ENTER or option selection is often what tells the app to fire the dependency and load Product.

Why the delay didn’t help

A delay only waits; it does not trigger the JavaScript event your page is listening for. Many dependent dropdowns react to change, blur, or an item selection event, not just plain text insertion.

Best practice

Use the dropdown-specific keyword for native selects, and for custom controls use click/type/choose-from-list instead of setText() alone. If the Product list still doesn’t populate, inspect the Vendor control in DevTools and confirm whether the app expects change, blur, or a specific option click

4

What you are experiencing is a classic synchronization issue in web automation. Modern web applications rely heavily on JavaScript frameworks (like React, Angular, or Vue) that listen for specific user actions—called events—to trigger page updates.

When you use WebUI.setText(), Katalon injects the text value directly into the element’s property. However, it often does so without firing the companion JavaScript events like change, input, keydown, or blur. Because those events never fire, the application’s underlying code doesn’t realize the value changed, so it never triggers the API call to load the Product dropdown.

The Industry-Standard Solution

To fix this, we need to mimic a real human interaction more closely. Instead of just forcing text into the field, we should use Katalon’s WebUI.sendKeys() to send actual keystrokes, followed by a triggering key like Enter or Tab. Alternatively, we can use a small snippet of JavaScript to forcefully tell the browser, “Hey, this field just changed!”

Here is a highly reliable, custom keyword solution that clears the field, types the text using simulated keystrokes, and explicitly fires a change event to guarantee the dependent dropdown updates.

Custom Keyword Implementation

Create a new Package/Keyword in Katalon Studio (e.g., com.helpers.DropdownHelper) and add the following method:

Groovy

package com.helpers

import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.Keys

public class DropdownHelper {

    /**
     * Safely sets text in an autocomplete/dropdown field and triggers its change events
     */
    @Keyword
    def setDropdownTextAndTrigger(TestObject to, String text) {
        // 1. Wait for the element to be interactable
        WebUI.waitForElementClickable(to, 5)
        WebUI.click(to)
        
        // 2. Clear existing text using backspaces to ensure native listeners are active
        WebUI.sendKeys(to, Keys.chord(Keys.CONTROL, "a"))
        WebUI.sendKeys(to, Keys.chord(Keys.BACK_SPACE))
        
        // 3. Send the actual text via simulated keys
        WebUI.sendKeys(to, text)
        
        // 4. Send a TAB or ENTER key to lose focus and commit the change
        WebUI.sendKeys(to, Keys.chord(Keys.TAB))
        
        // 5. Safety net: Forcefully fire the JavaScript 'change' event
        WebUI.executeJavaScript("arguments[0].dispatchEvent(new Event('change', { bubbles: true }));", Arrays.asList(WebUI.findWebElement(to)))
        
        // 6. Wait briefly for the UI to respond
        WebUI.delay(1)
    }
}

How to use it in your Script:

Instead of your original setText line, call your new custom keyword like this:

Groovy

CustomKeywords.'com.helpers.DropdownHelper.setDropdownTextAndTrigger'(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp')

This ensures the browser acknowledges the data entry exactly as if a human typed it, seamlessly unlocking your Product field.

5

hi @frodriguez1

WebUI.setText() sets the DOM value directly without firing the keyboard and input events your app relies on to detect the change and load the Product list. That is why the delay does nothing; the event never fired in the first place.

For an autocomplete-style input, replace setText with sendKeys and then fire a commit action like Tab or Enter so the app registers the selection:

WebUI.click(findTestObject('Object Repository/Vendor_Field'))
WebUI.sendKeys(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp')
WebUI.sendKeys(findTestObject('Object Repository/Vendor_Field'), Keys.chord(Keys.TAB))

If that still does not trigger it, the app may listen for a specific change or input event that Selenium does not emit. In that case, force it with JavaScript after setting the value:

WebUI.setText(findTestObject('Object Repository/Vendor_Field'), 'ACME Corp')
WebUI.executeJavaScript("arguments[0].dispatchEvent(new Event('change', { bubbles: true }))", 
    Arrays.asList(WebUI.findWebElement(findTestObject('Object Repository/Vendor_Field'))))

If the Vendor field is a native <select> element rather than a text input, use WebUI.selectOptionByLabel() instead, which natively fires the change event.

6

you have to click first as setText is more of like enetring a text like username in username text box

7

This is another very common issue, especially with modern web applications built using React, Angular, Vue, Material UI, Select2, Kendo, etc.

The key thing to understand is:

WebUI.setText() only changes the value of the field. It does not always trigger the JavaScript events that a real user interaction would trigger.

Issue which you are facing is briefly explanied below

The issue is likely due to the difference between manual user interaction and automation behavior. When a user types into the Vendor field, multiple browser events (like keydown, input, change, and blur) are triggered, which the application relies on to populate the dependent Product dropdown. However, when Katalon uses setText, it directly sets the value without triggering all the necessary JavaScript events. As a result, the application does not detect the input change properly, and the Product dropdown is not populated.

Many beginners try:

WebUI.setText(findTestObject('Vendor_Field'), 'ACME Corp')
WebUI.delay(3)

But the problem isn’t timing.

The problem is that the event which triggers Product loading never occurred, so waiting longer won’t change anything.

So solution can be many, I mean you need to try couple of options ( whichever works)

Solution 1: Simulate Enter or Tab

Many auto-complete controls load data only after the user confirms the selection.

WebUI.setText(findTestObject('Vendor_Field'), 'ACME Corp')
WebUI.sendKeys(findTestObject('Vendor_Field'), Keys.chord(Keys.ENTER))

I’ve seen this solve many dependent dropdown issues.

Solution 2: Use Click + Select Instead of setText

Sometimes the field isn’t a true textbox at all—it’s a searchable dropdown.

In that case:

WebUI.click(findTestObject('Vendor_Field'))
WebUI.setText(findTestObject('Vendor_Field'), 'ACME Corp')
WebUI.click(findTestObject('Vendor_ACME_Option'))

The actual selection event happens when clicking the option, not when typing.

Solution 3: Wait for the Product Dropdown to Populate

Instead of using fixed delays:

WebUI.waitForElementClickable(
    findTestObject('Product_Dropdown'),
    20
)

This makes the test more reliable.

Solution 4: Trigger JavaScript Change Event

If the application specifically relies on a change event:

WebUI.executeJavaScript(
    "arguments[0].dispatchEvent(new Event('change', { bubbles: true }))",
    Arrays.asList(WebUiCommonHelper.findWebElement(findTestObject('Vendor_Field'), 10))
)

This can help when the framework listens for change events.

8

Please let me know whther those worked or any of those worked or not?