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

Issue

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

Solution

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.

Answered By - Christoph