cancel
Showing results for 
Search instead for 
Did you mean: 

HTML 5 custom data attribute and namemapping web page objects

SOLVED
Contributor

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?

 

Thanks


Tom.

6 REPLIES
Community Leader

Re: HTML 5 custom data attribute and namemapping web page objects

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. 


Thanks,
Carson

Click the Accept as Solution button if my answer has helped
Highlighted
Community Hero

Re: HTML 5 custom data attribute and namemapping web page objects

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.

 

Regards,
Alex
[Community Expert Group]
____
[Community Expert Group] members are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Postings made by [Community Expert Group] members
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
[Community Expert Group] signature is used with permission by SmartBear Software.
http://smartbear.com/forums/f83/t86934/community-experts/
================================
Contributor

Re: HTML 5 custom data attribute and namemapping web page objects

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.

Staff

Re: HTML 5 custom data attribute and namemapping web page objects

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.

Contributor

Re: HTML 5 custom data attribute and namemapping web page objects

 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.

 

 

Community Hero

Re: HTML 5 custom data attribute and namemapping web page objects

Hi,

 

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

 

Regards,
Alex
[Community Expert Group]
____
[Community Expert Group] members are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Postings made by [Community Expert Group] members
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
[Community Expert Group] signature is used with permission by SmartBear Software.
http://smartbear.com/forums/f83/t86934/community-experts/
================================
Watch a new Video
Top Kudoed Authors