CONSOLE-5235: Migrate basic app Cypress e2e tests to Playwright

frontend/e2e/clients/kubernetes-client.ts

@@ -607,34 +607,6 @@ export default class KubernetesClient {
     });
   }
 
-  async createDeployment(
-    name: string,
-    namespace: string,
-    labels?: Record<string, string>,
-  ): Promise<void> {
-    await this.appsApi.createNamespacedDeployment({
-      namespace,
-      body: {
-        metadata: { name, namespace, labels },
-        spec: {
-          replicas: 1,
-          selector: { matchLabels: { app: name } },
-          template: {
-            metadata: { labels: { app: name } },
-            spec: {
-              containers: [
-                {
-                  name: 'container',
-                  image: 'registry.access.redhat.com/ubi9/ubi-minimal:latest',
-                  command: ['sleep', 'infinity'],
-                },
-              ],
-            },
-          },
-        },
-      },
-    });
-  }
 
   async deletePod(name: string, namespace: string): Promise<void> {
     try {
@@ -645,4 +617,51 @@ export default class KubernetesClient {
       }
     }
   }
+
+  async waitForPodReady(name: string, namespace: string, timeoutMs = 120_000): Promise<boolean> {
+    return pollUntil(
+      async () => {
+        try {
+          const pod = await this.k8sApi.readNamespacedPod({ name, namespace });
+          if (pod?.status?.phase !== 'Running') {
+            return false;
+          }
+          const containers = pod?.status?.containerStatuses;
+          if (!containers || containers.length === 0) {
+            return false;
+          }
+          return containers.every((c) => c.ready === true);
+        } catch {
+          return false;
+        }
+      },
+      timeoutMs,
+      2_000,
+    );
+  }
+
+  async createDeployment(namespace: string, body: Partial<k8s.V1Deployment>): Promise<void> {
+    await this.appsApi.createNamespacedDeployment({ namespace, body: body as k8s.V1Deployment });
+  }
+
+  async waitForDeploymentReady(
+    name: string,
+    namespace: string,
+    timeoutMs = 120_000,
+  ): Promise<boolean> {
+    return pollUntil(
+      async () => {
+        try {
+          const dep = await this.appsApi.readNamespacedDeployment({ name, namespace });
+          const ready = dep?.status?.readyReplicas ?? 0;
+          const desired = dep?.spec?.replicas ?? 1;
+          return ready >= desired;
+        } catch {
+          return false;
+        }
+      },
+      timeoutMs,
+      2_000,
+    );
+  }
 }

frontend/e2e/pages/base-page.ts

@@ -61,6 +61,11 @@ export default abstract class BasePage {
     await this.waitForLoadingComplete();
   }
 
