feat(dcm): add Playwright E2E test suite for DCM RHDH plugin

workspaces/dcm/.gitignore

@@ -52,3 +52,7 @@ site
 
 # E2E test reports
 e2e-test-report/
+
+# Playwright test artifacts
+**/test-results/
+playwright-results.xml

workspaces/dcm/.prettierignore

@@ -3,3 +3,4 @@ dist-types
 coverage
 .vscode
 .eslintrc.js
+packages/app/e2e-tests/fixtures/dcm/invalid-catalog-item.yaml

workspaces/dcm/package.json

@@ -27,7 +27,9 @@
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write .",
     "new": "backstage-cli new --scope @red-hat-developer-hub",
-    "postinstall": "cd ../../ && yarn install"
+    "postinstall": "cd ../../ && yarn install",
+    "e2e-test": "playwright test",
+    "e2e-test:live": "playwright test --project=live"
   },
   "workspaces": {
     "packages": [
@@ -46,6 +48,7 @@
     "@backstage/e2e-test-utils": "^0.1.1",
     "@backstage/repo-tools": "^0.16.2",
     "@changesets/cli": "^2.27.1",
+    "@playwright/test": "1.60.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.0.0",
     "@types/webpack-env": "^1.18.4",

workspaces/dcm/packages/app/e2e-tests/app.test.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from '@playwright/test';
+
+test('App should render the welcome page', async ({ page }) => {
+  await page.goto('/');
+
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
+  const nav = page.getByRole('navigation');
+  await expect(nav.getByRole('link', { name: 'APIs' })).toBeVisible();
+  await expect(nav.getByRole('link', { name: 'Docs' })).toBeVisible();
+});

workspaces/dcm/packages/app/e2e-tests/dcm-catalog-items.test.ts

@@ -0,0 +1,259 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from '@playwright/test';
+import { DcmPage } from './pages/DcmPage';
+import { suffix } from './utils/helpers';
+import { TIMEOUTS } from './utils/constants';
+import * as path from 'node:path';
+
+test.describe('DCM Catalog Items & Instances @dcm', () => {
+  let dcm: DcmPage;
+
+  test.beforeEach(async ({ page }) => {
+    dcm = new DcmPage(page);
+    await dcm.loginAsGuest();
+    await dcm.navigateToDataCenter();
+  });
+
+  // ── Catalog Items ─────────────────────────────────────────────────────
+
+  test('FLPATH-4200: Catalog items tab shows Pet Clinic with correct columns', async () => {
+    await dcm.clickTab('Catalog items');
+    await dcm.verifyTableVisible();
+
+    await dcm.verifyColumnHeader('Display name');
+    await dcm.verifyColumnHeader('API version');
+    await dcm.verifyColumnHeader('Service type');
+    await dcm.verifyColumnHeader('Fields');
+    await dcm.verifyColumnHeader('Created');
+
+    await dcm.verifyCellContent('Pet Clinic');
+    await dcm.verifyCellContent('three-tier-app-demo');
+  });
+
+  test('FLPATH-4200: Pet Clinic has Edit and Delete actions', async () => {
+    await dcm.clickTab('Catalog items');
+    await dcm.verifyTableVisible();
+
+    const row = dcm.page.locator('table tbody tr', { hasText: 'Pet Clinic' });
+    await expect(row.getByRole('button', { name: 'Edit' })).toBeVisible();
+    await expect(row.getByRole('button', { name: 'Delete' })).toBeVisible();
+  });
+
+  test('FLPATH-4200: Create and delete a catalog item via drawer', async ({
+    page,
+  }) => {
+    const name = `E2E Item ${suffix()}`;
+    await dcm.clickTab('Catalog items');
+    await dcm.clickCreateCatalogItem();
+
+    await dcm.fillCatalogItemForm({
+      displayName: name,
+      apiVersion: 'v1alpha1',
+      serviceType: 'container',
+    });
+
+    const pathField = page.locator('label:has-text("Path *") + div input');
+    if ((await pathField.count()) > 0) {
+      await pathField.first().click();
+      await pathField.first().fill('config.replicas');
+    } else {
+      const altPath = page.getByLabel('Path *');
+      await altPath.click();
+      await altPath.fill('config.replicas');
+    }
+
+    await dcm.submitDialog('Create');
+    await dcm.waitForTableRefresh();
+
+    await dcm.verifyCellContent(name);
+
+    await dcm.clickDeleteOnRow(name);
+    await dcm.confirmDelete();
+    await dcm.waitForDialogClosed();
+    await dcm.waitForTableRefresh();
+    await dcm.verifyNoCellContent(name);
+  });
+
+  test('FLPATH-4200: Edit a catalog item', async () => {
+    await dcm.clickTab('Catalog items');
+
+    await dcm.clickEditOnRow('Pet Clinic');
+    await expect(
+      dcm.page.getByRole('heading', { name: 'Edit catalog item' }),
+    ).toBeVisible({ timeout: TIMEOUTS.short });
+
+    await dcm.cancelDialog();
+  });
+
+  // ── Instances ─────────────────────────────────────────────────────────
+
+  test('FLPATH-4200: Instances tab shows correct columns or empty state', async ({
+    page,
+  }) => {
+    await dcm.clickTab('Instances');
+    const hasTable = await page
+      .locator('table')
+      .first()
+      .isVisible()
+      .catch(() => false);
+
+    if (hasTable) {
+      await dcm.verifyColumnHeader('Display name');
+      await dcm.verifyColumnHeader('Catalog item');
+      await dcm.verifyColumnHeader('Resource ID');
+      await dcm.verifyColumnHeader('API version');
+      await dcm.verifyColumnHeader('Created');
+    }
+
+    await expect(
+      page.getByRole('button', { name: 'Create', exact: true }),
+    ).toBeVisible();
+  });
+
+  test('FLPATH-4200: Create instance dialog opens and form is fillable', async ({
+    page,
+  }) => {
+    await dcm.clickTab('Instances');
+    await dcm.clickCreateInstance();
+
+    await dcm.fillInstanceForm({
+      displayName: `E2E Instance ${suffix()}`,
+      catalogItem: 'Pet Clinic',
+      apiVersion: 'v1alpha1',
+    });
+
+    await expect(page.getByText('Field values')).toBeVisible({
+      timeout: TIMEOUTS.short,
+    });
+
+    await dcm.submitDialog('Create');
+    await page.waitForTimeout(TIMEOUTS.networkSettle);
+
+    const dialogVisible = await page
+      .locator('[role="dialog"]')
+      .isVisible()
+      .catch(() => false);
+
+    if (dialogVisible) {
+      await expect(page.locator('[role="alert"]').first()).toBeVisible({
+        timeout: TIMEOUTS.short,
+      });
+      await dcm.cancelDialog();
+    } else {
+      await dcm.waitForTableRefresh();
+      const hasInstance = await page
+        .getByRole('cell', { name: /E2E Instance/ })
+        .first()
+        .isVisible()
+        .catch(() => false);
+      if (hasInstance) {
+        const row = page.locator('table tbody tr', {
+          hasText: /E2E Instance/,
+        });
+        await row.getByRole('button', { name: 'Delete instance' }).click();
+        await dcm.confirmDelete();
+        await dcm.waitForDialogClosed();
+      }
+    }
+  });
+
+  // ── File Import ──────────────────────────────────────────────────────
+
+  test('FLPATH-4274: Valid YAML file import populates catalog item form', async ({
+    page,
+  }) => {
+    const fixturePath = path.resolve(
+      __dirname,
+      'fixtures/dcm/valid-catalog-item.yaml',
+    );
+    await dcm.clickTab('Catalog items');
+    await dcm.clickCreateCatalogItem();
+
+    await dcm.importCatalogItemFile(fixturePath);
+
+    const displayName = page.locator(
+      'label:has-text("Display name *") + div input',
+    );
+    await expect(displayName.first()).toHaveValue('E2E Import Test Item');
+
+    const apiVersion = page.locator(
+      'label:has-text("API version *") + div input',
+    );
+    await expect(apiVersion.first()).toHaveValue('v1alpha1');
+
+    const pathFields = page.locator('label:has-text("Path *") + div input');
+    await expect(pathFields).toHaveCount(2, { timeout: TIMEOUTS.short });
+    await expect(pathFields.nth(0)).toHaveValue('config.replicas');
+    await expect(pathFields.nth(1)).toHaveValue('config.region');
+
+    await dcm.submitDialog('Create');
+    await dcm.waitForTableRefresh();
+    await dcm.verifyCellContent('E2E Import Test Item');
+
+    await dcm.clickDeleteOnRow('E2E Import Test Item');
+    await dcm.confirmDelete();
+    await dcm.waitForDialogClosed();
+    await dcm.waitForTableRefresh();
+  });
+
+  test.skip('FLPATH-4274: Invalid YAML file import should show error feedback — blocked on FLPATH-4274 fix', async ({
+    page,
+  }) => {
+    const fixturePath = path.resolve(
+      __dirname,
+      'fixtures/dcm/invalid-catalog-item.yaml',
+    );
+    await dcm.clickTab('Catalog items');
+    await dcm.clickCreateCatalogItem();
+
+    const displayNameBefore = await page
+      .locator('label:has-text("Display name *") + div input')
+      .first()
+      .inputValue();
+
+    await dcm.importCatalogItemFile(fixturePath);
+
+    const displayNameAfter = await page
+      .locator('label:has-text("Display name *") + div input')
+      .first()
+      .inputValue();
+    expect(displayNameAfter).toBe(displayNameBefore);
+
+    // FLPATH-4274: Error feedback MUST be shown for invalid files.
+    // This will fail until the fix ships, then pass automatically.
+    const errorFeedback = page
+      .locator('[class*="MuiAlert"]')
+      .first()
+      .or(page.locator('[class*="MuiSnackbar"]').first());
+    await expect(errorFeedback).toBeVisible({ timeout: TIMEOUTS.short });
+
+    await dcm.cancelDialog();
+  });
+
+  // ── Resources ─────────────────────────────────────────────────────────
+
+  test('FLPATH-4200: Resources tab shows content or empty state', async ({
+    page,
+  }) => {
+    await dcm.clickTab('Resources');
+
+    await expect(
+      page.locator('table').first().or(page.getByText('No resources found')),
+    ).toBeVisible({ timeout: TIMEOUTS.table });
+  });
+});