Select Box defined as an Input box

The application I am testing has an input box that also acts like a select box. This allows the user to type text and be able to see the various choices based on that text. It is defined as an box.

The issue is, when the user selects the state, it will populated another dropdown box with the cities in that state.

Katalon, seems to error out in this situation. If I ID the box as an input I am able to enter a value, but since I did not select a value the city box does not populate, ending the test case. If I treat the state box as a select, then Katalon will not recognize it, because it is not a select box. So changing the script to use the select box actions does not work.

In essence, I need Katalon to treat a hybrid input/select box as a select box, so I can select an index, and it will populate other boxes.

Hi Troy

Can you confirm, is it an input element with a list attribute? Is there a datalist element the list attribute refers to?

Yes. It is an input element.

Hmm, no evidence of a datalist there.

Can you take a screenshot of the dropdown when it appears?

In the Object Repository, if I define the tag as an input, I am able to input the data to the state (Texas for example), but since it was not selected the city drop down does not populate. But if I change the tag to select, and change the code, the state box does not do anything, and Katalon gives an element not found error.

Katalon is looking for an input with an id=“TheState” not a select with id=“TheState”.

If the HTML is as you posted, it’s an input element, not a select, so any “select based” testing API is not going to work, so let’s dispense with that right now.

I suspect now that “something” is detecting the change in the value of the input box and based on the change, populating the other select box with cities. That something (of course) is very likely JavaScript.

How are you placing the text in the input? Did you try sendKeys? Also, append a TAB key (which usually helps to trigger the onchange event in JavaScript).

Again, a screenshot would help a lot. And the portion of test case code under discussion would help, too.

Sorry. Had to step away from this for a bit. Always something around here. Anyway attached is the script, object properties, and the error message.

Katalon-error.JPG

Katalon-script.JPG

Katalon Object properties.JPG

Two things:

1 - You’re dealing with a

    element, absolutely NOT a element.

    2 - The error is saying that Katalon (ie webdriver) believes the element is not in the viewport and can’t be scrolled into view.

    You may have some trickery being performed by JavaScript that brings the UL element into view when the user “does something” in the input box. What you need to do, is mimic that something in your test code. You need to trigger whatever causes the list to appear.

    By the way, your

      will have a bunch of
    • elements inside it – these are the “menu items” you can choose from. If there are none, then you’re probably dealing with a control that retrieves its content dynamically (most likely via ajax).

      My advice is:

      3 - view the source of the page in the developer tools to figure out what this UL/LI stuff looks like and get to know it.

      4 - Ask the people that wrote (ie coded) the page how it does what it does.

Thanks for the Reply. Attached is the UL/LI stuff. The developer says just hit the class=“es-visible”,

But I cannot seem to get that to work. What exactly would be the sequence. In order to hit it I have to enter the country name (United States). I can do this, but then I need to selected it. Its not a select box, so I cannot select it. Once its displayed in the list, how do I click on it (United States)?

country.JPG

You have to remember, we’re working blind here so post as much stuff as you can.

Notice first that the UL and all its child LI elements have the style “display:none”. Some event handler is going to change those. We need to figure “what” that something is.

I’d like know what he means by just hit the class=“es-visible” – does he mean click it? And… what is that? I don’t see any element with class “es-visible”.

They key thing here is, what does the user do to make all this happen? That is what you (we) are trying to mimic in test code.

Yes. He did refer to clicking it. And that did not work. Above is the browser code. He is what the object looks like -

It allows the user to search by inputting text and then selecting the one they want.

How it works -
Method 1 -
1. Use dropdown and select country.

or

Method 2 -
1. Enter Text.
2. Then select the country

As the code shows its object is a an input box (id=“ddCountry”), so treating it as select object will not work. So, I don’t how I automate using method 1. So, I thought I could automate using method 2. I am able to enter text into the object, but the other select boxes that are based off of the country will not populate unless the country is clicked. Just entering the text and clicking on it does not work. The value needs to be selected.

For example, Entering “United States” does not populate the other select objects. Entering “United States”, and then clicking on “United States” is how its supposed to work.

So, based on the code above I need to know how to click on the the <li class=“es-visible”…> object. Then it will populate everything else.

Here is the part of the script that I have so far -

WebUI.setText(findTestObject(‘Test Case 2 Objects/Page_/input_ddCountry’), ‘United States’)

WebUI.click(findTestObject(‘Test Case 2 Objects/Page_/li_Select Country’))

Here are the objects look -

class-es.JPG

object.jpg

li_select Country.JPG

ul_Select CountryUnitedStates.JPG

The current definition of your ‘Test Case 2 Objects/Page_/li_Select Country’ selects the

<ul class="es-list"> ... </ul>

element. This is not what you want. You want to select the

<li class="es-visible">United States</li>

don’t you?

If you want to select the li element, you need to tune
the Test Object ‘Test Case 2 Objects/Page_/li_Select Country’.


You should change the selector.

(1) you do not need ‘tag’ selector, so de-select the “Detect object by?” checkbox for “tag”.

(2) you do not need ‘class’ selector, so de-select the “Detect object by?” checkbox for “class”.

(3) you need to change the ‘text’ selector. Set ‘United States’ as value, because you want to select the

  • United States
  • element.

    (4) you need to change the ‘xpath’ selector. At the moment you have the following xpath:

    id("ddCountry")/ul[@ class="es-list"]
    

    This xpath is inappropriate, because it selects a

      element rather than a
    • element. So you want to change it to

      id("ddCountry")/ul[@ class="es-list"]/li[@ class="es-visible"]
      
    1 Like

    Same problem here, not able to workout. Please help Russ Thomas

    Below is the browser code

    Here is the part of the script that I have so far
    WebUI.click(findTestObject(‘KYC Customer/Page_Individual KYC - Loan Reports/Page_Personal Citizenship issued/li_pcgrihamantralaya’))

    Here are the objects look -

    Error Message

    Capture 2.jpg

    Capture1.PNG

    Capture3.PNG

    Capture4.PNG

    Tried solution as above but still not able to work out.

    error msg1.jpg