Select method (JS) to select something from drop-down list

[coffee]

Hi,

In Selenium Java, we can have this code here to select something from drop-down list :

Select s = new Select(driver.findElement(By.xpath("//path_to_drop_down")));
s.selectByVisibleText("Value1");
s.selectByIndex(5);

Just wondering, if we have some similar thing in TC using JavaScript to select something from drop-down list ?

Thank You. 

[shankar_r]

s.ClickItem("<index of the item> or <"Name of the item">")

For more details you refer https://support.smartbear.com/testcomplete/docs/reference/test-objects/controls/misc/click-item/inde...

[coffee]

Thanks @shankar_r for the example. 

I found the documentation pretty confusing. After seeing your example , it looks pretty simple actually 

s.ClickItem("<index of the item> or <"Name of the item">")

BTW, of what type is s ? 

Can s be like this ?

let s = Page.QuerySelector ("CSS Selector Path");
s.ClickItem("<index of the item> or <"Name of the item">")

@MKozinets Could the documentation be elaborated a little bit maybe? With some examples?  Thanks  

[shankar_r]

Select s = new Select(driver.findElement(By.xpath("//path_to_drop_down")));

that s is from your code only, nothing specific 🙂

[coffee]

But in TestComplete using Javascript, I cannot write something like this 

Select s = new Select(driver.findElement(By.xpath("//path_to_drop_down")));

That syntax is Java Selenium Webdriver syntax. 

I don't think I can put Java Selenium syntax in TestComplete JS ?     

[shankar_r]

As far as i know, you can't put Selenium syntax here but you can use JScript related stuffs.

[coffee]

I found here a solution using native JS.

This HTML code

<select id='mydropdown'>
  <option value='foo'>Spam</option>
  <option value='bar'>Eggs</option>
</select>

JS solution 

var desiredValue = "eggs"
var el = document.getElementById("mydropdown");
for(var i=0; i<el.options.length; i++) {
  if ( el.options[i].text == desiredValue ) {
    el.selectedIndex = i;
    break;
  }
}

For the ClickItem() , I found something here

TestObj.ClickItem(Item, Shift)

TestObj	A variable, parameter or expression that specifies a reference to one of the objects listed in the Applies To section
Item	[in]   	Required   	Variant	   
Shift	[in]   	Optional   	TShiftKey	Default value: skNoShift   
Result	None

function Main()
{
  var p, w, ListBox; 

  // Obtain list box object 
  p = Sys.Process("wordpad");
  Sys.Keys("~i[Enter]");
  w = p.Window("#32770", "Date and Time");
  ListBox = w.Window("ListBox", "", 1); 

  // Select the specified item
  ListBox.ClickItem(6);
}

I may be wrong, but I assume ClickItem() can only be used with Test Object from Object Browser / Name Mapping only ?  Not a Test Object from Page.QuerySelector ("CSS Selector Path") ?

 Thanks.

[AlexKaras · Accepted solution]

Hi,

> Not a Test Object from Page.QuerySelector ("CSS Selector Path") ?

Yes, correct.

.QuerySelector() is a native DOM method that returns native element which, obviously, does not contain TestComplete-specific .ClickItem() method.

The reason that the call to .QuerySelector() method is possible is because TestComplete provides access to both its methods and methods that are native to the given tested application (web and/or desktop).

.FindXXX() method provided by TestComplete returns wrapped object that provides access to all methods provided by TestComplete.

As for the variable type - JScript is a scripting language and, as in any scripting language, its variables are OLE-compatible ones, which means that the actual type is insignificant (in most cases) and is handled internally by script runtime engine.

And as a final note, I would suggest to use search methods provided by TestComplete and not native ones that you might got used to with Selenium because TestComplete's search functionality is more functional, flexible and cross-browser.