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 overwr...
  • 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

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.  

    • nish_b's avatar
      nish_b
      Contributor
      6 years ago

      Hi,

       

      I am still facing issues with selecting an option in the dropdown. Please find below approaches that I have tried and its results below:

       

      Tried below actions on the item which is within focus (No scrolling of the dropdown needed to select this item in dropdown)

      var webElement = page.FindChildByXPath(xpath);

      1) Directly clicking on the element using below code:

           webElement.Click() -> It doesn't throw any exception. But doesn't select the desired element too

      2) Double clicking also selects the element, so tried this too using code below:

           webElement.DblClick() -> It throws runtime exception as shown in attached screenshot

      3) Tried mouse hover and then click on the element using code below:

           webElement.HoverMouse() -> It throws runtime exception same as shown in attached screenshot

       

      This dropdown is present in a pop-up. Only selecting an element within the dropdown is not working. But any other actions in the same pop-up works fine.

       

      Please let me know what else could I do here to fix this issue.

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        6 years ago

        Hi,

         

        > var webElement = page.FindChildByXPath(xpath);

        Well... As it is documented, when native DOM XPath search returns a result, TestComplete tries to match the found web element to the object from TestComplete's Object Tree (displayed in the Object Browser). If match succeeds, then TestComplete returns wrapper object that contains .Click(), .DblClick(), .HoverMouse() and so on methods. If match attempt fails, native DOM object is returned without any method provided by TestComplete. In the latter case you must call native DOM methods - .click() and others.

        The above is one out of many other reasons of why search by XPath is highly not recommended in the TestComplete world.

        What I would try to do is to check using Object Spy whether or not dropdown items are identified as separate web elements. If they do, then you need to open dropdown, search for the required item and click it. Use .scrollIntoView() native DOM function to scroll web element into view (see below).

        If the problematic dropdown is a native HTML web element, then you may ask Support directly via the https://support.smartbear.com/message/?prod=TestComplete form why .ClickItem() method does not work.

         

         

        //----------------------------------------------------------------------------

        function scrollIntoView(element) {
          if (aqObject.IsSupported(element, "scrollIntoView"))
          {
            if (!element.VisibleOnScreen)
              element.scrollIntoView(true);
            if (!element.VisibleOnScreen)
              element.scrollIntoView(false);
          }
          if (aqObject.IsSupported(element, "focus"))
            element.focus();
        }
        //----------------------------------------------------------------------------