Forum Discussion

nish_b's avatar
nish_b
Contributor
6 years ago

[TestComplete JS] ClickItem() is not working for dropdown

Hi,

 

I have a web application which has a multi-select dropdown with some values which looks the one in screenshot named dropdown

 

(Note: There are some values in dropdown but I have overwritten by the highlighter as its not necessary info for this).

 

My requirement is that I need to click on 1 of the items in the dropdown based on the text. For example, if I have a text named as "Apple" in the dropdown. I want to click on that. I similated the action and converted to script using Record Script. I got the below command for this:

vselect.ClickItem("Apple");

 

But this is not working. When I re-run this script it throws the error: "Cannot activate the 'Apple' item"

 

Can you please help?

  • nish_b's avatar
    nish_b
    6 years ago

    Hi,

     

    Just wanted to provide an update: I was finally able to resolve the issue. Thought I could describe it here, to help anyone else reading this post.

     

    Issue: Unable to click on dropdown element to select a desired element. The dropdown is on Select type. 

     

    Resolution: 

    Entire select webelement was getting identified but when I try to identify any 1 of the <option> webelements, it never used to identify. It used to return as an object or null. 

    So, the solution I came up with is to identify the dropdown <select> by using native DOM method in JavaScript. Then use the selectedIndex property to find out the index of the <option> element which is already selected by default and replace it with desired index of the <option> webelement which you want to select.

     

    Example: 

    let page = Sys.Browser("*").Page("url");

    let selectObj = page.contentDocument.querySelector('abc'); //replace with css selector of Select dropdown 

     

    //code to get the index of the <option> webelement which needs to be selected

     

    selectObj.selectedIndex=index;  

     

    The above statement will select based on the index of the <option> webelement

  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    6 years ago

    We need to know a bit more about the drop down component itself.  A screenshot like that with all the items masked... doesn't really help us help you.  If you can post the Object Browser views of the component, expanded to Advanced, with all properties and methods, that will help us help you.

     

    That said... If this is a multi-select drop down, ClickItem might not be the best option.  Is there a "SelectItem" method available?

    • nish_b's avatar
      nish_b
      Contributor
      6 years ago

      Hi,

       

      Yes, SelectItem() method is available. I have tried this method too but still it didn't work. I have attached the methods available for the web object in advanced view. PFA the screenshots. 

       

      This is how the web element definition looks like:

      <select name="kjsja" class="fieldList" id="" ondblclick="xyz();" size="13" multiple="multiple">
      <option value="abc123">abc</option>
      <option value="def123">def</option>
      ..
      ..
      ..
      </select>

       

      Few more details:

      1) In the dropdown there is a scroll bar and there are multiple items. The item which I need to select, is not visible without scrolling, so I need to scroll the scroll bar and then select the item. Do I need to use the method scrollIntoView() first to achieve this? I have tried it, but not sure if the syntax was correct.

       

      2) There are multiple items with similar name. For example, I want to select "Sales" but there are few more items starting with "Sales" such as "Sales Growth" , "Sales Growth Per Yr" and so on.

       

      Code snippet:

      getDropdownObj() {

      //code to return the dropdown web object

      }

      //Below lines of code I have tried to select the desired item in dropdown (none of these worked)

      this.getDropdownObj().ClickItem("Sales"); 

      this.getDropdownObj().SelectItem("Sales",1); 

      this.getDropdownObj().SelectItem("Sales"); 

      this.getDropdownObj().SelectItem(14,1); //here 14 is the index of "Sales", counted from 0 for all elements present in the dropdown

       

      Please let me know if any other details are required

       

      • tristaanogre's avatar
        tristaanogre
        Esteemed Contributor
        6 years ago

        Yes, on the dropdown window panel that scrolls, you need to find a way to scroll to what you want if ClickItem or SelectItem isn't auto-scrolling.  THat's probably what's going on here.