test: add UI E2E tests for Argo CD Resource Tree and Pod logs

Author: Triona Doyle

test/ui-e2e/.auth/setup.ts

@@ -55,9 +55,20 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
   await passwordInput.fill(process.env.CLUSTER_PASSWORD);
   await page.getByRole('button', { name: /Log in/i }).click();
 
+  // Handle the OpenShift 4.x Welcome Tour modal if it appears
+  try {
+    const skipTourButton = page.getByRole('button', { name: /skip tour/i });
+    // Wait up to 5 seconds for the modal to pop up
+    await skipTourButton.waitFor({ state: 'visible', timeout: 5000 });
+    await skipTourButton.click();
+    console.log('Dismissed the OpenShift Welcome Tour modal.');
+  } catch (error) {
+    // If it doesn't appear within 5 seconds, it's an older cluster or already dismissed.
+    // Safely ignore the error and move on
+  }
+
   // Save the auth state
-  await expect(page.getByRole('navigation').first()).toBeVisible({ timeout: 15000 });
+  await expect(page.getByRole('navigation').first()).toBeVisible({ timeout: 20000 });
   await expect(page).toHaveURL(/(console|k8s|overview|dashboards)/i, { timeout: 15000 });
   await page.context().storageState({ path: authFile });
-
 });

test/ui-e2e/README.md

@@ -56,9 +56,10 @@ All executions are driven via the ./run-ui-tests.sh wrapper script. This wrapper
 
 | Target | Command |
 | --- | --- |
-| **Run All Tests (Headless/CI Mode)** | `./run-ui-tests.sh --project=chromium` |
-| **Run All Tests (Headed + Visual Tracing)** | `./run-ui-tests.sh --project=chromium --headed --trace on` |
-| **Run a Specific Spec File** | `./run-ui-tests.sh tests/create-application.spec.ts --project=chromium --headed --trace on` |
+| **Run All Tests (Local Headless)** | `./run-ui-tests.sh --project=chromium` |
+| **Run All Tests (Local Headed + Trace)** | `./run-ui-tests.sh --project=chromium --headed --trace on` |
+| **Run All Tests (Simulate CI)** | `./run-ui-tests.sh --env=ci --project=chromium` |
+| **Run a Specific Spec File** | `./run-ui-tests.sh tests/resource-tree.spec.ts --project=chromium --headed` |
 
 ### Playwright Flags Reference
 
@@ -67,6 +68,7 @@ All executions are driven via the ./run-ui-tests.sh wrapper script. This wrapper
 | `--headed` | Launches the visible Chromium browser UI. Excellent for local debugging. |
 | `--trace on` | Records a granular execution trace (DOM snapshots, network calls, actions) for visual triage. |
 | `--reporter=list` | Switches stdout to a clean line-by-line format, ideal for monitoring real-time execution steps. |
+| `--env=<ci|pipeline>` | Overrides the local setup to simulate automation. It forces headless execution, performs a clean `npm ci`, and installs required browser binaries dynamically. |
 
 ### Visual Debugging (Trace Viewer)
 
@@ -91,8 +93,9 @@ npx playwright show-trace test-results/create-application-chromium/trace.zip
 │   └── pages/            # Page Object Models (POM) isolating UI selectors from spec logic
 │       └── ApplicationsPage.ts
 ├── tests/                # Test specs organized by feature epic
-│   ├── login.spec.ts
-│   └── create-application.spec.ts
+│   ├── admin-login.spec.ts
+│   ├── create-application.spec.ts
+│   └── resource-tree.spec.ts
 ├── .env                  # Local runtime environment overrides (Git ignored)
 └── run-ui-tests.sh       # Context-aware orchestrator & URL discovery engine
 

test/ui-e2e/run-ui-tests.sh

@@ -1,16 +1,28 @@
 #!/bin/bash
 
