Breakthrough: Enhance EDC UI with data-testid

[richardtreier]

To make E2E Test development and maintenance easier, we want to add Test IDs to DOM elements where it makes sense.

Why:

• No adjustment of E2E Tests for wording changes or placeholder changes
• Default Angular Material controls generate random IDs counting up, they change depending on which page was navigated to first
• When having rendered cards the areas might all be divs with tailwind classes, making it hard to find out which is which.
• Using CSS classes is hard, because we use Tailwind, and do not want to have to extract everything
• Menus are under change right now, too

Tasks

Beta Give feedback

1. Decide on a Test ID format. Preferably data-testid, targeted with angular as [attr.data-testid]="..."
2. All buttons need a Test ID, preferably enforced by a custom component as API surface
3. All inputs need a Test ID, preferably enforced by a custom component as API surface
4. All Checkbox / Radio Button options need a Test ID
5. Non-changing drop down options preferably get a Test ID
6. Menu Items need a Test ID
7. All major output fields would profit from getting a Test ID, e.g. "Description Text", "Labels"
8. All Property Grid Groups need a Test ID
9. All Property Grid Groups need a Test ID to mark the key area and the value area, since probably the dom elements are not precise enough
10. Ensure all Angular Material Controls have an ID
11. See if any other interaction surfaces exist that would make sense to be get Test IDs