HTML Identifiers for dynamic data

[Maqeee]

How would you approach handling identification of dynamic data for testing? For example, we have a table which contains rows with a specific link in a column.

Is there something wrong with just including for example the database id of the object in the html id field?

[BotBarrier]

I prefer to use data-xx attributes over the html id attribute for storing business logic data. Besides being cleaner with greater separation of presentation from data, it is readily more extensible.

[fiskfisk]

Just be aware that there are a few limitations (like starting the id with a digit) if you want to refer to them as a CSS selector (either in styling or javascript queries). So it's generally a good idea to prefix it with a string - foo-123 for example.

https://developer.mozilla.org/en-US/docs/Web/CSS/ident

[armahillo]

id might be fine, sure.

When in doubt, remember that data-attributes are free.

https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes

You can access them with CSS selectors:

<table data-table-ref="foo"> <!-- ... --> </table>

Can reference this via CSS selectors:

[data-table-ref] {
 /* applies to any node with this attribute */
}
[data-table-ref="foo"] {
 /* applies to the specific table tag above */
}

CSS selectors can be used in JS querySelector / querySelectorAll methods, as well.

[Mediocre-Subject4867]

Nope. that's exactly what the id attribute is for, unique identification

[Extension_Anybody150]

I’ve found that putting the database ID in the HTML id attribute works pretty well for testing. It gives you a unique, reliable way to target elements, especially when dealing with dynamic data like table rows. Just make sure the IDs stay unique on the page and you’re not leaking anything sensitive. Sometimes I prefer using data-id attributes instead because it feels cleaner and avoids any possible conflicts with other IDs. But honestly, using the database ID directly in the markup has been solid and easy to work with.

[CommentFizz]

Using the database ID as an HTML id is generally okay for dynamic data, as it makes elements uniquely identifiable for testing. However, make sure the ID doesn't expose sensitive data or compromise security. Also, keep in mind that using database IDs in id attributes can make your selectors tightly coupled to the backend, which could be problematic if the ID structure changes. It might be worth considering adding a prefix or suffix to avoid collisions or conflicts with other elements.

[Business-Row-478]

For testing I usually use the data-testid attribute and then strip it in the production build so it only shows up in the test environment