Forum Discussion

mspatel's avatar
mspatel
Contributor
9 years ago
Solved

Dropdown list wont support ClickItem etc

Hi , 

 

Can someone help me how to deal with ComboBox that dont support , ClickItem method ? 

 

 

. As a work Around , i tried few different options.

 

1. Click on Dropdown , and traverse to item using Keys."[DOWN]"  or Keys.HOME etc. Before even i fire one of the Key event, dropdown collapses and script error out because element is not visible anymore. 

 

2. I tried click on ComboBox and then fire HoverMouse action, but again before i even fire event ComboBox collapses back. 

 

Some Code Snippets 

 

Aliases.browser.pageBillingGroupDetails.EditBillingGroupDetails.dropdown_Cycle.Click
aqUtils.Delay 1000
Aliases.browser.pageBillingGroupDetails.EditBillingGroupDetails.dropdown_Cycle.Click
Aliases.browser.pageBillingGroupDetails.EditBillingGroupDetails.dropdown_Cycle.Keys ("[HOME]")

 

 

Thanks 

  • UnveN's avatar
    UnveN
    9 years ago

    Hi,

     

    ________________________________________

    mspatel wrote:

    I am convinced there is some issue with support of this kind of controls ( Kindo/Telerik) .

    ________________________________________

     

    If I get it right, your combobox is http://demos.telerik.com/kendo-ui/dropdownlist.

    There is no special support for these controls at the moment so you have to use native web support to work with it. You can also vote for these controls to be supported via our special survey TestComplete Control Support Survey. The complete list of supported controls is here Supported Controls.

     

     

    ________________________________________

    mspatel wrote:

    Using Recording to see Events doesnt help because when i tried on these controls , Its Clicking based on Coordinate e.g Click (12,130) etc. I dont think scripting based on Coordinates is portable.

    ________________________________________

     

    It is totally fine since the Click (12,130) is recorded for the desired item and the coordinates are actually relative to the item rectangle so the click will never miss. You can actually remove the coordinates since it does not matter which part of the item will be clicked.

     

     

    ________________________________________

    mspatel wrote:

    And as i replied to Tanya , problem is with Dropdown with Scroll bar.

    Let me know if you have solution. And No, Scrolling using script wont help because it changes parents object Identification ( which is panel ) and TC cant find that panel .

    ________________________________________

     

    Scrolling inside the panel normally should not have any impact on the identification of the panel itself and its parents. TC cant find the panel

    Panel("MVCalcFormulaID_list")

    because the identification of its parent page.Panel(0) is ambigious. Before you click the control and its drop-down appears Panel(0) is some random panel and after the click it should become the right panel with Panel("MVCalcFormulaID_list") inside. The problem here is that TestComplete did not notice this transition and still thinks that Panel(0) is the random panel thus failing to find child Panel("MVCalcFormulaID_list"). You can resolve this by using Refresh() in between the clicks:

    function Test()
    {
    var page;
    Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page.Wait();
    page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
    page.Refresh();
    page.Panel(0).Panel("color_list").Panel(1).TextNode(1).Click();
    }
    
    

     

    Even better approach is to use FindChild to find the problematic panel, it will eliminate the ambigious Panel(0) and call Refresh() automatically:

    function Test()
    {
    var page;
    Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page.Wait();
    page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
    page.FindChild("Name", 'Panel("color_list")', 10, true).Panel(1).TextNode(1).Click();
    }

     

    TextNode(1) here is also ambigious because you are reffering the desired item by its index. Consider using the item text instead:

    function Test()
    {
    var page;
    Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
    page.Wait();
    page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
    page.FindChild("Name", 'Panel("color_list")', 10, true).Panel(1).FindChild("contentText", "Orange").Click();
    }

     

    The only thing left to handle is the scroll bar. The native method scrollIntoView() will suffice:

    function Test()
    {
    var page;
    Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/grouping");
    page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/grouping");
    page.Panel("main").Panel("exampleWrap").Panel("example").Panel(0).TextNode(2).Click();
    var item = page.FindChild("Name", 'Panel("customers_list")', 10, true).Panel(1).FindChild("contentText", "Isabel de Castro");
    item.scrollIntoView();
    item.Click();
    }

     

    If your combobox uses virtualization http://demos.telerik.com/kendo-ui/dropdownlist/virtualization things become more complicated since the desired item might not be loaded before you manually scroll to it. In this case you need to use Point and fix, scroll to the desired item, point to the scroll bar and capture it to get its scrollTop value to use in your script like this:

    function Test()
    {
      var page;
      var panel;
      page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
      page.Panel("main").Panel("exampleWrap").Panel("example").Panel(0).TextNode(2).Click(10, 1);
      panel = page.FindChild("Name", "Panel('orders_list')", 10, true).Panel(0).Panel(1);
      panel.scrollTop = 11400;
      while (panel.FindChild("contentText", "loading...").Exists); // Waiting for items to load
      panel.FindChild("contentText", "10691\nQUICK-Stop, Germany").Click();
    }

     

    If neither of the provided solutions does not work for you, there is a public API http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist. It might be not the best solution in terms of UI functional testing, but it does the trick:

    function Test()
    {
      var page;
      var panel;
      Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
      page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
      var script = page.contentDocument.Script;
      var dropdownlist = script.$("#orders").data("kendoDropDownList");
      dropdownlist.select(200);
      dropdownlist.trigger("change");
    }

    Hope this helps.

