Is it a good idea to use "data-" attributes to replace the "id" attributes in elements(tags) for css-selection purposes and then use those "data-*" attributes in automation testing scripts?
Using "data-*" attributes to replace the "id" attributes in HTML tags for CSS-Selecting Purpose
Viewed 1113
2 Answers
No.
CSS selection and DOM-tree selection on id is much faster than selection any other attribute. Data-attribute select might be less efficient than selection on other attributes in somebrowsers.
The exception might be if you are abusing id attributes: storing something that is not just an identifier in them (e.g. composite data or something not unique). Selecting parts of id values, if supported, gives terrible performance. I would recommend using data attributes over abusing id attributes.
Factually, you can use any of the attributes of an element.
So, Yes, you can use data-* attribute instead of id attribute as well provided the element is uniquely identified.
HTML data-* Attributes
- The
data-*attributes are used to store custom data private to the page or application. - The
data-*attributes 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).
- The
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
- The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix
- Note: Custom attributes prefixed with
data-will be completely ignored by the user agent.
Related