+  protected async retryOnError(): Promise<void> {
+    await this.page.reload({ waitUntil: 'domcontentloaded' });
+    await this.waitForLoadingComplete();
+  }
+
   protected locator(
     selector: string,
     options?: {

frontend/e2e/pages/catalog-page.ts

@@ -0,0 +1,24 @@
+import { type Locator, expect } from '@playwright/test';
+
+import BasePage from './base-page';
+
+export class CatalogPage extends BasePage {
+  private readonly filterInput: Locator = this.page.getByPlaceholder('Filter by keyword');
+
+  async navigateToCatalog(): Promise<void> {
+    await this.goTo('/catalog/all-namespaces');
+    await expect(this.filterInput).toBeVisible({ timeout: 60_000 });
+  }
+
+  async filterByKeyword(keyword: string): Promise<void> {
+    await this.filterInput.fill(keyword);
+  }
+
+  catalogItem(testId: string): Locator {
+    return this.page.getByTestId(testId);
+  }
+
+  catalogItemIcon(testId: string): Locator {
+    return this.catalogItem(testId).locator('img.catalog-tile-pf-icon');
+  }
+}

frontend/e2e/pages/details-page.ts

@@ -1,17 +1,38 @@
-import type { Locator } from '@playwright/test';
+import { type Locator, expect } from '@playwright/test';
 
 import BasePage from './base-page';
 
 export class DetailsPage extends BasePage {
   private readonly pageHeading = this.page.getByTestId('page-heading');
+  private readonly resourceTitle = this.page.getByTestId('resource-title');
+  private readonly skeletonLoader = this.page.getByTestId('skeleton-detail-view');
+  readonly nodeTerminalError: Locator = this.page.getByTestId('node-terminal-error');
+  readonly xtermViewport: Locator = this.page.locator('.xterm-viewport');
+
+  get title(): Locator {
+    return this.resourceTitle;
+  }
 
-  /**
-   * Get the page heading locator
-   */
   getPageHeading(): Locator {
     return this.pageHeading;
   }
 
+  async waitForPageLoad(): Promise<void> {
+    try {
+      // eslint-disable-next-line no-restricted-syntax
+      await this.skeletonLoader.waitFor({ state: 'detached', timeout: 30_000 });
+    } catch {
+      // Skeleton may have already disappeared
+    }
+    await expect(this.resourceTitle.or(this.pageHeading).first()).toBeVisible({
+      timeout: 30_000,
+    });
+  }
+
+  tab(name: string): Locator {
+    return this.page.getByTestId(`horizontal-link-${name}`);
+  }
+
   async clickPageAction(actionName: string): Promise<void> {
     await this.robustClick(this.page.getByTestId('actions-menu-button'));
     await this.robustClick(this.page.getByTestId(actionName));
@@ -21,56 +42,31 @@ export class DetailsPage extends BasePage {
     return this.page.getByTestId(`breadcrumb-link-${index}`);
   }
 
-  /**
-   * Select a specific tab by name
-   */
-  async selectTab(tabName: string): Promise<void> {
-    const tab = this.page.getByTestId(`horizontal-link-${tabName}`);
-    await this.robustClick(tab);
-    await this.waitForLoadingComplete();
+  async selectTab(name: string): Promise<void> {
+    await this.navigateToTab(this.tab(name));
   }
 
-  /**
-   * Click a kebab menu action (assumes menu is already open)
-   */
   async clickKebabAction(actionId: string): Promise<void> {
     await this.robustClick(this.page.getByTestId(actionId));
   }
 
-  /**
-   * Get a resource row link by test ID (e.g., for ClusterOperators or Configuration resources)
-   * Uses data-test attribute (modern selector convention)
-   */
   getResourceRow(resourceId: string): Locator {
-    // Prefer the link with data-test (for Configuration resources)
-    // Fall back to any element with data-test or data-test-action
     const link = this.page.locator(`a[data-test="${resourceId}"]`);
     const fallback = this.page.locator(
       `[data-test="${resourceId}"], [data-test-action="${resourceId}"]`,
     );
-
-    // Return link if it exists, otherwise fallback
     return link.or(fallback).first();
   }
 
-  /**
-   * Click a resource row to navigate to its details
-   */
   async clickResourceRow(resourceId: string): Promise<void> {
     const row = this.getResourceRow(resourceId);
     await this.robustClick(row);
   }
 
-  /**
-   * Get a resource row by test-action attribute (for Configuration resources)
-   */
   getResourceByAction(actionName: string): Locator {
     return this.page.locator(`[data-test-action="${actionName}"]`);
   }
 
-  /**
-   * Click a resource in Configuration tab and open its kebab menu
-   */
   async openResourceKebabMenu(actionName: string): Promise<void> {
     const resourceRow = this.getResourceByAction(actionName);
     const kebabButton = resourceRow.getByTestId('kebab-button');

frontend/e2e/pages/list-page.ts

@@ -1,18 +1,56 @@
-import type { Locator } from '@playwright/test';
+import { type Locator, expect } from '@playwright/test';
 
 import BasePage from './base-page';
 
 export class ListPage extends BasePage {
-  private readonly dataViewTable = this.page.getByTestId('data-view-table');
+  private readonly pageHeading: Locator = this.page.getByTestId('page-heading').locator('h1');
+  private readonly dataViewTable: Locator = this.page.getByTestId('data-view-table');
+  private readonly dataViewCells: Locator = this.page.locator('[data-test^="data-view-cell-"]');
   private readonly nameFilterInput = this.page.getByRole('textbox', { name: 'Filter by name' });
   private readonly dataViewFilters = this.page.locator(
     '[data-ouia-component-id="DataViewFilters"]',
   );
+  private readonly singleFilterGroup: Locator = this.page.locator(
+    '.co-console-data-view-single-filter .pf-v6-c-toolbar__group.pf-m-filter-group',
+  );
   private readonly namespaceDropdown = this.page.getByTestId('namespace-bar-dropdown');
   private readonly resourceRows = this.page.getByTestId('resource-row');
   private readonly nameFilter = this.page.getByTestId('name-filter-input');
   private readonly createButton = this.page.getByTestId('item-create');
 
+  get heading(): Locator {
+    return this.pageHeading;
+  }
+
+  get table(): Locator {
+    return this.dataViewTable;
+  }
+
+  get cells(): Locator {
+    return this.dataViewCells;
+  }
+
+  get filterGroupToggles(): Locator {
+    return this.singleFilterGroup.locator('.pf-v6-c-menu-toggle');
+  }
+
+  cell(resourceName: string, cellName = 'name'): Locator {
+    return this.page.getByTestId(`data-view-cell-${resourceName}-${cellName}`);
+  }
+
+  resourceLink(name: string): Locator {
+    return this.page.getByTestId(name);
+  }
+
+  async waitForRows(): Promise<void> {
+    try {
+      await expect(this.dataViewTable).toBeVisible({ timeout: 15_000 });
+    } catch {
+      await this.retryOnError();
+      await expect(this.dataViewTable).toBeVisible({ timeout: 30_000 });
+    }
+  }
+
   async filterByName(name: string): Promise<void> {
     const filterToggle = this.dataViewFilters.locator('.pf-v6-c-menu-toggle').first();
     await this.robustClick(filterToggle, { timeout: 60_000 });
@@ -109,9 +147,24 @@ export class ListPage extends BasePage {
     }
   }
 
-  async clickFirstLinkInFirstRow(): Promise<void> {
-    const link = this.page.locator('[data-test^="data-view-cell-"]').first().locator('a').first();
-    await this.robustClick(link);
+  async clickFirstRowLink(): Promise<void> {
+    const firstLink = this.dataViewCells.first().locator('a').first();
+    await this.robustClick(firstLink);
+  }
+
+  async clickFirstRowLinkMatching(pattern: RegExp): Promise<void> {
+    const safeFlags = pattern.flags.replace(/[gy]/g, '');
+    const safePattern = new RegExp(pattern.source, safeFlags);
+    const links = this.dataViewCells.locator('a');
+    const count = await links.count();
+    for (let i = 0; i < count; i++) {
+      const text = await links.nth(i).textContent();
+      if (text && safePattern.test(text)) {
+        await this.robustClick(links.nth(i));
+        return;
+      }
+    }
+    throw new Error(`No row link matching ${pattern} found`);
   }
 
   async getFirstCellText(): Promise<string> {

frontend/e2e/pages/logs-page.ts

@@ -0,0 +1,69 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import BasePage from './base-page';
+
+export class LogsPage extends BasePage {
+  readonly lineCount: Locator = this.page.getByTestId('resource-log-no-lines');
+  private readonly optionsToggle: Locator = this.page.getByTestId('resource-log-options-toggle');
+  private readonly showFullLogOption: Locator = this.page.getByTestId('show-full-log');
+  private readonly wrapLinesOption: Locator = this.page.getByTestId('wrap-lines');
+  private readonly wrapCheckbox: Locator = this.wrapLinesOption.locator('input[type="checkbox"]');
+  private readonly containerSelect: Locator = this.page.getByTestId('container-select');
+  private readonly searchInput: Locator = this.page.getByPlaceholder('Search logs');
+  readonly searchMatches: Locator = this.page.locator('.pf-m-match');
+  readonly logText: Locator = this.page.locator('.pf-v6-c-log-viewer__text');
+
+  async waitForLoaded(): Promise<void> {
+    await expect
+      .poll(
+        async () => {
+          if (await this.optionsToggle.isVisible().catch(() => false)) {
+            return true;
+          }
+          const tryAgain = this.page.getByRole('button', { name: 'Try again' });
+          if (await tryAgain.isVisible().catch(() => false)) {
+            await this.page.reload({ waitUntil: 'domcontentloaded' });
+          }
+          return false;
+        },
+        { timeout: 30_000, intervals: [3_000] },
+      )
+      .toBe(true);
+  }
+
+  async toggleOptions(): Promise<void> {
+    await this.robustClick(this.optionsToggle);
+  }
+
+  async clickShowFullLog(): Promise<void> {
+    await this.toggleOptions();
+    await this.robustClick(this.showFullLogOption);
+  }
+
+  async setWrap(enabled: boolean): Promise<void> {
+    await this.toggleOptions();
+    if (enabled) {
+      await this.wrapCheckbox.check();
+    } else {
+      await this.wrapCheckbox.uncheck();
+    }
+    await this.toggleOptions();
+  }
+
+  async isWrapChecked(): Promise<boolean> {
+    await this.toggleOptions();
+    const checked = await this.wrapCheckbox.isChecked();
+    await this.toggleOptions();
+    return checked;
+  }
+
+  async selectContainer(name: string): Promise<void> {
+    await this.robustClick(this.containerSelect);
+    await this.robustClick(this.page.getByTestId(name));
+  }
+
+  async searchLogs(text: string): Promise<void> {
+    await this.searchInput.fill(text);
+  }
+}