We are relying on XPath/CSS locators in Playwright, while it’s a bad practice.

See the documentation: https://playwright.dev/docs/locators#locate-by-css-or-xpath

• They are fragile, and I see many breakages in E2E tests caused by this.
• We even have many functions in classes like ui-helper, that are reinventing the wheel - functions that are doing the same as Playwright is doing by design.

The scope of this issue is to define RHDH testing best practices for locators in E2E tests, document them, create Cursor rules (inspiration from https://cursor.directory/playwright-cursor-rules), create linter rules (warnings), and spread the knowledge across the team. 

It can be valuable to discuss this with the UI team

Examples:

a) this function 

  async verifyLinkVisible(text: string, timeout = 10000): Promise<void> {
    const locator = this.page.locator(`a:has-text("${text}")`);
    await expect(locator).toBeVisible({ timeout });
  }

can be replaced with

await expect(page.getByRole("link", { name: "Import an existing Git repository" })).toBeVisible({ timeout: 10000 });