What is the best way to automate Dropdown which have lot of values to select (Eg: State Dropdown)

[dikshika114]

Can anyone suggest me:

1. how can i automate State dropdown which have lot of values to select (By Using TestComplete and JavaScript)

As of now i have created object of some values and clicking on them in a simple way. But it's not convenient.

I want to select one state (Which I want to pick from Excel File) from State Dropdown.

2. Is there any way to select the value from dropdown after getting the list of values with Find Element. (Like we do

most of the time in selenium)

Eg of selenium:

List L =  Dropdown.findElemets (.......................);

L.selectByName ("Pass the name of the value that you wanna select from the Dropdown");

Like this, is there any way to do so with Test Complete Also?????

[AGubarev]

Do you mean something like this?

function Test3()
{
  Browsers.Item(btFirefox).Navigate("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select");
  Sys.Browser().Page("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select").Panel("root").Panel(0).Article(0).Panel(0).Frame(0).Panel("editor_container").Panel("output").ShadowOutput(0).ShadowRoot(0).Panel(0).Select("pet_select").ClickItem("Cat");
}

[dikshika114]

This is the object details of drop down:

dropdownObject = //single-select//div[contains(@class, 'dropdown-toggle')] - something like this  - Defined in Name Mapping

Below is the image of values exists in the dropdown - not defined in Name mapping - Because it can be more than 150

and i want to get all the values of this dropdown at a time in a ArrayList. So that i could itrerate through that and

could click on the exact one (whose name - i will pass into my excel sheet eg: New York) and find the values by property name like "class"

[AGubarev]

Do you know which UI framework is used in your web site?

Maybe I can look on it and invent something

[dikshika114]

This is in Angular technology.

Again explaining each step of my problem:

1. State Dropdown Having lot of values like Delhi, New York etc.

2. Object of state drop down is specified in Name Mapping.

3. Objects of values like Delhi, New York etc, are not defined in Name Mapping because it can be more than 150. (It's very time taking task to create Objects of each value of dropdown in Name Mapping and also not convenient way - If we work like that then we could not be able to create common method for drop down in our project.)

4. I wanna get all the values (Delhi, New York etc.) in an ArrayList by passing the Object of State Dropdown. So, what i will do is:

I will create a common method for dropdown like: List L = StateDropdownObject.FindElements(Xpath of all values by property class - bz class will be same for all values.) and get the text (Which will be Delhi/ New York inside the span tag of the same class which we passed before)

5. Then iterate thru this list with for loop on length of arrayList and try to find the value on which we want to click.

6. Click on that value

That's It

[AGubarev]

If the final goal is to select specific item, it can be done with ClickItem method:

function test()
{
  Sys.Browser("chrome").ToUrl("https://material.angular.io/components/select/examples");
  Sys.Browser("chrome").Page("https://material.angular.io/components/select/examples").FindElement("//select[@id=(//label[.='Cars *']/@for)]").ClickItem("Audi");
}

Also, please, pay attention on wItem(), wItemCount, and wItemList

Maybe they can help in your case

[dikshika114]

1. It means i need to add object of each value of dropdown in the Name Mapping. Is it???? Then i can find the it by Click Item???

2. Click Item finds the values by Name. This name should be Object's Name or the Value name that displayed in the Drop down?? 

[AGubarev]

1. You can not to use NameMapping for every item, just put there only the container (drop-down control). The "source" of the items can be any. You can use Excel file, or iterate the values all the list using the loop and wItemsCount 

2. Displayed name or index https://support.smartbear.com/testcomplete/docs/reference/test-objects/members/combobox/clickitem-ac...

[dikshika114]

1. If i am not wrong, "ClickItem" can't work for Cross Browser Testing. Is it?? I have created all objects using XPath and Css

2. Can you please share the code for that part exactly because it's not working for me??

3. ClickItem option is not displaying in suggestion to me in the way as you mentioned. Refer attached image

4. The details of my drop down is:

and ClickItem is not displayed in that case.

[AGubarev · Accepted solution]

1. For native web dropdown controls (even for Scalable Web Testing) the code will be:

function test()
{
  Sys.Browser("chrome").ToUrl("https://material.angular.io/components/select/examples");
  Sys.Browser("chrome").Page("https://material.angular.io/components/select/examples").FindElement("//select[@id=(//label[.='Cars *']/@for)]").ClickItem("Audi");
}

So, maybe the control which you use is not supported one.

In this case you can request support of this control in the special section for feature Ideas: https://community.smartbear.com/t5/TestComplete-Feature-Requests/idb-p/TestXCompleteFeatureRequests

2. 3. 4. Unfortunately, I have no access to your web page, but it seems, yes, it's not simple drop-down. That's how it's possible to deal with controls without special support:

function Test1()
{
  let URL = "https://material.angular.io/components/select/overview";
  let whattoclick = "'Pizza'";
    
  Browsers.Item(btChrome).Navigate(URL);
  let browser = Sys.Browser();
  browser.BrowserWindow(0).Maximize();

  let page = browser.Page(URL);
  page.FindElement("//select-overview-example/mat-form-field//mat-select//span[contains(@class, 'mat-select-placeholder')]").Click();
  page.FindElement("//span[contains(text(), "+whattoclick+")]").Click();
}