Forum Discussion

Lagencie's avatar
Lagencie
Frequent Contributor
6 years ago

Does Testcomplete only support basic html?

<div class="mat-input-infix mat-form-field-infix">
              <mat-select class="mat-select ng-tns-c12-17 ng-tns-c7-13 TESTID_COMMONCONFIG_TIMEZONEAREA ng-pristine ng-valid ng-touched" role="listbox" id="mat-select-1" tabindex="0" aria-required="false" aria-disabled="false" aria-invalid="false" aria-owns="mat-option-2" aria-multiselectable="false"><div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin=""><div class="mat-select-value"><!----><!----><span class="mat-select-value-text ng-tns-c12-17"><!----><span class="ng-tns-c12-17">Europe</span><!----></span></div><div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div></div><!----></mat-select>
            <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"><!----></span></div>

I have this html

 

when I map this object it finds all the panels for the <div class...> objects but doesnt recognize the <mat-select class...> 

 

Does Testcomplete not support custom html tags? Or is it somehow possible to add those custom html tags to the object spy?

4 Replies

Sort By
  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    6 years ago

    TestComplete recognizes a number of different web control packages and such. Did a quick google search and the "mat" classes are Angular Material design components which, by default, TestComplete doesn't recognize "out of the box", at least not in any documentation that I can find.

     

    This doesn't mean you are SOL, just means that you will need to get creative in automating those components.  You won't be able to do the typical "ClickItem" kind of thing but might need to write custom code to operate with the identified DIV panels.

    Documentation on supported web controls can be found at 

    https://support.smartbear.com/testcomplete/docs/app-testing/web/general/control-support.html

     

    Specifically, for AngularUI, read

    https://support.smartbear.com/testcomplete/docs/general-info/supported-technologies/controls/angularui.html

  • Lagencie's avatar
    Lagencie
    Frequent Contributor
    6 years ago

    How should I work around this and get creative? If it doesnt manage to find the element in the first place to at least have a namemapping of any kind.

     

    Outerhtml and innerhtml doesnt work in this case because it doesnt find the actual element i need only the element above and below.

     

    I tried so many things so far but just can not get it to work ... I was hoping that I can somehow just add the tags I want manually, so it just creates a "custom object" which I can use as an own panel ... or whatever.

     

    But with namemapping not working for this element where I have my special testing ids it really is impossible for me to find anything I can do to actually test it

    • tristaanogre's avatar
      tristaanogre
      Esteemed Contributor
      6 years ago

      This is just a suggestion...  I haven't tried it but this is the general strategy that I would start with.

       

      Basically, map the basic components of the select (the drop down arrow, the main control for clicking, the panel that displays the choices).  Use the "className" property as your mapping for those components so you identify the individual bits.

       

      Then, when you click on the control, you look for the "TextNode" object in the display panel that corresponds with your desired selection using a "FindChild" call.  When that object returns, simply execute the "Click()" method on that TextNode to simulate clicking on the desired option.

       

      Write all this in a custom Script function somewhere that you can then call as something like "clickAngularMatSelect" with appropriate parameters for the mapped control and the desired selection object.