Well usually you would use role attributes or aria-label or aria-labelled-by to add the accessibility heuristics. But in the case of table, you don’t need to add any thing extra to make the HTML Table accessible. Just using correct element syntax is enough.
What it has to do with testing, well those can easily by used as locators or hooks that can be accessed by cypress or playwright
So what options do we have with
<th> User Name </th>
<>....................</>
<td>John Doe</td>
We can’t use id as this has to unique per element. The other options is to use cy-testId or some playwright equivalent.
The only caveat is we are locking ourselves in a particular system. In the future there is will be new testing library.
For future friendly solution we use custom attributes, that can be prefixed with data as
data-testId="username" Bonus Tip:
In angular we use pipes to transform values for display purpose only.
<p> {{ 128.23423 | number: '1.0.1' }} </p>
This snippet is using Decimal Pipe from angular. Writing end to end test in this case would require to round off value on both ends for reconcilleation. Or we can use yet another custom attribute to expose raw value
<td [attr.data-raw]="128.23423" data-testId="revenue" > {{ 128.23423 | number: '1.0.1' }} <td>
This way we are not bound to have any HTML structure inside the td. You can add icons and nested div and span tags to format the text and your test locators will still find the right element and text to do the comparison