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 i...
  • 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.