15 Replies

  • TanyaYatskovska's avatar
    TanyaYatskovska
    SmartBear Alumni (Retired)

    Hi,

     

    Try exploring this window by using the Object Spy:

    1. Click your dropdown control to open it
    2. Open the Object Spy window and switch to Point and fix
    3. Navigate the mouse over the opened dropdown window

    Using Point and fix will allow you to analyze the properties and methods that you can use to select the needed item. Please refer to the About Object Spy ( http://smartbear.com/viewarticle/70549/ ) article for details.

    • mspatel's avatar
      mspatel
      Contributor

      I should have adde more details earlier....

       

      About using Point and Fix :  Yes , i do use it very extensively ...so no doubt if i am using correctly or not. i figured control do not support ClickItem so i been trying to do work around. where i click on menu drop it and select the Item i want 

       

      Sys.Browser("firefox").Page("http://qaclientbilling.acadian-asset.com/BillingGroup/Detail?id=15").Panel(4).Panel("BillingGroupOverviewEditWindow").Form("billingGroupForm").Panel(5).Panel(0).Panel(1).Panel(1).TextNode(0).Click
      Sys.Browser("firefox").Page("http://qaclientbilling.acadian-asset.com/BillingGroup/Detail?id=15").Panel(7).Panel("MVCalcMethodID_list").TextNode(3).Click

      I think real problem is even above workaround wont work when  there is huge list of items and there is scroll bar to support it. 

       

      I could successfully , select items i want when there is no Scroll bar. 

       

      I am convinced there is some issue with support of this kind of controls ( Kindo/Telerik) . I have successfully done automation  where there is scroll and clickItem is suppoted. (HTML5) 

       

       

      Does anyone else have same issue ? 

       

       

       

       

      • william_roe's avatar
        william_roe
        Super Contributor

        mspatel wrote:

         

        Does anyone else have same issue ? 

         

         

         

         


        I'm also having this issue!!!

  • Hi,

     

    According to your code snippet you are clicking the combobox twice, so the first click causes it to open and the second one to close thus making the desired item not visible. The easiest way to accomplish your task is to record your actions, see Recording Automated Tests - Overview.

     

    If you prefer to write the code manually or the recording approach does not work for you here is another way. To simulate ClickItem behavior you basically need to click the combobox to open it and then click the desired item. Your code snippet already contains the first part. To find the desired item you need to open the combobox and then select the item using Point and fix as Tanya mentioned. So your final script should look like this:

     

    Aliases.browser.pageBillingGroupDetails.EditBillingGroupDetails.dropdown_Cycle.Click
    <path to the desired item>.Click

    Hope this helps.

    • mspatel's avatar
      mspatel
      Contributor

      Stanislav, 

      Using Recording to see Events doesnt help because when i tried on these controls , Its Clicking based on Coordinate e.g Click (12,130) etc. I dont think scripting based on Coordinates is portable. 

       

      And as i replied to Tanya , problem is with Dropdown with Scroll bar.

      Let me know if you have solution. And No, Scrolling using script wont help because it changes parents object Identification ( which is panel ) and TC




      Aliases.browser.pageBillingGroupDetails.EditBillingGroupDetails.dropdown_BillingMethod.Click Sys.Browser("firefox").Page("http://qaclientbilling.acadian-asset.com/BillingGroup/Detail?id=15").Panel("MVCalcFormulaID_list").TextNode(20).Click

      cant find that panel .

       

      As i shown in Code snippet, scripts fails everytime because it cant find 

      Panel("MVCalcFormulaID_list")

       

      • UnveN's avatar
        UnveN
        Staff

        Hi,

         

        ________________________________________

        mspatel wrote:

        I am convinced there is some issue with support of this kind of controls ( Kindo/Telerik) .

        ________________________________________

         

        If I get it right, your combobox is http://demos.telerik.com/kendo-ui/dropdownlist.

        There is no special support for these controls at the moment so you have to use native web support to work with it. You can also vote for these controls to be supported via our special survey TestComplete Control Support Survey. The complete list of supported controls is here Supported Controls.

         

         

        ________________________________________

        mspatel wrote:

        Using Recording to see Events doesnt help because when i tried on these controls , Its Clicking based on Coordinate e.g Click (12,130) etc. I dont think scripting based on Coordinates is portable.

        ________________________________________

         

        It is totally fine since the Click (12,130) is recorded for the desired item and the coordinates are actually relative to the item rectangle so the click will never miss. You can actually remove the coordinates since it does not matter which part of the item will be clicked.

         

         

        ________________________________________

        mspatel wrote:

        And as i replied to Tanya , problem is with Dropdown with Scroll bar.

        Let me know if you have solution. And No, Scrolling using script wont help because it changes parents object Identification ( which is panel ) and TC cant find that panel .

        ________________________________________

         

        Scrolling inside the panel normally should not have any impact on the identification of the panel itself and its parents. TC cant find the panel

        Panel("MVCalcFormulaID_list")

        because the identification of its parent page.Panel(0) is ambigious. Before you click the control and its drop-down appears Panel(0) is some random panel and after the click it should become the right panel with Panel("MVCalcFormulaID_list") inside. The problem here is that TestComplete did not notice this transition and still thinks that Panel(0) is the random panel thus failing to find child Panel("MVCalcFormulaID_list"). You can resolve this by using Refresh() in between the clicks:

        function Test()
        {
        var page;
        Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page.Wait();
        page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
        page.Refresh();
        page.Panel(0).Panel("color_list").Panel(1).TextNode(1).Click();
        }
        
        

         

        Even better approach is to use FindChild to find the problematic panel, it will eliminate the ambigious Panel(0) and call Refresh() automatically:

        function Test()
        {
        var page;
        Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page.Wait();
        page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
        page.FindChild("Name", 'Panel("color_list")', 10, true).Panel(1).TextNode(1).Click();
        }

         

        TextNode(1) here is also ambigious because you are reffering the desired item by its index. Consider using the item text instead:

        function Test()
        {
        var page;
        Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/index");
        page.Wait();
        page.Panel("main").Panel("exampleWrap").Panel("example").Panel("cap_view").TextNode(3).Click();
        page.FindChild("Name", 'Panel("color_list")', 10, true).Panel(1).FindChild("contentText", "Orange").Click();
        }

         

        The only thing left to handle is the scroll bar. The native method scrollIntoView() will suffice:

        function Test()
        {
        var page;
        Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/grouping");
        page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/grouping");
        page.Panel("main").Panel("exampleWrap").Panel("example").Panel(0).TextNode(2).Click();
        var item = page.FindChild("Name", 'Panel("customers_list")', 10, true).Panel(1).FindChild("contentText", "Isabel de Castro");
        item.scrollIntoView();
        item.Click();
        }

         

        If your combobox uses virtualization http://demos.telerik.com/kendo-ui/dropdownlist/virtualization things become more complicated since the desired item might not be loaded before you manually scroll to it. In this case you need to use Point and fix, scroll to the desired item, point to the scroll bar and capture it to get its scrollTop value to use in your script like this:

        function Test()
        {
          var page;
          var panel;
          page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
          page.Panel("main").Panel("exampleWrap").Panel("example").Panel(0).TextNode(2).Click(10, 1);
          panel = page.FindChild("Name", "Panel('orders_list')", 10, true).Panel(0).Panel(1);
          panel.scrollTop = 11400;
          while (panel.FindChild("contentText", "loading...").Exists); // Waiting for items to load
          panel.FindChild("contentText", "10691\nQUICK-Stop, Germany").Click();
        }

         

        If neither of the provided solutions does not work for you, there is a public API http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist. It might be not the best solution in terms of UI functional testing, but it does the trick:

        function Test()
        {
          var page;
          var panel;
          Browsers.Item(btFirefox).Navigate("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
          page = Sys.Browser().Page("http://demos.telerik.com/kendo-ui/dropdownlist/virtualization");
          var script = page.contentDocument.Script;
          var dropdownlist = script.$("#orders").data("kendoDropDownList");
          dropdownlist.select(200);
          dropdownlist.trigger("change");
        }

        Hope this helps.

  • william_roe's avatar
    william_roe
    Super Contributor

    mspatel wrote:

    Hi , 

     

    Can someone help me how to deal with ComboBox that dont support , ClickItem method ? 

     


    Based on this article the ClickItem method is a helper object used to work with Developer Express BarControl, Developer Express BarManager, Developer Express Ribbon (VCL), Developer Express Ribbon, Microsoft Ribbon, Infragistics Web Menu and Developer Express Popup Menu controls.