Forum Discussion

GTayal's avatar
GTayal
Occasional Contributor
6 years ago

AngularJS framework implemented with no unique Id or name mapping for objects

Our Dev team recently implemented Angluar JS for a new application and they are not using any Unique IDs or name mapping for objects/web elements.

 

With TestComplete, I am unable to identify any of these objects and name mapping is also showing just basic values with indexes (I have added a screenshot for the same)

 

Is there a way to workaround this?

 

 

  • charleshb's avatar
    charleshb
    6 years ago

    We had a similar requirement recently and I found that only DIVs and standard HTML and CSS tags and attributes  are identified in TC-14 object browser by default. On these objects that are identified, you need to check the Properties of the objects like tristaanogre advised.

    Also custom data attributes are a helpful thing to look at as cunderw said.

     

    Note that TestComplete either uses the "id" attribute or the "name" attribute to identify the web objects by default on DIVs.

    see Tools -> Current Project Properties -> Open Applications -> Web Testing -> Object Identification 

     

    Also, for proprietary UI controls and Angular JS controls, you need to have support within TestComplete to use special tags and attributes to identify objects.

    see Tools -> Current Project Properties -> Object Mapping

    For example for DevExpress it's here: https://support.smartbear.com/testcomplete/docs/general-info/supported-technologies/controls/devexpress.html

    Supported Browser Versions IN TEST COMPLETE 14

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

     

    Additionally, you can get any custom HTML elements to be idenfitied - otherwise placing IDs on them won't help.

    For this, refer to TestComplete Web - working with custom elements. 

     see Tools -> Current Project Properties -> Open Applications -> Web Testing -> Custom Attributes 

     

    In any case, you really have to get back to the DEV team and if required have a live session with them to show that you are not able to identify their objects for automation testing. And if you can try to get them to add the IDs on DIVs at the least that's a good point to start.

     

    (And the first image you shared: The panels are all DIV tags in the page, as far as I remember. Note that using "Extended Find" feature is very helpful and necessary when doing the NameMapping - because the tree of the DIV tags cannot be guaranteed in a web application generally.)

  • charleshb's avatar
    charleshb
    Occasional Contributor
    6 years ago

    We had a similar requirement recently and I found that only DIVs and standard HTML and CSS tags and attributes  are identified in TC-14 object browser by default. On these objects that are identified, you need to check the Properties of the objects like tristaanogre advised.

    Also custom data attributes are a helpful thing to look at as cunderw said.

     

    Note that TestComplete either uses the "id" attribute or the "name" attribute to identify the web objects by default on DIVs.

    see Tools -> Current Project Properties -> Open Applications -> Web Testing -> Object Identification 

     

    Also, for proprietary UI controls and Angular JS controls, you need to have support within TestComplete to use special tags and attributes to identify objects.

    see Tools -> Current Project Properties -> Object Mapping

    For example for DevExpress it's here: https://support.smartbear.com/testcomplete/docs/general-info/supported-technologies/controls/devexpress.html

    Supported Browser Versions IN TEST COMPLETE 14

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

     

    Additionally, you can get any custom HTML elements to be idenfitied - otherwise placing IDs on them won't help.

    For this, refer to TestComplete Web - working with custom elements. 

     see Tools -> Current Project Properties -> Open Applications -> Web Testing -> Custom Attributes 

     

    In any case, you really have to get back to the DEV team and if required have a live session with them to show that you are not able to identify their objects for automation testing. And if you can try to get them to add the IDs on DIVs at the least that's a good point to start.

     

    (And the first image you shared: The panels are all DIV tags in the page, as far as I remember. Note that using "Extended Find" feature is very helpful and necessary when doing the NameMapping - because the tree of the DIV tags cannot be guaranteed in a web application generally.)

    • GTayal's avatar
      GTayal
      Occasional Contributor
      6 years ago

      Thank you guys for all the info.

      I looked through the application earlier using "Developer Tools" to find any attributes, but didnt find anything unique.

       

      This time around I have used attributes & data set in Test Complete and have added screenshots for the same. Still couldn't find any attributes which can be used to identify objects uniquely.

       

      For reference, I have added screenshot of application browser too.

       

      (Last resort is going to the Dev team and asking them too add some unique values, which can be used for object identification)

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        6 years ago

        Hi,

         

        > Last resort is going to the Dev team and asking them too add some unique values, which can be used for object identification

         

        This is not the last resort, but one of the primary requirements that QA (and don't mix QA activities with test activities due to the usual words overloading popular nowadays) must require from Development if Management wants to have stable and reliable tests automation.

        The last resort is to spend your time and efforts in attempts to find a set of properties (and custom attributes) that will make it possible to identify required web elements within test code. (Because development solely made a decision to use a library/technology that was created without test automation in mind).

        More about custom attributes support in TestComplete: https://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/using-custom-attributes.html

         

         

  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    6 years ago

    Well, for starters, rather than going to NameMapping, I'd go to the Object browser and examine those objects.  By default, NameMapping uses what it things, at the time of recording, are the best criteria.  This might not always be the case.  So, in Object Browser, you should be able to see all of the properties available for those objects.  WIth that view, you should be able to find some additional properties that might contain some more unique identifying factors such as className, innerHTML, contentText, etc.  Note, these are just examples, I'm not necessarily endorsing them as the BEST properties to use.

    • GTayal's avatar
      GTayal
      Occasional Contributor
      6 years ago

      Thank you for the reply Tristaanogre.

       

      I looked at the Object Tree (screenshot attached) too and was unable to find any properties which can serve as unique. And this is an example of only text boxes, there are number of checkboxes with similar issues.

       

      My question is, if AngularJS is implemented in such a way, are we only left with option of API testing using tools like Protractor (AngularJS specific), or is there a way to use TestComplete too.

       

      Thank you.

       

       

       

       

       

      • tristaanogre's avatar
        tristaanogre
        Esteemed Contributor
        6 years ago

        I would say that, rather than throwing up your hands and taking whatever the DEVs give you, leverage the benefits of automated testing and go back to them and argue that, if they want the automation to be successful long term, they should implement Angular to give you the ability to identify objects easier.

        That said, your screenshot didn't show the WHOLE property list. Nor did it show the properties of the other panels.  Keep in mind, NameMapping uses BOTH the hierarchy of objects AND the properties of an object to identify it.  So, the panel that "contains" the text box, you MIGHT be able to get something out of it in the HTML or className properties.  Then, if you can identify the panel uniquely, then the Textbox will have a better identification criterium.