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
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
1 Like
Tried solution as above but still not able to work out.
error msg1.jpg