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

[nish_b]

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?

[tristaanogre]

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]

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]

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]

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]

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();
}
//----------------------------------------------------------------------------

[nish_b]

Hi Alex,

Thanks for your response. I have tried the Object Spy for all the dropdowns available in my test web applcation. It identifies the drop-downs as a whole but doesn't identify a single element within the dropdown.

Another thing to note is that when I provide either of these methods .click() or .Click()  or .srollIntoView() -> These are giving the error

TypeError: Cannot read property 'scrollIntoView' of null

So the problem is with identifying elements in dropdown. Do I need to contact support for this?

[AlexKaras]

Hi,

>  Cannot read property 'scrollIntoView' of null

This means that element was not found by XPath and null was returned as the search result. And you tried to call the .scrollIntoView() method of null object which resulted in the error posted to test log.

[nish_b · Accepted solution]

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