Forum Discussion

paul_igoe's avatar
paul_igoe
Contributor
11 years ago

identifying sencha controls in the object browser

Hi,



I have a question about how to definitively identify sencha controls in the object brower.



We are using Test Complete to test both a .net desktop application and a Sencha web app, and for the .net app, control identification seems straighforward. For example we use DevExpress, and so we can see the DevExpress class name in the ClrFullClassName property (e.g.DevExpress.XtraEditors.MRUEdit for a ComoBox control) and cross-reference the DevExpress Supported Controls to see that indeed MRUEdit is supported.



For sencha its not so clear-cut - for example, if you point the object browser at the "Remember me" checkbox at the Sencha Ext JS Kitchen Sink Login Form example, you find:



Sys.Browser("chrome").Page("http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#login-form").Panel("content_panel").Panel("content_panel_body").Panel("content_panel_innerCt").Panel("login_form").Panel("login_form_body").Panel("login_form_innerCt").Table("checkbox")



This seems to be recognised as the sencha checkbox control, since we have properties Name=Table("checkbox"), ObjectIdentifier=checkbox, and wState as documented at Ext JS Checkbox Field Properties, but there is room for doubt, because I dont see the class name Ext.form.field.Checkbox anywhere and actually the supported control is called "Checkbox Field" (not "checkbox").



Have I missed something in the documentation that explains exactly how sencha controls are identified?



Thanks,

Paul



2 Replies

  • UnveN's avatar
    UnveN
    Icon for Staff rankStaff
    11 years ago
    Hi!



    It is a bit more complicated with web controls since they are not directly extending a web page elements so you won't find anything like ClrFullClassName here. Each web control usually has corresponding JavaScript object linked to some page element as its visual representation. Such elements might be identified by special CSS classes applied to them (see "className" property in TestComplete Object Browser). In case of Ext JS Checkbox that classes are "x-field" and "x-form-type-checkbox".



    Ext JS has some dedicated ways to identify its controls. I created a simple JScript to demonstrate:

    function Test()

    {

      var element = Sys.Browser().Page("http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#login-form").Panel("content_panel").Panel("content_panel_body").Panel("content_panel_innerCt").Panel("login_form").Panel("login_form_body").Panel("login_form_innerCt").Table("checkbox");

      Log.Message(IsSenchaControl(element, "checkbox"));

      Log.Message(GetClassName(element));

    }





    function IsSenchaControl(element, xtype)

    {

      var ext = element.ownerDocument.Script.Ext;

      var component = ext.getCmp(element.idStr);

      if (!component)

        return false;

        

      return component.isXType(xtype);

    }





    function GetClassName(element)

    {

      var ext = element.ownerDocument.Script.Ext;

      var component = ext.getCmp(element.idStr);

      if (!component)

        return "";

        

      return ext.getClassName(component);

    }





    Hope this helps =)