Adding ID attribute to all HTML elements of a web application?

Question

Currently I am building a web portal using RoR, MySQL, HTML, CSS and jQuery etc., I got a request from my automation test engineer to add ID attributes(if possible NAME attribute also) to all the elements of my application.

I am confused to do this perhaps I am not sure whether it is a good practice or not, so can anybody please help me with specific disadvantages/issues with adding ID attributes to all elements of my application.

Thanks,
Siva

Matazzoni

Why does he want an ID for every element? – Latecomer

Sounds like your automation test engineer needs to learn about selectors and/or XPath. – Potbellied

I think it could be easy for him to select elements while writing automation scripts. – Matazzoni

Without Id or name to your basic input fields, or selection fields automation will be difficult. It will be better if you add either Id or name to basic input fields and the containers. NO disadvantage to it. – Angio

possible duplicate of Verifying text is present within certain element – Jarvey

Automation scripts? Please specify in your question which language you intend to use, please. If you are going to add ids to all of your elements, don't do it manually if your app is more than a page or is dynamically generated of course. – Infinitude

@Potbellied if a page has no id elements whatsoever, selectors/xpath are quite a pain and on top the whole testsuite will be extremely fragile. – Coca

@Christoph: That's not the point. The OP's tester wants him to add IDs to every single element on the page, which is redundant when you can already use selectors or XPath to reach any arbitrary element. If using them is a pain, then the automation tester just needs practice. On fragility, well, that's why we have test suites - to make sure even the smallest changes are thoroughly tested to make sure they don't unintentionally break anything. That being said, I upvoted your answer. – Potbellied

Answer 1

To do reliable frontend tests, you need to be able to identify certain elements without using overly specific selectors (which you need, if you have no reference elements). A selector like body div:nth-of-type(4) ul li:nth-child(5) a to check a certain link is not only obviously ugly, but also prone to changes in the markup. A small change could break half of your testsuite. To avoid this, there are several ways to make your test engineer's life easier:

The bad way

would be to assign ids to all your page elements...

The good way

is the following approach:

1. Make use of the new semantic tags like <nav>, <header>, <footer>, <main>, and <section>.
   With these elements you can build the basic structure of your page.
2. Assign ids to important/unique page elements. Use them sparingly, use meaningful names and keep in mind that ids represent unique elements (may only occur once on the page)!
3. Use the class attribute to group more than one elements with similar characteristics (for example navigation elements, external/internal anchors, interaction elements,...)
4. Avoid name attributes, or use only if necessary. HTML5 deprecated this attribute on certain elements like the <a>, so I would avoid it altogether. It's not necessary considering all the other options you have.

Finally, you should have a pair programming session with your test engineer to get a better feeling, what his needs are, so you don't plaster the page with useless markup.

Coca

Thanks @Coca for your detailed explanation, I went with your good way only, I had the semantic tags already, so organized them properly and added the ID attributes also for some elements to handle my scenario and support the automation engineers. – Matazzoni

Answer 2

The ids allow to reliably find the specific elements on a page, even if the markup around the elements changes (e.g. for a visual refresh).

On the other hand, extraneous ids increase the page download size and memory footprint.

The ids are also expected to be unique, so coming up with a unique id for every element on a page will be hard, but that's probably not what is needed for the test automation anyway.

Drypoint

Thanks @Drypoint for your inputs, I would like to know "how the page download size increases with ID attributes for more elements ?", can you explain this if possible, otherwise just share some reference links. – Matazzoni

Answer 3

it depends of the context, if your env is very dynamic and there's no an easy way to automate by xpath or css (by 'easy way' I mean short and reconigzable locator as long string locators tends to be unstable due to ui changes). There are specific cases where whole elements are dynamic so you can take really advantage of id's else doesn't worth being that it looks like very professional but itbrequires to spend extra time which is not adding value or enough to be worth.

Special