fix(UIHelper): make other than MUI based buttons clickable (#121)

Signed-off-by: Jan Richter <jrichter@redhat.com>

Author: jrichter1

docs/changelog.md

@@ -2,7 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
-## [2.1.0] - Current
+## [2.1.1] - Current
+
+### Changed
+
+- **UI Helper clickButton method**: Uses role based locators instead of CSS selectors. As such is now compatible with both MUI and BUI based buttons.
+
+## [2.1.0]
 
 ### Added
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/e2e-test-utils",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Test utilities for RHDH E2E tests",
   "license": "Apache-2.0",
   "repository": {

src/playwright/helpers/common.ts

@@ -3,7 +3,6 @@ import { authenticator } from "otplib";
 import { test, expect } from "@playwright/test";
 import type { Browser, Page, TestInfo } from "@playwright/test";
 import { SETTINGS_PAGE_COMPONENTS } from "../page-objects/page-obj.js";
-import { UI_HELPER_ELEMENTS } from "../page-objects/global-obj.js";
 import * as path from "path";
 import * as fs from "fs";
 import { DEFAULT_USERS } from "../../deployment/keycloak/constants.js";
@@ -215,10 +214,6 @@ export class LoginHelper {
     }
   }
 
-  getButtonSelector(label: string): string {
-    return `${UI_HELPER_ELEMENTS.MuiButtonLabel}:has-text("${label}")`;
-  }
-
   getLoginBtnSelector(): string {
     return 'MuiListItem-root li.MuiListItem-root button.MuiButton-root:has(span.MuiButton-label:text("Log in"))';
   }

src/playwright/helpers/ui-helper.ts

@@ -94,17 +94,11 @@ export class UIhelper {
       force: false,
     },
   ) {
-    const selector = `${UI_HELPER_ELEMENTS.MuiButtonLabel}`;
     const button = this.page
-      .locator(selector)
-      .getByText(label, { exact: options.exact })
+      .getByRole("button", { name: label, exact: options.exact })
       .first();
+    await button.click({ force: options.force });
 
-    if (options?.force) {
-      await button.click({ force: true });
-    } else {
-      await button.click();
-    }
     return button;
   }
 

src/playwright/page-objects/global-obj.ts

@@ -4,8 +4,6 @@ export const WAIT_OBJECTS = {
 };
 
 export const UI_HELPER_ELEMENTS = {
-  MuiButtonLabel:
-    'span[class^="MuiButton-label"],button[class*="MuiButton-root"]',
   MuiToggleButtonLabel: 'span[class^="MuiToggleButton-label"]',
   MuiBoxLabel: 'div[class*="MuiBox-root"] label',
   MuiTableHead: 'th[class*="MuiTableCell-root"]',