Find Empty Name Ids
Use jQuery to find all the DIVs that don't have name IDs
One of the challenges with writing any QA automation is XPaths. They are essential to finding elements on a page. You need them to verify functionality or to take some action - such as clicking a button.'
The XPath helps automation find that location, it's primarily built using name ids. The reason name ids are important is because they are supposed to be unique on a page.
More often than not, Developers will leave out adding name ids. This means that QA has to use the full XPath location. This now makes the automation code risky because if someone makes a simple change to the page - such as adding a new element, the automation test may fail. This is because the XPath flow is broken.
Use JQuery to Help with Ids
If you're testing a site that uses jQuery, you can run this simple script to find all the areas of the page that don't have a name ID:
$('*:not([id]):not([class])').css("border","2px solid red");
To use this simply open up the Chrome console panel and paste in the above code. If the page element doesn't have an ID or class, the element will get highlighted in red.
Not every single DIV tag needs a class or ID, but this is a good technique to find out where they are missing on the page.
Bookmarklet
Here's the code in a bookmarklet format, so that you can run it whenever you want:
javascript:$('*:not([id]):not([class])').css("border","2px solid red");
If you know about Bookmarklets, then you know that you can simply Drag/Drop this to your Bookmark toolbar: Check Name IDs
Knowlegde is Powerful
Knowing the availability of empty DIVs without a name ID can help with the automation process - QA can now request an ID in all the key points in the web code.
Simply take a screen shot and ask Devs to put name IDs where needed.