RHIDP-744 [Test Automation] Automate RHDH theme customization - E2E

Refactor custom theme E2E test and update uihelper functions

The custom theme end-to-end test was refactored to be more focused and reliable. The 'UIhelper' was enriched with new functions that improve reusability in tests. Also, configuration for application theming and authentication methods were updated.

Signed-off-by: Gustavo Lira <guga.java@gmail.com>

.ibm/pipelines/resources/config_map/configmap-app-config-rhdh.yaml

@@ -16,6 +16,11 @@ data:
             headerColor1: "rgb(248, 248, 248)"
             headerColor2: "rgb(248, 248, 248)"
             navigationIndicatorColor: "rgb(255,95,21)"
+          dark:
+            primaryColor: '#ab75cf'
+            headerColor1: 'rgb(0, 0, 208)'
+            headerColor2: 'rgb(255, 246, 140)'
+            navigationIndicatorColor: 'rgb(244, 238, 169)'
     backend:
       auth:
         keys:
@@ -44,6 +49,8 @@ data:
       # see https://backstage.io/docs/auth/ to learn about auth providers
       environment: development
       providers:
+        guest:
+          dangerouslyAllowOutsideDevelopment: true
         # Plugin: GitHub
         github:
           development:
@@ -53,8 +60,6 @@ data:
           development:
             clientId: ${GOOGLE_CLIENT_ID}
             clientSecret: ${GOOGLE_CLIENT_SECRET}
-        guest:
-          dangerouslyAllowOutsideDevelopment: true
 
     proxy:
       skipInvalidProxies: true
@@ -99,7 +104,6 @@ data:
           rules:
             - allow: [User, Group]
 
-
     dynatrace:
       baseUrl: temp
     argocd:

e2e-tests/playwright/e2e/plugins/custom-theme/custom-theme.spec.ts

@@ -0,0 +1,52 @@
+import { test, Page, TestInfo } from '@playwright/test';
+import { Common, setupBrowser } from '../../../utils/Common';
+import { ThemeVerifier } from './theme-verifier';
+
+let page: Page;
+
+test.describe('CustomTheme should be applied', () => {
+  let common: Common;
+  let themeVerifier: ThemeVerifier;
+
+  test.beforeAll(async ({ browser }, testInfo) => {
+    page = (await setupBrowser(browser, testInfo)).page;
+    common = new Common(page);
+    themeVerifier = new ThemeVerifier(page);
+
+    await common.loginAsGuest();
+  });
+
+  // eslint-disable-next-line no-empty-pattern
+  test('Verify that theme light colors are applied and make screenshots', async ({}, testInfo: TestInfo) => {
+    await themeVerifier
+      .setTheme('Light')
+      .verifyHeaderGradient(
+        'none, linear-gradient(90deg, rgb(248, 248, 248), rgb(248, 248, 248))',
+      )
+      .verifyBorderLeftColor('rgb(255, 95, 21)')
+      .takeScreenshotAndAttach(
+        'screenshots/custom-theme-light-inspection.png',
+        testInfo,
+        'custom-theme-light-inspection',
+      )
+      .verifyPrimaryColors('rgb(255, 95, 21)')
+      .execute();
+  });
+
+  // eslint-disable-next-line no-empty-pattern
+  test('Verify that theme dark colors are applied and make screenshots', async ({}, testInfo: TestInfo) => {
+    await themeVerifier
+      .setTheme('Dark')
+      .verifyHeaderGradient(
+        'none, linear-gradient(90deg, rgb(0, 0, 208), rgb(255, 246, 140))',
+      )
+      .verifyBorderLeftColor('rgb(244, 238, 169)')
+      .takeScreenshotAndAttach(
+        'screenshots/custom-theme-dark-inspection.png',
+        testInfo,
+        'custom-theme-dark-inspection',
+      )
+      .verifyPrimaryColors('#ab75cf')
+      .execute();
+  });
+});

e2e-tests/playwright/support/pageObjects/global-obj.ts

@@ -5,10 +5,14 @@ export const waitsObjs = {
 
 export const UIhelperPO = {
   MuiButtonLabel: 'span[class^="MuiButton-label"]',
+  MuiToggleButtonLabel: 'span[class^="MuiToggleButton-label"]',
   MuiBoxLabel: 'div[class*="MuiBox-root"] label',
   MuiTableHead: 'th[class*="MuiTableCell-root"]',
   MuiTableCell: 'td[class*="MuiTableCell-root"]',
   MuiTableRow: 'tr[class*="MuiTableRow-root"]',
+  MuiTypographyColorPrimary: '.MuiTypography-colorPrimary',
+  MuiSwitchColorPrimary: '.MuiSwitch-colorPrimary',
+  MuiButtonTextPrimary: '.MuiButton-textPrimary',
   MuiCard: cardHeading =>
     `//div[contains(@class,'MuiCardHeader-root') and descendant::*[text()='${cardHeading}']]/..`,
   MuiTable: 'table.MuiTable-root',

e2e-tests/playwright/utils/UIhelper.ts

@@ -3,7 +3,6 @@ import { UIhelperPO } from '../support/pageObjects/global-obj';
 
 export class UIhelper {
   private page: Page;
-  private selectors: { [key: string]: string };
 
   constructor(page: Page) {
     this.page = page;
@@ -46,6 +45,15 @@ export class UIhelper {
     return button;
   }
 
+  async clickBtnByTitleIfNotPressed(title: string) {
+    const button = this.page.locator(`button[title="${title}"]`);
+    const isPressed = await button.getAttribute('aria-pressed');
+
+    if (isPressed === 'false') {
+      await button.click();
+    }
+  }
+
   async verifyDivHasText(divText: string) {
     await expect(
       this.page.locator(`div`).filter({ hasText: divText }),
@@ -247,4 +255,30 @@ export class UIhelper {
     const rowCount = await this.page.locator(rowSelector).count();
     expect(rowCount).toBeGreaterThan(0);
   }
+
+  // Function to convert hexadecimal to RGB or return RGB if it's already in RGB
+  toRgb(color: string): string {
+    if (color.startsWith('rgb')) {
+      return color;
+    }
+
+    const bigint = parseInt(color.slice(1), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  async checkCssColor(page: Page, selector: string, expectedColor: string) {
+    const elements = await page.locator(selector);
+    const count = await elements.count();
+    const expectedRgbColor = this.toRgb(expectedColor);
+
+    for (let i = 0; i < count; i++) {
+      const color = await elements
+        .nth(i)
+        .evaluate(el => window.getComputedStyle(el).color);
+      expect(color).toBe(expectedRgbColor);
+    }
+  }
 }