Forum Discussion

dikshika114's avatar
dikshika114
Contributor
4 years ago

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

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 o...
  • AGubarev's avatar
    AGubarev
    4 years ago

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

     

     

  • AGubarev's avatar
    AGubarev
    4 years ago

    lets try to do it like this:

     

    WhatToClick = "'"+excelSheet.Cell("A", 3).Value+"'"

    put single quote before and after the WhatToClick

     

AGubarev's avatar
AGubarev
SmartBear Alumni (Retired)

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's avatar
dikshika114
Contributor
4 years ago

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's avatar
    AGubarev
    SmartBear Alumni (Retired)
    4 years ago

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

    Maybe I can look on it and invent something

    • dikshika114's avatar
      dikshika114
      Contributor
      4 years ago

      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's avatar
        AGubarev
        SmartBear Alumni (Retired)
        4 years ago

        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