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

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 2

As someone who works on Test Automation as a day job: The request to add unique IDs to elements that are interacted with is going to add a lot of stability to the automated suite of tests.

Adding an ID to every single element in the DOM would of course be a ridiculous overhead.

Most frameworks have the ability to use CSS or XPath or even image matching. This is a great fallback for when there is no line of communication between developers and testers. If however, there is communication between these teams - it makes sense to add these.

As a dev team - you should be getting a lot of value out of these tests. They should give you almost instant feedback following deployment of changes into a test environment. If the tests are flakey - their worth will plummet. It's in everyone's interest to have the tests as reliable as possible. Good IDs are invaluable in this respect.

Just as a note - the suggestions of auto-generating IDs are fraught with risks. These can easily give a false sense of security and are probably worse than none at all. The point is that the ID be stable and reliable. A incrementally generated ID will change if a new element is added into the DOM above. An ID based on a hash of its contents will change if there is a small change to the label etc etc...

Also as a tester - spending half an hour writing an xpath to uniquely identify an element is a poor use of time if adding the ID would have taken a developer 5 mins..... :)

Answer 3

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 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!

Answer 6

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!