Improve the UI to make e2e tests more reliable

[ununhexium]

Feature Request

Description

• As a developer who needs to runE2E tests and fix them if needed, I want to save time and sanity, so I can release faster and move on to the next task.

Which Areas Would Be Affected?

EDC UI html.

Why Is the Feature Desired?

Make the E2E tests more resilient to changes.

How does this tie into our current product?

Add id=ci-... or similar flag to all the properties that are used in the E2E test in the EDC EE, such that it's not referring to elements by name/text but by id, greatly increasing the flexibility in what is displayed or greatly improving the resilience of the E2E tests when a visual change happens in the UI.

The idea is to reference all the element that are manipulated programmatically by a unique test id.

See this page for that's possible to use.

Stakeholders

@ununhexium
@illfixit

Solution Proposal and Work Breakdown

Ideally this should be done before e2e tests are added, to minimize later changes.

See also EDC EE

Tasks

Beta Give feedback

1. Fix the GitHub Projects Labels, Sprint and other Metadata
2. Refine a Solution Proposal / Work Breakdown
3. (For Tech Team): Include acceptance criteria for the sub-tasks of the work breakdown
4. Identify which elements need marking in the e2e tests
5. Add an id=ci-... attribute
6. Change the e2e tests to use those new ids.