How can I automatically validate that I have an HTML Id on every element?

Question

The testers on my project want a unique HTML ID on every page element to make their automated testing easier.

It's hard for me to remember to do this, because I don't need the IDs for development. How can I ensure that I don't forget?

I thought maybe something like Checkstyle could tell me, or even the "inspections" in IntelliJ - but neither of them seem to support this functionality.

Any ideas?

Answer 1

If you wanted something in javascript, you could use jQuery. $("*:not([id])").css('backgroundColor', 'yellow');

Would color anything without an ID yellow, where you just go through the source with Firebug and look for things that are colored yellow.

$.each($(*:not([id])), function(){
    $(this)
     .css("backgroundColor", "yellow")
     .addClass("no-id");
});

Answer 2

Two ideas come to mind: 1. let them tell you what doesn't have it. If that doesn't work, 2. get new testers. ;)

What kind of testing engine requires Id's on every element?

Answer 3

Adding ids to every element doesn't make sense at all. However, if they insist, you can add a small javascript code that adds Ids to the testing site which you can omit in production site.

Building on Chacha102's idea

$(document).ready(function() {
    var index = 1;
    $.each($(*:not([id])), function(){
        $(this).attr("id", "id1000" + index++); //or some other unique generator
    });
}

Just make sure this runs before the testing tool!

Answer 4

Setting an ID on every single element on every single page seems like a bad plan to me.

1. The IDs should be unique.
2. This will add lots of bloat to your pages
3. If these are generated... I take it they need to be the same every time for this test tool?
4. What is the name of this test tool? It seems odd that the IDs are "required" on every element
5. Presuming that every page might contain slightly different data every time you access it, this seems like a logistical nightmare to manage

Answer 5

The reason the tools don't support this is that it is a rather odd request. I've been there.

The jQuery solutions above will get them what they asked for-- but maybe not what they (or you, as a team) need. I'd definitely go back to the testers (not to fire them!), and try to understand the requirement a little more. Is it really every element? Look at a couple pages together and see what is missing-- maybe they are just frustrated and need a few more IDs than they have.

It's also hard to believe that a testing tool would only be able to address DOM elements by ID; see if there are other options that will work equally well and what you can volunteer to add to support them. (It will certainly be easier than adding IDs everywhere.)

Finally, if IDs are the only way, consider assigning the IDs based on something that will be more permanent than the element count-- some sort of hash of the innerHTML, an element's parent + index, or something like that.

Another thing to consider-- if you need to generate IDs-- is doing it server side. Depending on what language you are in, it may be easier to do there, and won't kill the browser performance.

Good luck!