Summary

The E2E test "Default Global Header >> Verify Profile Dropdown behaves as expected" is failing due to an incorrect CSS selector being used to locate the "Overview" tab element.

Test Information

Test File: e2e-tests/playwright/e2e/default-global-header.spec.ts
Test Name: Verify Profile Dropdown behaves as expected
Test Location: Line 90

Failure Details

Error: TimeoutError: locator.waitFor: Timeout 10000ms exceeded
Failed Assertion:

await uiHelper.verifyTextInSelector(
  "a[data-testid='header-tab-0'] > span",
  "Overview",
);

Error Message:

Verification failed for text: Expected "Overview". Selector content: 

Root Cause

The test is using an incorrect CSS selector a[data-testid='header-tab-0'] > span to locate the "Overview" element. According to the page snapshot, the element is actually a tab with role="tab", not a link (<a>) element.

Page Snapshot Evidence:

- tablist "tabs" [ref=e134]:
  - tab "Overview" [selected] [ref=e135] [cursor=pointer]

Proposed Solution

Replace the CSS selector-based approach with Playwright's getByRole locator, which follows accessibility best practices:

Option 1 (Recommended):

await expect(page.getByRole('tab', { name: 'Overview' })).toBeVisible();

Option 2 (Using existing helper):

await uiHelper.verifyText("Overview");

Benefits of Fix

• Uses semantic ARIA roles instead of fragile CSS selectors
• Follows Playwright best practices
• More resilient to UI changes
• Better accessibility testing
• Aligns with existing clickTab() helper method pattern (line 487 of ui-helper.ts)