test(homepage): add Playwright e2e for dynamic home page

Add workspace e2e-tests with Keycloak auth, dynamic-plugins config aligned
with the overlay image, and serial tests for cards, resize, delete, and
clear-all flows. Skip restore-defaults until the control is fixed upstream.

Made-with: Cursor

Author: HusneShabbir

workspaces/homepage/e2e-tests/.gitignore

@@ -0,0 +1,3 @@
+playwright-report/
+test-results/
+node_modules/.cache/

workspaces/homepage/e2e-tests/.prettierignore

@@ -0,0 +1,2 @@
+playwright-report/
+test-results/

workspaces/homepage/e2e-tests/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

workspaces/homepage/e2e-tests/eslint.config.js

@@ -0,0 +1,3 @@
+import { createEslintConfig } from "@red-hat-developer-hub/e2e-test-utils/eslint";
+
+export default createEslintConfig(import.meta.dirname);

workspaces/homepage/e2e-tests/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "homepage-e2e-tests",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22",
+    "yarn": ">=3"
+  },
+  "packageManager": "yarn@3.8.7",
+  "description": "E2E tests for Dynamic Home Page plugin",
+  "scripts": {
+    "test": "playwright test",
+    "report": "playwright show-report",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "tsc:check": "tsc --noEmit",
+    "check": "yarn tsc:check && yarn lint:check && yarn prettier:check"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@playwright/test": "1.57.0",
+    "@red-hat-developer-hub/e2e-test-utils": "1.1.14",
+    "@types/node": "^24.10.1",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.39.2",
+    "eslint-plugin-check-file": "^3.3.1",
+    "eslint-plugin-playwright": "^2.4.0",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.50.0"
+  }
+}

workspaces/homepage/e2e-tests/playwright.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@red-hat-developer-hub/e2e-test-utils/playwright-config";
+import dotenv from "dotenv";
+
+dotenv.config({ path: `${import.meta.dirname}/.env` });
+
+export default defineConfig({
+  projects: [
+    {
+      name: "homepage",
+    },
+  ],
+});

workspaces/homepage/e2e-tests/tests/config/app-config-rhdh.yaml

@@ -0,0 +1,18 @@
+auth:
+  environment: development
+  providers:
+    guest:
+      dangerouslyAllowOutsideDevelopment: true
+    oidc:
+      development:
+        metadataUrl: ${KEYCLOAK_METADATA_URL}
+        clientId: ${KEYCLOAK_CLIENT_ID}
+        clientSecret: ${KEYCLOAK_CLIENT_SECRET}
+        prompt: auto
+        callbackUrl: ${RHDH_BASE_URL}/api/auth/oidc/handler/frame
+        signIn:
+          resolvers:
+            - resolver: emailLocalPartMatchingUserEntityName
+
+permission:
+  enabled: true

workspaces/homepage/e2e-tests/tests/config/dynamic-plugins.yaml

@@ -0,0 +1,46 @@
+# RHDH ships this plugin from dynamic-plugins.default.yaml as
+# ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page with default
+# dynamicRoutes. Enabling the same frontend plugin again via GHCR with different dynamicRoutes
+# makes install-dynamic-plugins.py fail merging pluginConfig. Disable the dist entry first
+# (same pattern as workspaces/scorecard/e2e-tests/tests/config/dynamic-plugins.yaml).
+plugins:
+  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page
+    disabled: true
+  - package: oci://ghcr.io/redhat-developer/rhdh-plugin-export-overlays/red-hat-developer-hub-backstage-plugin-dynamic-home-page:bs_1.45.3__1.10.4!red-hat-developer-hub-backstage-plugin-dynamic-home-page
+    disabled: false
+    pluginConfig:
+      dynamicPlugins:
+        frontend:
+          red-hat-developer-hub.backstage-plugin-dynamic-home-page:
+            dynamicRoutes:
+              - path: /
+                importName: DynamicCustomizableHomePage
+            mountPoints:
+              - mountPoint: home.page/cards
+                importName: OnboardingSection
+                config:
+                  id: onboarding-section
+                  title: Onboarding section
+              - mountPoint: home.page/cards
+                importName: EntitySection
+                config:
+                  id: entity-section
+                  title: Entity section
+              - mountPoint: home.page/cards
+                importName: RecentlyVisitedCard
+                config:
+                  id: recently-visited-card
+                  title: Recently visited
+              - mountPoint: home.page/cards
+                importName: TopVisitedCard
+                config:
+                  id: top-visited-card
+                  title: Top visited
+              - mountPoint: home.page/cards
+                importName: JokeCard
+                config:
+                  id: joke-card
+                  title: Random joke
+            translationResources:
+              - importName: homepageTranslations
+                ref: homepageTranslationRef

workspaces/homepage/e2e-tests/tests/specs/dynamic-home-page.spec.ts

@@ -0,0 +1,68 @@
+import { test } from "@red-hat-developer-hub/e2e-test-utils/test";
+import { DynamicHomePagePo } from "../support/dynamic-home-page.po";
+
+/* Assertions live in DynamicHomePagePo (expect/verify*), matching RHDH core structure. */
+/* eslint-disable playwright/expect-expect -- see DynamicHomePagePo */
+test.describe.serial("Dynamic home page customization", () => {
+  test.beforeAll(async ({ rhdh }) => {
+    await rhdh.configure({
+      auth: "keycloak",
+      // Default chart tag in registry (avoid "next", which is not always published).
+      version: process.env.RHDH_VERSION ?? "1.10",
+    });
+    await rhdh.deploy();
+  });
+
+  test.beforeEach(async ({ loginHelper, uiHelper }) => {
+    await loginHelper.loginAsKeycloakUser();
+    await uiHelper.goToPageUrl("/", "Welcome back!");
+  });
+
+  test("Verify cards display after login", async ({ page, uiHelper }) => {
+    const home = new DynamicHomePagePo(page, uiHelper);
+    await home.seedHomePageWidgets();
+    await home.verifyHomePageLoaded();
+    await home.verifyAllCardsDisplayed();
+    await home.verifyEditButtonVisible();
+  });
+
+  test("Verify all cards can be resized in edit mode", async ({
+    page,
+    uiHelper,
+  }) => {
+    const home = new DynamicHomePagePo(page, uiHelper);
+    await home.enterEditMode();
+    await home.resizeAllCards();
+    await home.exitEditMode();
+  });
+
+  test("Verify cards can be individually deleted in edit mode", async ({
+    page,
+    uiHelper,
+  }) => {
+    const home = new DynamicHomePagePo(page, uiHelper);
+    await home.enterEditMode();
+    await home.deleteAllCards();
+    await home.verifyCardsDeleted();
+  });
+
+  // restore defaults button is not working as expected in talks with devs
+  // eslint-disable-next-line playwright/no-skipped-test -- re-enable when restore-defaults is fixed
+  test.skip("Verify restore default cards", async ({ page, uiHelper }) => {
+    const home = new DynamicHomePagePo(page, uiHelper);
+    await home.restoreDefaultCards();
+    await home.verifyCardsRestored();
+  });
+
+  test("Verify all cards can be deleted with Clear all button", async ({
+    page,
+    uiHelper,
+  }) => {
+    const home = new DynamicHomePagePo(page, uiHelper);
+    // Until restore-defaults works, rebuild the grid the same way as the first test.
+    await home.seedHomePageWidgets();
+    await home.enterEditMode();
+    await home.clearAllCardsWithButton();
+    await home.verifyCardsDeleted();
+  });
+});