Forum Discussion

ThomasCasserly's avatar
Frequent Contributor
6 years ago

HTML 5 custom data attribute and namemapping web page objects

Hi all, 


As part of the web appication I'm testing we decided to add a html 5 custom data attribute to objects to allow  unique object identification to be performed. 

Developers proposed that this would be a convenient way to add unique identificaiton fields to web page objects. 

However when using the object spy the added html custom data is not detected and listed in the object properties.


Are such custom html 5 data attributes supported by TestComplete and if so is there a way to use/add them when mapping objects?




6 Replies

  • cunderw's avatar
    Community Hero

    I would suspect the custom data attribute is in the innerHtml property of the objects. Something that might work better is appent to the objects className for your custom ID properties. 

  • AlexKaras's avatar
    Champion Level 3

    Hi Tom,


    The real unique identification of web elements is assigning them 'id' attribute.

    Custom data attribute is a kind of cheat that has some reason behind it but cannot be considered as a true unique identification. However, this is the only way to provide more or less unique identification for web elements that can be done with a lot of modern fancy web-script frameworks.


    Support for custom data attributes was added to TC 12.60 Beta ( and you are welcome to apply to it.


    • ThomasCasserly's avatar
      Frequent Contributor

      Ok, so I downloaded the 12.6 version of TestComplete and attempted to use custom data attributes to capture the custom data on my controls.


      I have the following issues

      1. The custom data attribute is not listed when I click the ... button of the attributes property.

      2 The custom data attribute is not listed when I click the ... button of the dataset property.

      I also tried adding  the Custom attribute under the Project Properties unde the Web Testing node, the object spy still did not detect the custom data attribute.


      The custom data attribute that has been added is shown in the fragment below


      <span data-rf-dialog="65" data-rf-register="0" class="rf-interaction rf-fire-dialog rf-panel-action" data-sb-context="13.36.0"><svg version="1.12" xmlns="" role="img" class="rf-icon-xl" viewBox="0,0,16,16"><title>Add risk</title><path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"></path></svg></span>


      Any ideas how to proceed?


      Many thanks