I need to verify using Selenium (or similar framework) that certain HTML content/items are on the page using known unique identifiers.
I have control over the generation of the HTML, so I will mark the HTML tags with an attribute, but sometimes the usual candidates of id, name etc aren't available for me to use.
Is there an industry standard for such an attribute?
If not, anyone have any good suggestions?
The attribute shouldn't collide with any known attributes of any HTML elements or affect the web experience/behaviour (I don't care if someone reads the HTML source and sees it).
Some ideas I have are:
trace
debug
uid
Here's how I would like to use it for the example identifier "123456789":
<a trace="123456789" href="http://www.someurl.com">Click me!</a>
<span debug="123456789">Hello world</span>
<strong uid="123456789">Wow</strong>
Use a HTML5 data-* attribute.
Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate
attributes or elements.
More information here: http://developers.whatwg.org/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes
They won't cause any problems in older browsers: http://caniuse.com/dataset
Related
It's ridiculous question,have anyone seen custom attribute "data-ccp-props" in html span tag likes this?
<span data-ccp-props="{"201341983":2,"335559739":160,"335559740":233}" style="line-height: 1.4;"> </span>
I found much similar data by Google enter link description here, that custom attribute makes an error on our html editor.
Read https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.
So, these are custom attributes given by the site author and the issue is with your editor and how it processes them (or fails to do so). Nothing wrong with them being in the html.
If they are properly (as in proper HTML) set, and i do not see something wrong in your sample code, your editor should be able to handle them.
I see a lot of Html tags these days with attributes that start with data- as in the following example.
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true" ng-click="closeClippingModal();">Cancel</button>
My question is simply this. Why is this used?
It is an html5 attribute meant to store things like meta data or other data associated with the element. It's commonly used to store state in JavaScript applications.
You can easily access it using JQuery like so $("#myElement").data("dismiss");
Most common use is storing data for javascript. As an example lets say you have a photo and you want to display it on webpage with hover efect being location and time of image taken. The simpliest way of storing data asociated with element is to use data-* attribute on the element:
<img src="my/awesome/photo.jpg" data-location="Paris, France" data-datetime="30.3.2014 16:19:00" />
It's as simple as that.
The data-* attributes is used to store custom data private to the page or application, gives us the ability to embed custom data attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).
data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and
must be at least one character long after the prefix "data-"
The attribute value can be any string
Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.
This feature is described quite well in John Resig’s blog.
Simply, the specification for custom data attributes states that any
attribute that starts with “data-” will be treated as a storage area
for private data (private in the sense that the end user can’t see it
– it doesn’t affect layout or presentation).
This allows you to write valid HTML markup (passing an HTML 5
validator) while, simultaneously, embedding data within your page
One of reasons is storing data instead of class. This is more semantic way. Data-attributes is the HTML5 novation. Also you can easily access them through JS (dataset) and jQuery (data() method). For more information see the specification: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
As I know data-attribut's name can contain uppercase letters but these letters will be forcibly converted in lowercase.
I'm working on a mail server that sends HTML emails down to a mail client. Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent? The integrated browser in our custom client could inspect the HTML to determine what user agent to use and then take that into account when opening the URL.
If it's possible to add a custom (non-standard) attribute to the <a> element or possibly a child element to it, that'd work too, if it's valid to do so. Thanks in advance.
Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent?
Not in any standard way.
If it's possible to add a custom (non-standard) attribute to the element or possibly a child element to it, that'd work too, if it's valid to do so.
"non-standard" is practically invalid by definition.
There is a loophole in data- attributes (since they are defined by the specification as a way to add extensions) but:
"These attributes are not intended for use by software that is independent of the site that uses the attributes"
HTML 5 is a Candidate Recommendation, not a standard.
I've faced two strange attributes of an html tag . They are "data-url" and "data-key".
What are they and how can they be used?
For some reasons i can't show the exact example of the HTML file I've found them in, but here are some examples from the web with such tags:
data-key
data-key
data-url
PS: I've tried to Google, but no useful results were found.
When Should I Use the Data Attribute?
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
This time the data attribute is used to indicate the bubble value of the notification bubble.
Profile
This time is used to show the text for the tooltip.
This is the link
When Shouldn’t I Use the Data Attribute?
We shouldn’t use data attributes for anything which already has an already established or more appropriate attribute. For example it would be inappropriate to use:
<span data-time="20:00">8pm<span>
when we could use the already defined datetime attribute within a time element like below:
<time datetime="20:00">8pm</time>
Using Data Attributes With CSS (Attribute selectors)
[data-role="page"] {
/* Styles */
}
Using Data Attributes With jQuery (.attr())
Google
$('.button').click(function(e) {
e.preventDefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});
Examples and info from here
Those are called HTML5 Custom Data attributes.
Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate
attributes or elements. These attributes are not intended for use by
software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes
specified, with any value.
The reason why you can't find it in Google is because those attribute are custom attributes generated by user for their own usage.
From seeing your code it seems:
The person who has written this code, wants to store some additional
information with the elements. Not sure he may handle this in
Javascript too.
What you should do is to check the Javascript code completely,
whether he is handling those data attributes or if possible check
with him.
Since you code is using jQuery library, check for .data()
method. After a complete code review, if you find it has no use,
then feel free to remove.
data-* attributes are for adding arbitrary data to an element for use solely by the code (usually client side JavaScript) running on the site hosting the HTML.
In order to tell what the three examples you give are for, we would have to reverse engineer the code that comes with them (unless they are documented on the sites) since they don't have standard meanings.
A new feature being introduced in HTML 5 is the addition of custom data attributes. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
I am seeing an anchor tag with a data-folder attribute. What is this for? I researched it but found no info on it.
Also, I see that it has a data-toggle="dropdown" attribute. I researched that and see that it is a HTML 5 attribute used with the Bootstrap jQuery plugin (dropdown.js). So it's: data-toggle="dropdown".
Departments<span class=" caret"></span>
data-folder is custom made data-* attribute that later is used by some other tool, like CSS or JS/jQuery.
By the name of this attribute folder we can tell that it's indicating some reference to folder on server system (maybe ID of departments group?). Not knowing more about what you use we can't tell exactly.
If you are using one of supportable libraries (like jQuery), than you can use Visual Events to check what events does this specific element has.
This is a Custom Data Attribute as specified in W3C HTML5 specification.
Some libraries have methods developed around these type of attributes for easy storing and retrieval of data. Look at the JQuery .data method. This method retrieves/stores values via data attributes.
In your case the the following statement will return the value 4590.
$('<a>').data('folder')