May 11, 2020

Find Empty 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.

Comments

Add your Comments

Feel free to leave a comment about this post.

- Feel Free to add HTML to your comment!