How to select values from a span element

Hello, I have a drop down menu on a webpage that I need to select a value from. The drop down is a element populated by jquery. I’ve tried selecting by index or label but I always get the error “element should have been select but was span” - makes sense.
I would like to be able to get the total number of value in the drop down and also to be able to select a specific one. Any suggestions on how to work with element?

The following CSS will target the 3rd child span of an element with id “my-dropdown”

#my-dropdown>span:nth-child(3)

See https://docs.katalon.com/display/KD/Creation+of+Test+Object+in+Object+Repository+in+Runtime

for how to create a Test Object at runtime in your script.

Sorry, I’m still not clear on what to do exactly. Can add some more details?
I already have my span test object in the object repository.

please post HTML of element you want to use so we can see how it’s defined. i’d like to see what you mean by “populated by jquery”

Here is the element HTML and what it looks like in the UI:

My terminology is probably not correct here, but what i was getting at is the values for the drop down are coming from the section.

Thanks!

budget.png

wooha … do you really need to click? is not sufficient to set value of input field and continue with test?

Hmm KendoUI. I’ve seen it in use but never used it myself.

Galina, it appears you’ve captured the section of HTML before it has been populated by the jQuery code. Otherwise, it’s possible that the listbox referred to in aria-owns=“BudgetSectionID_listbox” is present somewhere else in the document/DOM. Again, I don’t know the KendoUI API, so I can’t be more accurate than that.

If you can figure out where “Unit Based Costs” is in the DOM and post that HTML, we can move forward. Right-click on it and choose “Inspect” (you probably know how to do that).

@Andrej Podhajský If I could set the value behind the scenes that would work also, however when I try to do .setText, I get the error “invalid element state: Element is not currently interactable and may not be manipulated”
When I try to click on the element first, I’m getting an error that element is not visible. Are there other functions to try?

@Russ Thomas
FYI, “Unit based costs” has not been renamed to “Account Based costs”, but when I click on the drop down and highlight “Account Based costs” and then right click on it and “Inspect”, here’s what I’m getting:

  • Account Based Costs
  • Third Party Valuation
  • Legal Diligence Costs
  • Travel Expenses
  • Account Based Costs
  • does that help?

    Thanks

    WebUI.executeJavaScript(“document.getElementById(‘BudgetSectionID’).value=1;”)

    To fully exercise that UI component (very similar to how a user would) you need to…

    1 - Click on the down-arrow to the right of the input. The following CSS selector should work:

    span[aria-owns="BudgetSectionID_listbox"] .k-i-arrow-60-down
    

    That should reveal the dropdown list.

    2 - Then, to click on the first item in the dropdown, use this CSS selector:

    #BudgetSectionID_listbox li:nth-child(1)
    

    And the second would be…

    #BudgetSectionID_listbox li:nth-child(2)
    

    etc.

    Hope that helps.

    3 Likes

    Woohoo, thank you! I got it to work!

    Russ Thomas said:

    To fully exercise that UI component (very similar to how a user would) you need to…

    1 - Click on the down-arrow to the right of the input. The following CSS selector should work:

    span[aria-owns="BudgetSectionID_listbox"] .k-i-arrow-60-down
    

    That should reveal the dropdown list.

    2 - Then, to click on the first item in the dropdown, use this CSS selector:

    #BudgetSectionID_listbox li:nth-child(1)
    

    And the second would be…

    #BudgetSectionID_listbox li:nth-child(2)
    

    etc.

    Hope that helps.

    Great…this solution working for me as well

    Russ Thomas said:

    To fully exercise that UI component (very similar to how a user would) you need to…

    1 - Click on the down-arrow to the right of the input. The following CSS selector should work:

    span[aria-owns="BudgetSectionID_listbox"] .k-i-arrow-60-down
    

    That should reveal the dropdown list.

    2 - Then, to click on the first item in the dropdown, use this CSS selector:

    #BudgetSectionID_listbox li:nth-child(1)
    

    And the second would be…

    #BudgetSectionID_listbox li:nth-child(2)
    

    etc.

    Hope that helps

    Thanks…it works for me too…

    Hello Andrej,
    Can you explain to me how I can select an element by its value with jquery or javascritp, please.

    hello,
    best is to use some of getElementBy functions in JS
    good start is :
    https://www.w3schools.com/jsref/met_document_getelementbyid.asp

    1 Like

    thank you @Andrej