feat(e2e): [release-1.8] refactor tests to use semantic selectors and remove flaky anti-patterns

[kim-tsao]

Description

Please explain the changes you made here.

Which issue(s) does this PR fix

cherrypick of #3837

• Fixes #?

PR acceptance criteria

Please make sure that the following steps are complete:

• GitHub Actions are completed and successful
• Unit Tests are updated and passing
• E2E Tests are updated and passing
• Documentation is updated if necessary (requirement for new features)
• Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign gustavolira for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• e2e-tests/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[rhdh-qodo-merge]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🔒 No security concerns identified

⚡ Recommended focus areas for review Flaky Wait The new selectMuiBox() implementation waits for dialogs to detach and then silently ignores timeouts/errors when no dialog exists. Swallowing errors can hide legitimate UI state problems (e.g., a dialog that should have closed but didn’t), leading to later interactions failing in non-obvious ways. Consider narrowing the selector to the specific dialog(s) that can block this interaction, and only ignoring the “no such element” case rather than any timeout/detach failure. // Wait for any overlaying dialogs to close before interacting await this.page .locator('[role="presentation"].MuiDialog-root') .waitFor({ state: "detached", timeout: 3000 }) .catch(() => {}); // Ignore if no dialog exists // Use semantic selector with fallback to CSS selector const combobox = this.page .getByRole("combobox", { name: label }) .or(this.page.locator(`div[aria-label="${label}"]`)); await expect(combobox).toBeVisible(); await combobox.click(); // Wait for and click option using semantic selector const option = this.page.getByRole("option", { name: value }); await expect(option).toBeVisible(); await option.click(); } Ambiguous Locator findTableCellByColumn() derives cellIndex from a column header located via getByRole("columnheader", { name }). If multiple headers match (e.g., duplicated column names, hidden headers, or multiple tables on the page), the computed index can be incorrect and cause the helper to read the wrong cell. Consider scoping to a specific table (or passing a table/container locator) and/or enforcing uniqueness (e.g., .first() with an assertion that count is 1) before evaluating cellIndex. export async function findTableCellByColumn( page: Page, rowText: string | RegExp, columnName: string | RegExp, ): Promise<Locator> { const header = SemanticSelectors.tableHeader(page, columnName); const columnIndex = await header.evaluate( (th: HTMLTableCellElement) => th.cellIndex, ); return findTableCell(page, rowText, columnIndex); }

📚 Focus areas based on broader codebase context Flaky Test The test now asserts an exact plugin version string (1.1.30), which is likely to change across releases/environments and can make the E2E suite brittle. Prefer asserting a semantic version pattern (or verifying presence/non-empty value) and keep the test focused on behavior rather than a specific build output. (Ref 2) await expect(page.getByRole("cell", { name: "1.1.30" })).toBeVisible(); // Verify actions column - in production, buttons are disabled with tooltip const techdocsRow = page .getByRole("row") .filter({ hasText: "Techdocs Module Addons Contrib" }); await expect(techdocsRow).toBeVisible(); // Wait specifically for the Actions cell (5th cell / last cell) to be rendered const actionsCell = techdocsRow.getByRole("cell").last(); await expect(actionsCell).toBeVisible({ timeout: 15000 }); // Now wait for the tooltip text to appear in the actions cell await expect(actionsCell).toContainText( /Package cannot be managed in the production environment/i, { timeout: 15000 }, ); Reference reasoning: The existing extensions E2E coverage uses regex-based version matching for table cells, which avoids pinning to a specific version and reduces maintenance when versions bump. Aligning this new assertion with that approach would keep tests stable across routine dependency updates.

📄 References redhat-developer/rhdh/e2e-tests/playwright/e2e/techdocs.spec.ts [1-85] redhat-developer/rhdh/e2e-tests/playwright/e2e/custom-theme.spec.ts [21-61] redhat-developer/rhdh/e2e-tests/playwright/e2e/plugins/quick-access-and-tech-radar.spec.ts [9-42] redhat-developer/rhdh/e2e-tests/playwright/e2e/home-page-customization.spec.ts [7-57]

[rhdh-qodo-merge]

PR Type

Enhancement, Tests

---

Description

• Refactor E2E tests to use semantic selectors instead of fragile MUI class-based selectors

• Remove manual timeouts and force clicks, replacing with proper wait strategies and assertions

• Add SemanticSelectors utility class with role-based helpers for maintainable test code

• Update page objects with semantic methods while maintaining backward compatibility

• Fix ESLint errors and apply code review suggestions from qoDo bot

---

File Walkthrough

	Relevant files
