The Chaos of Missing ID Tags in Testing

During the development of new functionality for my website, I faced a critical challenge: ensuring that new features do not disrupt existing ones. While I could easily run the dev build (in my case), this process was insufficient for effectively testing the integration of components with one another.

I decided to create an automated testing framework for my site but quickly realized that I had overlooked an essential element in the code—ID tags!

In my case, I had simply forgotten to add them.

Now, I want to automate the test cases using Playwright.

While I can make it work without using the ID tags, it’s not a sustainable solution in the long run. Thus, I decided to start from scratch and began rewriting different components one by one (a process I’m still undertaking gradually).

My approach involves adding tags, devising tests based on those tags, writing the tests, and then automating them.

What Are ID Tags and Why Are They Critical?

You might be wondering: what’s the big deal? If we have XPath or CSS selectors, why do we need to add these IDs?

ID tags (or id attributes in HTML) are essential for testing because they provide unique and stable identifiers for elements on a webpage.

• The id attribute must be unique within the entire HTML document.
• IDs are less likely to change compared to classes or other selectors, particularly if the application adheres to best practices.
• Using IDs minimizes the risk of flaky tests caused by dynamic content or CSS changes.
• Searching for elements by id is generally faster than searching by class or tag name, especially in large documents.

Test Readability

Having ID tags enhances the readability and maintainability of test code:

Example:

const button = await page.$('#submit-btn');
await button.click();

is more straightforward than:

const button = await page.$('.button.submit.primary');

Think of IDs as the “social security numbers” of your webpage elements—they provide a guaranteed way to locate and interact with specific components.

By using Test Case ID tagging, you can associate test cases in your automation scripts with their corresponding unique IDs. This ensures accurate mapping of test results, regardless of how test cases are organized or executed.

Best Practices for ID Tagging

After this experience, I developed a systematic approach to ID tagging that has served our team well:

1. Use Descriptive, Hierarchical ID Names

<!-- Bad -->
<button id="btn1">Submit</button>

<!-- Good -->
<button id="checkout-form-submit-button">Submit</button>

2. Maintain Consistent Naming Patterns

Establish a naming convention, such as: {page}-{component}-{element-type}-{descriptor}.

Examples:

• product-gallery-image-thumbnail
• user-profile-input-username
• cart-summary-button-checkout

3. Don’t Skip Dynamic Elements

For elements generated from lists, be sure to include indices:

<div id="product-list-item-3-container">
  <img id="product-list-item-3-image" src="..." />
  <button id="product-list-item-3-details-button">Details</button>
</div>

4. Document Your ID Strategy

Create a simple guide outlining your ID naming conventions for new team members.

The Evolution of Testing Efficiency with ID Tags

After we implemented proper ID tagging across our site, the improvements were dramatic:

Conclusion

What I learned from this experience is that ID tags are not merely a technical detail—they serve as the foundation of a robust testing strategy. By investing time at the beginning to accurately identify elements, we save countless hours of debugging, manual testing, and rework down the line.

If you’re building any web application that will require testing (and let’s face it, they all will), make ID tagging a non-negotiable part of your development process. Your future self will thank you.