+# use arguments to extract --env and keep the rest for Playwright
+ENV="local"
+TEST_ARGS=()
+
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --env=*) ENV="${1#*=}" ;;
+        *) TEST_ARGS+=("$1") ;; # Save all other args (files, --headed, etc.)
+    esac
+    shift
+done
+
 if [ -f .env ]; then
   echo "Loading variables from .env file..."
   set -a  #export all variables
   source .env
-  set +a  # stop automatically exporting
+  set +a  #stop auto export
 fi
 
 #making sure we are in the correct dir
 cd "$(dirname "$0")" || exit 1
 
-# username (might be something different for rosa - can be overwritten with export CLUSTER_USER)
+#username (might be something different for rosa - can be overwritten with export CLUSTER_USER)
 export CLUSTER_USER=${CLUSTER_USER:-"kubeadmin"}
 export IDP=${IDP:-"kube:admin"}
 
@@ -26,11 +38,11 @@ if [ -n "$OC_API_URL" ] && [ -n "$CLUSTER_PASSWORD" ]; then
         exit 1
     fi
 elif ! oc whoami > /dev/null 2>&1; then
-    # If variables don't exist AND we aren't logged in, fail out
+    #if variables don't exist AND we aren't logged in fail out
     echo "Error: Not logged in. Missing OC_API_URL or CLUSTER_PASSWORD."
     exit 1
 else
-    # If variables don't exist but we ARE logged in locally, just use the current session
+    #if variables don't exist but we ARE logged in locally just use the current session
     echo "No .env credentials found. Using existing oc CLI session..."
 fi
 
@@ -53,4 +65,22 @@ rm -f .auth/storageState.json || true
 
 #run Playwright 
 echo " Starting Playwright tests..."
-npx playwright test "$@"
+
+# 2. Execute based on the environment
+if [[ "$ENV" == "ci" ]] || [[ "$ENV" == "pipeline" ]]; then
+    echo "Running headlessly in automation ($ENV)..."
+    npm ci
+    
+    # Prevent sudo jump-scares for local Mac users simulating CI
+    if [[ "$(uname -s)" == "Darwin" ]]; then
+        npx playwright install chromium
+    else
+        npx playwright install chromium --with-deps
+    fi
+    
+    npx playwright test "${TEST_ARGS[@]}" --reporter=list
+    
+else
+    echo "Running Locally..."
+    npx playwright test "${TEST_ARGS[@]}"
+fi

test/ui-e2e/src/pages/ApplicationDetailsPage.ts

@@ -0,0 +1,64 @@
+import { Page, expect, Locator } from '@playwright/test';
+
+export class ApplicationDetailsPage {
+  readonly page: Page;
+  readonly resourceTreeContainer: Locator;
+  readonly slideOutPanel: Locator;
+  readonly logsTab: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    
+    //main container
+    this.resourceTreeContainer = page.locator('.application-details__tree');
+    
+    //details panel that slides out (isolate the active visible pane)
+    this.slideOutPanel = page.locator('.sliding-panel').filter({ visible: true });
+
+    //logs tab inside the slide-out panel
+    this.logsTab = this.slideOutPanel.getByRole('button', { name: /logs/i }).or(this.slideOutPanel.getByText(/logs/i, { exact: true }));
+  }
+
+  async verifyResourceTreeLoaded() {
+    //wait tree to be visible
+    await expect(this.resourceTreeContainer).toBeVisible({ timeout: 20000 });
+    //wait for healthy status
+    await expect(this.page.getByText('Healthy', { exact: true }).first()).toBeVisible({ timeout: 30000 });
+  }
+
+  async clickResourceNode(kind: string, name: string) {
+    //find the innermost div representing the resource node
+    const node = this.resourceTreeContainer
+      .locator('div')
+      .filter({ hasText: kind })
+      .filter({ hasText: name })
+      .last();
+
+    //scroll it into view and click it
+    await node.scrollIntoViewIfNeeded();
+    await node.waitFor({ state: 'visible', timeout: 15000 });
+    await node.click();
+
+    //self-healing validation block to handle frontend rendering lag
+    await expect(async () => {
+      await expect(this.slideOutPanel).toBeVisible({ timeout: 2000 });
+    }).toPass({ timeout: 10000 });
+  }
+
+  async verifyPodLogs(expectedLogText?: string) {
+    //click Logs
+    await this.logsTab.waitFor({ state: 'visible', timeout: 5000 });
+    await this.logsTab.click();
+
+    const logFilterInput = this.slideOutPanel.getByPlaceholder('containing');
+    await expect(logFilterInput).toBeVisible({ timeout: 15000 });
+
+    if (expectedLogText) {
+      //find log line anywhere in the slide-out panel
+      await expect(this.slideOutPanel).toContainText(expectedLogText, { timeout: 30000 });
+    } else {
+      const genericLogLine = this.slideOutPanel.getByText(/\d{4}-\d{2}-\d{2}.*(INFO|Started)/).first();
+      await expect(genericLogLine).toBeVisible({ timeout: 30000 });
+    }
+  }
+}

