How I Maintain a Unique Set of HTML Ids with JavaScript

Managing a large set of unique ids for an application is quite daunting, especially as the application grows and scales. HTML element ids are a perfect example, as they are typically scattered across many files and with little coordination. When a couple more developers are added to the mix, bug reports become less of a question of ‘if’, and more a question of ‘when’.

A recent use case I had for this was tracking testing ids in Cypress. The standard convention in Cypress is to add a ‘data-cy’ attribute to HTML elements so that they can be easily selected when writing tests.

<button data-cy="my-button">Click</button>

This is great, but as I have already mentioned, managing and tracking these Cypress test ids can quickly become unwieldy as an application scales. Having a duplicate id can cause errors when writing other tests, and the cause of the failing test may not be obvious. This can lead to wasteful detective and debugging work. However, with an array and a simple test, we can easily get around this issue.

Tracking the Ids

For this process to work, we will need to keep an array with all our unique ids. Below you will see an example set of cypress ids.

When adding a ‘data-cy’ attribute to an HTML element in my code, I also need to add it to this array. I named my file CyIds.ts, but you can call it whatever you like. This array inherently doesn’t prevent us from adding duplicate ids, but with that simple test I have mentioned we can catch duplicates effortlessly.

(If anyone has a suggestion on how to pull ‘data-cy’ attribute values from the src folder and generate a file with this array in VSCode, that would be a tremendous boon).

Writing the Test

Now that we are keeping an array of ids, let’s write a simple test that will fail if we have any duplicates.

By sorting the array, our test can efficiently track down any duplicate ids by checking its own value with its next neighbors. To identify which id is a duplicate, we include the assert inside of the loop, so that if it fails, it logs the failing id. With this in place, if you add a duplicate id to the master array, your test will fail and you can easily track down the culprit duplicate instead of digging through all of your source code.

Conclusion

Tracking unique ids throughout a web application can seem trivial at first, but it can quickly manifest into an exhausting pile of technical debt if not managed correctly. By using the technique above, you may have the small hassle of adding ids to the array as you go, but can save yourself a lot of headaches down the road. Automated tests are our friends, let’s write them once and let them do the work for us.

In my next article, I will tell you how we can leverage TypeScript and the “const assertion” to get some really amazing IntelliSense that will make using these ids when writing tests effortless.

Find more content at plainenglish.io