Enhancement	22 files oidc.spec.ts Remove manual timeouts, replace with semantic selectors    +10/-8    catalog-timestamp.spec.ts Replace MUI selectors with semantic role-based locators    +17/-11  default-global-header.spec.ts Migrate to semantic selectors for navigation and buttons  +25/-24  extensions.spec.ts Replace MUI class selectors with semantic role-based selectors +27/-23  github-happy-path.spec.ts Remove force clicks, use semantic selectors with visibility checks +10/-2    learning-path-page.spec.ts Refactor to use semantic link selectors with proper scoping +5/-4      application-provider.spec.ts Replace MUI card selectors with semantic role-based locators +36/-25  catalog-users.spec.ts Update to return Locator objects instead of async promises +1/-1      kubernetes-actions.spec.ts Remove manual timeouts, use semantic selectors and assertions +8/-11    kubernetes-rbac.spec.ts Use semantic selectors for accordion and heading elements +11/-9    quay.spec.ts Replace CSS selectors with semantic role-based locators    +4/-4      rbac.spec.ts Comprehensive refactor to semantic selectors, remove timeouts and force clicks +119/-74 topology.spec.ts Replace CSS selectors with semantic getByTestId and role-based locators +13/-5    user-settings-info-card.spec.ts Replace MUI selectors with semantic text and visibility assertions +18/-14  settings.spec.ts Simplify selectors by removing unnecessary locator chaining +2/-4      catalog-users-obj.ts Refactor to use semantic selectors, return Locator objects +22/-8    global-obj.ts Add semantic helper methods, deprecate MUI class selectors with migration guide +188/-1  page-obj.ts Add semantic methods to component selectors with documentation +229/-0  rbac-po.ts Replace search selectors with semantic placeholder-based locators +22/-6    semantic-selectors.ts New utility class with comprehensive semantic selector methods +476/-0  keycloak.ts Update to use synchronous Locator returns instead of async +2/-2      ui-helper.ts Refactor selectMuiBox to use semantic selectors, improve dialog handling +23/-6
Bug fix	1 files common.ts Add error handling for popup closure during Keycloak login +9/-1

---

[rhdh-qodo-merge]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Consider a follow-up to remove deprecated test selectors The PR deprecates old, fragile test selectors in favor of a new semantic pattern. A follow-up should be created to remove the deprecated code and migrate all tests to the new selectors. Examples: e2e-tests/playwright/support/page-objects/global-obj.ts [15-71] /** * UI_HELPER_ELEMENTS - Legacy MUI class selectors * @deprecated These selectors are based on MUI implementation details and can break with UI library updates. * * Migration Guide: * - MuiButtonLabel -> Use SemanticSelectors.button(page, 'Button Name') or getButton() method below * - MuiTableCell -> Use SemanticSelectors.tableCell(page, 'Cell Text') or getTableCell() method * - MuiTableHead -> Use SemanticSelectors.tableHeader(page, 'Column Name') or getTableHeader() method * * New code should use SemanticSelectors class or the get*() methods below. ... (clipped 47 lines) e2e-tests/playwright/support/page-objects/page-obj.ts [11-285] /** * HOME_PAGE_COMPONENTS - Home page element selectors */ export const HOME_PAGE_COMPONENTS = { // Legacy selectors - maintained for backward compatibility /** @deprecated Use SemanticSelectors.region() with appropriate filter */ MuiAccordion: 'div[class*="MuiAccordion-root-"]', /** @deprecated Use SemanticSelectors.region() or article with appropriate filter */ MuiCard: 'div[class*="MuiCard-root-"]', ... (clipped 265 lines) Solution Walkthrough: Before: // e2e-tests/playwright/support/page-objects/global-obj.ts /** * UI_HELPER_ELEMENTS - Legacy MUI class selectors * @deprecated These selectors are based on MUI implementation details... */ export const UI_HELPER_ELEMENTS = { /** @deprecated Use SemanticSelectors.button(page, name) or getButton() */ MuiButtonLabel: '...', /** @deprecated Use SemanticSelectors.tableCell(page, text) or getTableCell() */ MuiTableCell: '...', // ... other deprecated selectors // ======================================== // NEW SEMANTIC METHODS - Preferred approach // ======================================== getButton: (page: Page, name: string | RegExp): Locator => { ... }, getLink: (page: Page, name: string | RegExp): Locator => { ... }, // ... other new semantic methods }; After: // e2e-tests/playwright/support/page-objects/global-obj.ts /** * UI_HELPER_ELEMENTS - Semantic element accessors */ export const UI_HELPER_ELEMENTS = { // ======================================== // NEW SEMANTIC METHODS - Preferred approach // ======================================== getButton: (page: Page, name: string | RegExp): Locator => { ... }, getLink: (page: Page, name: string | RegExp): Locator => { ... }, getTable: (page: Page): Locator => { ... }, getTableCell: (page: Page, text?: string | RegExp): Locator => { ... }, // ... other new semantic methods }; Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies the PR's introduction of a deprecation strategy for old selectors and wisely proposes a follow-up to complete the migration, which is crucial for long-term test suite maintainability.	Medium
General	Use regex for progress indicator To avoid false positives, replace the literal string match for "second" with a regular expression that matches a countdown pattern like "10 second". e2e-tests/playwright/e2e/plugins/kubernetes-actions/kubernetes-actions.spec.ts [57-58] -// Wait for creation process to show progress indicator -await expect(page.getByText("second")).toBeVisible(); +// Wait for creation process to show progress indicator (e.g. "10 second") +await expect(page.getByText(/\d+\s*second/)).toBeVisible(); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out that waiting for the literal text "second" is brittle. Using a regex like /\d+\s*second/ makes the test more robust by matching the actual progress indicator format.	Low
	Fix typo in variable name Fix the typo in the singInMethods variable name by renaming it to signInMethods for clarity and consistency. e2e-tests/playwright/e2e/auth-providers/oidc.spec.ts [392-394] -const singInMethods = await signInMethodsContainer +const signInMethods = await signInMethodsContainer .getByRole("heading", { level: 6 }) .allInnerTexts(); Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly identifies and fixes a typo in a variable name (singInMethods to signInMethods), which improves code readability and maintainability.	Low
Update

[openshift-ci]

@kim-tsao: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-ocp-helm	5642868	link	true	/test e2e-ocp-helm

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-4252
• quay.io/rhdh-community/rhdh:pr-4252-56428681