Not able to select a drop down value using selectOptionByIndex

I am trying to use selectOptionByIndex to select a value from a drop down box. Its giving below error:
Test Cases/AddClientFlow1 FAILED because (of) Unable to select option by index ‘2’ of object ‘Object Repository/Page_AddClient/span_Please Select’ (Root cause: org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been “select” but was “span”
I am not able to find any select tag in span tag in code.
Can anyone help please?

Hi Tamanna

I could be wrong here, but it sounds as though your “select” element is in fact a different element entirely. It may look like a select dropdown, but might in fact be a contrived set of HTML elements made to appear as one.

The various “Select Option By” methods:

https://docs.katalon.com/display/KD/[WebUI]+Select+Option+By+Index

are meant to work with HTML <select…> elements that have child elements called <option…>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

From the little bit of code you shared above, it looks as though you have (at least) a element which is, unfortunately, not going to work as you think - certainly not like .

Hope that helps you going forward…

Russ

Hi Russ,

I’ve also encountered the same issue as Tamanna. May I know what is the solution if the xPath contains element instead of element? Thanks.

xPath e.g.: //*[@id=“PreferencesPanelBar-1”]/div/div[3]/span[2]/span/span[1]

Hi Jacqueline

That’s not easy to answer – I don’t know what you’re trying achieve, exactly. All I can do is take a guess, that:

1 - When you click this span, something “appears”, like a “list” of items (similar to, but not the same as, a select element)

2 - Then you want to click on one of the items in the list.

How am I doing so far?

Assuming you said “that’s pretty close, Russ…”

Make the AUT do that yourself (i.e. outside of testing) in Chrome or Firefox (don’t think this works in MS browsers (does anything?)). Once the list has appeared, right-click on one of the items in the list and choose “Inspect” from the menu. This will bring up the Developer Tools “Inspector”. what you should see next is the HTML of the page with a single row of HTML highlighted – the element you chose earlier.

Now, right-click that highlighted row of HTML. In the menu that appears, you can now choose “copy xpath”.

Now you have the xpath to that element on the clipboard, which you can paste into your code in Katalon Studio.

How did I do? :slight_smile:

Russ Thomas said:

Hi Jacqueline

That’s not easy to answer – I don’t know what you’re trying achieve, exactly. All I can do is take a guess, that:

1 - When you click this span, something “appears”, like a “list” of items (similar to, but not the same as, a select element)

2 - Then you want to click on one of the items in the list.

How am I doing so far?

Assuming you said “that’s pretty close, Russ…”

Make the AUT do that yourself (i.e. outside of testing) in Chrome or Firefox (don’t think this works in MS browsers (does anything?)). Once the list has appeared, right-click on one of the items in the list and choose “Inspect” from the menu. This will bring up the Developer Tools “Inspector”. what you should see next is the HTML of the page with a single row of HTML highlighted – the element you chose earlier.

Now, right-click that highlighted row of HTML. In the menu that appears, you can now choose “copy xpath”.

Now you have the xpath to that element on the clipboard, which you can paste into your code in Katalon Studio.

How did I do? :slight_smile:

Hi Russ,

Thanks for your reply. You have understood the problem correctly… I was also doing the same (copying the xpath from inspector), but then it means every element has a different xpath, that implies I cannot generalize the selection of items from so called drop down element. For every drop down item i would need to capture the object first then edit the xpath then only I can refer it in my script. Correct me if I am wrong.

Is there any other better approach?

Is there any other better approach?

What kind of betterment do you want? Do you want a parameterized XPath?

If so, the following discussion may help:

Hi ,
I tried parameterizing the object’s xpath (selectIndustryName) as follows for above AUT:

//*[@id=“ui-select-choices-row-24-${index}”]/span/div/div

then I wrote below code:
WebUI.click(findTestObject(‘Page_AddClient/selectIndustryName’, [(‘index’) : 1]))

but it failed with error:
Test Cases/AddClientFlow1 FAILED because (of) Unable to click on object ‘Object Repository/Page_AddClient/selectIndustryName’ (Root cause: com.kms.katalon.core.webui.exception.WebElementNotFoundException: Web element with id: ‘Object Repository/Page_AddClient/selectIndustryName’ located by ‘By.xpath: //*[@id=“ui-select-choices-row-24-1”]/span/div/div’ not found)

Can you help?

webPage.jpg

All I can say is that your XPath :

//*[@1'']/span/div/div

is invalid.

In order to find the answer, I need to know how your target HTML is written. Without knowing the target HTML code I can say nothing appropriate about XPath.

As Russ said

Make the AUT do that yourself (i.e. outside of testing) in Chrome or Firefox (don’t think this works in MS browsers (does anything?)). Once the list has appeared, right-click on one of the items in the list and choose “Inspect” from the menu. This will bring up the Developer Tools “Inspector”. what you should see next is the HTML of the page with a single row of HTML highlighted – the element you chose earlier.

Please use the Inspector tool and copy & past the HTML fragment

hello.

here is the code fragment:

Airlines/Aviation

and this is the copied xpath:
//*[@id=“ui-select-choices-row-18-1”]/span/div/div

Screenshot_1.jpg

code.jpg

kazurayam said:

All I can say is that your XPath :

//*[@1'']/span/div/div

is invalid.

In order to find the answer, I need to know how your target HTML is written. Without knowing the target HTML code I can say nothing appropriate about XPath.

As Russ said

Make the AUT do that yourself (i.e. outside of testing) in Chrome or Firefox (don’t think this works in MS browsers (does anything?)). Once the list has appeared, right-click on one of the items in the list and choose “Inspect” from the menu. This will bring up the Developer Tools “Inspector”. what you should see next is the HTML of the page with a single row of HTML highlighted – the element you chose earlier.

Please use the Inspector tool and copy & past the HTML fragment

Can you help me with these?

  • - Please Select -
  • A
  • B
  • C
  • D
  • E

tamanna said:

hello.

here is the code fragment:

Airlines/Aviation

and this is the copied xpath:
//*[@id=“ui-select-choices-row-18-1”]/span/div/div

Can you please help me with building the xpath with abstracting 18 and replacing 1 with a variable?

Tamanna,

Please find my proposal :

I assumed that your HTML has such lines:

<select name="something">
    <option id="ui-select-choices-row-88-234">
        <span class="ui-select-choices-row-inner" uis-translude-append>
            <div ng-transclude="item" class="ng-score">
                <div ng-bind-html="item[vm.labelField]" class="ng-binding">foo</div>
            </div>
        </span>
    </option>
    <option id="ui-select-choices-row-99-3">
        <span class="ui-select-choices-row-inner" uis-translude-append>
            <div ng-transclude="item" class="ng-score">
                <div ng-bind-html="item[vm.labelField]" class="ng-binding">bar</div>
            </div>
        </span>
    </option>
    <option id="ui-select-choices-row-24-2">
        <span class="ui-select-choices-row-inner" uis-translude-append>
            <div ng-transclude="item" class="ng-score">
                <div ng-bind-html="item[vm.labelField]" class="ng-binding">Alternative Dispute Resolution</div>
            </div>
        </span>
    </option>
</select>

And I assumed that you want to grasp the element with id “ui-select-choices-row-24-2”, you want to abstract 24 portion, and you want to regard 2 as the key for lookup.

I made a test object which as a locator as follows:

//option[starts-with(@id,'ui-select-choices-row-') and   substring-after(substring-after(@id,'ui-select-choices-row-'),'-')="${index}"]

Well, it is a bit complicated. This is a valid XPath expression. It just works. It is inevitably complicated because your requirement deserves.

My test case has following lines:

def content = WebUI.getText(findTestObject('Page_14605/option_with_param',                                           ['index':'2']))
WebUI.verifyEqual(content, 'Alternative Dispute Resolution')

This test case runs successful.

Jacqueline,

Could you see my study above? I suppose you can derive a solution for yourself.

As for XPath detail, this URL is a good tutorial:
https://www.guru99.com/xpath-selenium.html

I just googled and found it.

kazurayam said:

Jacqueline,

Could you see my study above? I suppose you can derive a solution for yourself.

Hi,

I tried but it doesn’t work and I got different error after that. Could you please create a valid xpath based on the html? Thanks.

  • - Please Select -
  • A
  • B
  • C
  • D
  • E

kazurayam said:

Tamanna,

Please find my proposal :
https://github.com/kazurayam/KatalonDiscussion14605

I assumed that your HTML has such lines:

<select name="something">
<option id="ui-select-choices-row-88-234">
    <span class="ui-select-choices-row-inner" uis-translude-append>
        <div ng-transclude="item" class="ng-score">
            <div ng-bind-html="item[vm.labelField]" class="ng-binding">foo</div>
        </div>
    </span>
</option>
<option id="ui-select-choices-row-99-3">
    <span class="ui-select-choices-row-inner" uis-translude-append>
        <div ng-transclude="item" class="ng-score">
            <div ng-bind-html="item[vm.labelField]" class="ng-binding">bar</div>
        </div>
    </span>
</option>
<option id="ui-select-choices-row-24-2">
    <span class="ui-select-choices-row-inner" uis-translude-append>
        <div ng-transclude="item" class="ng-score">
            <div ng-bind-html="item[vm.labelField]" class="ng-binding">Alternative Dispute Resolution</div>
        </div>
    </span>
</option>
> ``` > > And I assumed that you want to grasp the element with id "ui-select-choices-row-24-2", you want to abstract 24 portion, and you want to regard 2 as the key for lookup. > > I made a test object which as a locator as follows: > > ``` > //option[starts-with(@id,'ui-select-choices-row-') and substring-after(substring-after(@id,'ui-select-choices-row-'),'-')="${index}"] > ``` > > Well, it is a bit complicated. This is a valid XPath expression. It just works. It is inevitably complicated because your requirement deserves. > > My test case has following lines: > > ``` > def content = WebUI.getText(findTestObject('Page_14605/option_with_param', ['index':'2'])) WebUI.verifyEqual(content, 'Alternative Dispute Resolution') > ``` > > This test case runs successful. > >

Hi,

Thanks for the answer. I tried your code, it dint work at first then i replaced ‘option’ in xpath with *, as It seemed to me that element name that i wanted to catch is not ‘option’ but something more complex so i used * instead and it worked!

Thank you for the help, i was stuck at it for almost 4 days! :slight_smile:

Jacqueline,

Could you please create a valid xpath based on the html?

Still I do not understand what you want to do. Could you please describe which part of HTML fragment you want to select? Are you satisfied if I regard the data-offset-index attribute as the parameter to Test Object?

kazurayam said:

Jacqueline,

Could you please create a valid xpath based on the html?

Still I do not understand what you want to do. Could you please describe which part of HTML fragment you want to select? Are you satisfied if I regard the data-offset-index attribute as the parameter to Test Object?

Hi Kazurayam,

I would like to select a value from the drop-down list but I always get an error on “Element should have been “select” but was “span”” or “Element not visible”. If I copy the xPath from the inspect element it doesn’t work either.

May I know how should I go about creating the xPath for the selection? Thanks.

Drop-Down.png

Jaqueline,

In the Inspector screen, could you expand the following ?

I expect that the would contain the list of names “BAIC”, “BMW”, … but I am not sure. I need to be sure where the list is contained in the HTML.

span_k-icon.PNG

kazurayam said:

Jaqueline,

In the Inspector screen, could you expand the following ?

I expect that the would contain the list of names “BAIC”, “BMW”, … but I am not sure. I need to be sure where the list is contained in the HTML.

Span class.JPG