HTML 5 custom data attribute and namemapping web page objects

[ThomasCasserly]

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?

Thanks

Tom.

[cunderw]

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 · Accepted solution]

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 (https://community.smartbear.com/t5/TestComplete-General-Discussions/TestComplete-Beta-Program-Try-AI...) and you are welcome to apply to it.

[ThomasCasserly]

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="http://www.w3.org/2000/svg" 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

Tom.

[dganov]

Here the quote from https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
"To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase)."

So you should see "sbContext" attribute under the "..." of dataset property.

[ThomasCasserly]

 Hi, 

Thanks for the help, turns out that when using the object spy the control I selected didn't actually have a data attribute, it was a parent span element that had the data attribute. Object spy could not separate the two, I had to use chrome element inspector before i spotted the reason.

Once I used the ParentElement property for the selected control I could see the sbContext attribute.

[AlexKaras]

Hi,

You may use outerHTML property in the Object Browser to get an idea of the HTML markup of the selected web element.