test/ui-e2e/src/pages/ApplicationsPage.ts

@@ -63,8 +63,19 @@ export class ApplicationsPage {
     await locator.press('Enter');
   }
 
-  async createApp(appName: string, repoUrl: string, repoPath: string) {
+async createApp(appName: string, repoUrl: string, repoPath: string) {
     await this.newAppButton.click();
+    
+    //handle the "failed to load data" banner if it appears inside the slide-out panel
+    const errorBanner = this.page.getByText('try again');
+    try {
+      //wait 3 secs
+      await errorBanner.waitFor({ state: 'visible', timeout: 3000 });
+      await errorBanner.click(); 
+    } catch (error) {
+      //banner didn't appear so just continue
+    }
+
     await this.page.getByText('Loading...').first().waitFor({ state: 'hidden', timeout: 15000 });
 
     await this.appNameInput.fill(appName);
@@ -82,31 +93,33 @@ export class ApplicationsPage {
     await this.createButton.click();
   }
 
-async syncApplication(appName: string, expectedResource: string = 'spring-petclinic') {
+  async syncApplication(appName: string, expectedResource: string = 'spring-petclinic') {
     //search for app
     await this.page.getByPlaceholder(/Search applications/i).fill(appName);
 
     const appContainer = this.page.locator('.white-box, .argo-table-list__row').filter({ hasText: appName });
     await appContainer.waitFor({ state: 'visible', timeout: 20000 });
+    await expect(appContainer.getByText(/OutOfSync|Out of Sync/i).first()).toBeVisible({ timeout: 45000 });
+    //safe to open the panel
     await appContainer.getByText('Sync', { exact: true }).click();
 
-    //slideout panel 
-    // Wait for the manifests to fetch from Git and render on the panel
-    await expect(this.page.getByText(expectedResource).first()).toBeVisible({ timeout: 15000 });
-
-    //click 'all' to ensure all resource checkboxes are ticked across all Argo CD versions
+    //click 'all' 
     const allLink = this.page.getByRole('link', { name: 'all', exact: true });
     try {
-      await allLink.waitFor({ state: 'visible', timeout: 3000 });
+      await allLink.waitFor({ state: 'visible', timeout: 5000 });
       await allLink.click();
     } catch (error) {
-      //all link didn't appear within 3 sec
+      // all link didn't appear within 5 sec
     }
+
+    //wait for the manifests to render on the panel
+    await expect(this.page.getByText(expectedResource).first()).toBeVisible({ timeout: 30000 });
+
     //click the main sync button
     await this.page.getByRole('button', { name: /^synchronize$/i }).first().click();
 
-    //wait for the panel to  close 
-    await expect(this.page.getByText('SYNCHRONIZE RESOURCES')).toBeHidden({ timeout: 10000 });
+    //wait for the panel to close 
+    await expect(this.page.getByText('SYNCHRONIZE RESOURCES')).toBeHidden({ timeout: 15000 });
   }
 
   async verifyStatus(appName: string) {
@@ -118,4 +131,20 @@ async syncApplication(appName: string, expectedResource: string = 'spring-petcli
     await expect(appContainer.getByText(/synced/i)).toBeVisible({ timeout: 90000 });
     await expect(appContainer.getByText(/healthy/i)).toBeVisible({ timeout: 90000 });
   }
+
+  async openApplication(appName: string) {
+    //re-apply search filter just in case the UI refreshed
+    await this.page.getByPlaceholder(/Search applications/i).fill(appName);
+    
+    //find the container, then specifically click the link of the app name
+    const appLink = this.page.locator('.white-box, .argo-table-list__row')
+                             .filter({ hasText: appName })
+                             .getByRole('link', { name: appName });
+                             
+    await appLink.waitFor({ state: 'visible', timeout: 15000 });
+    await appLink.click();
+    
+    //wait for the URL to change to the details page to ensure the click worked
+    await expect(this.page).toHaveURL(/.*\/applications\/.*\/.*/, { timeout: 15000 });
+  }
 }

test/ui-e2e/src/pages/LoginPage.ts

@@ -37,9 +37,10 @@ export class LoginPage {
     }
 
     //check if manual login is actually required
-    const usernameInput = this.page.getByLabel(/Username/i)
+    const usernameInput = this.page.getByRole('textbox', { name: /Username/i })
                                    .or(this.page.locator('input[name="username"]'))
-                                   .or(this.page.getByPlaceholder(/Username/i));
+                                   .or(this.page.getByPlaceholder(/Username/i))
+                                   .first();
 
     const needsLogin = await usernameInput.waitFor({ state: 'visible', timeout: 5000 }).then(() => true).catch(() => false);
 

test/ui-e2e/tests/admin-login.spec.ts

@@ -11,7 +11,7 @@ test('Log into Argo CD as local admin', async ({ browser }) => {
       { timeout: 15000, stdio: 'pipe' }
     ).toString();
   } catch (error) {
-    throw new Error("Failed to extract admin password. Please check your cluster connection and oc CLI.");
+    throw new Error("Failed to extract admin password. Please check your cluster connection and oc CLI.", { cause: error });
   }
 
   //get credentials
@@ -27,7 +27,7 @@ test('Log into Argo CD as local admin', async ({ browser }) => {
       { timeout: 15000, stdio: 'pipe' }
     ).toString().trim();
   } catch (error) {
-    throw new Error("Failed to fetch Argo CD route. Please check your cluster connection and oc CLI.");
+    throw new Error("Failed to fetch Argo CD route. Please check your cluster connection and oc CLI.", { cause: error });
   }
 
   //Fresh context to avoid any cached state issues

test/ui-e2e/tests/resource-tree.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '../src/fixtures'; 
+import { ApplicationDetailsPage } from '../src/pages/ApplicationDetailsPage';
+import { ApplicationsPage } from '../src/pages/ApplicationsPage';
+
+test.describe('Argo CD Resource Tree and Pod Logs', () => {
+
+  test.use({ storageState: '.auth/storageState.json' });
+
+  test('Navigate to app details, open a Pod, and verify logs stream', async ({ page, managedApp }) => {
+    test.setTimeout(120000); 
+
+    const appsPage = new ApplicationsPage(page);
+    const detailsPage = new ApplicationDetailsPage(page);
+    
+    await appsPage.navigate();
+    await page.getByPlaceholder(/Search applications/i).fill(managedApp);
+    
+    //click the Application Name text/link
+    const appCard = page.locator('.white-box, .argo-table-list__row').filter({ hasText: managedApp });
+    await appCard.getByText(managedApp, { exact: true }).first().click();
+
+    //on details page
+    await detailsPage.verifyResourceTreeLoaded();
+    //Deployment node 
+    await detailsPage.clickResourceNode('deploy', 'spring-petclinic');
+    await detailsPage.verifyPodLogs();
+  });
+
+});