GITOPS-9682 UI E2E Create App test (#1162)

* GITOPS-9682 UI E2E Create App test

Signed-off-by: Triona Doyle <tekton@example.com>

* address Coderabbit PR review feedback

Signed-off-by: Triona Doyle <tekton@example.com>

* address Coderabbit 'nitpick' feedback

Signed-off-by: Triona Doyle <tekton@example.com>

* address further coderabbit feedback ...

Signed-off-by: Triona Doyle <tekton@example.com>

* update applications page locators for 1.21.0 compatibility

Signed-off-by: Triona Doyle <tekton@example.com>

* address the coderabbit feedback

Signed-off-by: Triona Doyle <tekton@example.com>

* bump Playwright to v1.61.0 to resolve Node.js v22 compatibility errors

Signed-off-by: Triona Doyle <tekton@example.com>

---------

Signed-off-by: Triona Doyle <tekton@example.com>
Co-authored-by: Triona Doyle <tekton@example.com>

Author: trdoyle81

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

@@ -1,4 +1,4 @@
-import { test as setup } from '@playwright/test';
+import { test as setup, expect } from '@playwright/test';
 
 const authFile = '.auth/storageState.json';
 
@@ -13,29 +13,25 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
   console.log(`Navigating to OpenShift Console: ${targetUrl}`);
   await page.goto(targetUrl); 
 
-  //set locators 
+  // Set locators 
   const idpScreenText = page.getByText(/Log in with/i);
   const usernameInput = page.getByLabel(/Username/i)
     .or(page.locator('input[name="username"]'))
     .or(page.getByPlaceholder(/Username/i));
 
-  //wait for the IDP screen OR the Username field to appear
-  try {
-    await Promise.race([
-      idpScreenText.waitFor({ state: 'visible', timeout: 15000 }),
-      usernameInput.waitFor({ state: 'visible', timeout: 15000 })
-    ]);
-  } catch (e) {
-    console.log("Timed out waiting for OpenShift login page to render.");
-  }
+  // Fail loudly if the page is dead so we don't get weird errors later
+  await expect(
+    idpScreenText.or(usernameInput).first(), 
+    "OpenShift login page failed to load. Check cluster health and URL."
+  ).toBeVisible({ timeout: 20000 });
 
   const idpName = process.env.IDP || 'kube:admin'; 
   const user = process.env.CLUSTER_USER || 'kubeadmin';
 
   if (await idpScreenText.isVisible()) {
     console.log(`IDP selection screen detected. Selecting provider: "${idpName}"`);
 
-    // look for the specific IDP 
+    // Look for the specific IDP 
     const idpLink = page.getByRole('link', { name: new RegExp(idpName, 'i') });
 
     await idpLink.waitFor({ state: 'visible', timeout: 5000 });
@@ -44,7 +40,7 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
     console.log("No IDP screen detected (or already selected), proceeding to credentials...");
   }
 
-  // fill in the Credentials
+  // Fill in the credentials
   await usernameInput.waitFor({ state: 'visible', timeout: 10000 });
   await usernameInput.fill(user); 
 
@@ -59,7 +55,9 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
   await passwordInput.fill(process.env.CLUSTER_PASSWORD);
   await page.getByRole('button', { name: /Log in/i }).click();
 
-  //save the auth state
-  await page.waitForLoadState('networkidle');
+  // Save the auth state
+  await expect(page.getByRole('navigation').first()).toBeVisible({ timeout: 15000 });
+  await expect(page).toHaveURL(/(console|k8s|overview|dashboards)/i, { timeout: 15000 });
   await page.context().storageState({ path: authFile });
+
 });

test/ui-e2e/README.md

@@ -1,65 +1,115 @@
-# GitOps Operator - UI End-to-End Tests
 
-This suite validates the OpenShift GitOps Operator UI, focusing on Argo CD and SSO integration.
+# OpenShift GitOps Operator - UI End-to-End Test Suite
 
-##  Prerequisites
-1. **Node.js** (v18+)
-2. **OpenShift CLI (oc)**: Installed and in your PATH.
-3. **Install Dependencies:** Navigate to this directory and install required packages:
-   ```bash
-   cd test/ui-e2e
-   npm install
-   npx playwright install chromium
-   ```
+This directory contains the Playwright-based UI End-to-End (E2E) automation suite for the OpenShift GitOps Operator. It validates core frontend workflows, console integration, Red Hat Single Sign-On (RHSSO) loops, and multi-version Argo CD compatibility across OpenShift clusters.
 
-##  Environment Variables
-You must provide cluster credentials before running tests. You can either `export` these in your terminal (or pipeline), or create a `.env` file in the `test/ui-e2e` directory:
+---
 
-```text
-# .env file example
-CLUSTER_PASSWORD=your_openshift_admin_password
-OC_API_URL=[https://api.cluster.com:6443](https://api.cluster.com:6443)
-CLUSTER_USER=kubeadmin  # (Optional) Defaults to kubeadmin
-IDP=kube:admin          # (Optional) Defaults to kube:admin
-```
+## Prerequisites
 
-##  Execution Commands
+Before running the suite locally, ensure your machine has the following tools installed:
 
-All commands use the `./run-ui-tests.sh` wrapper which handles auth, OpenShift token generation, and URL discovery. **Ensure you are in the `test/ui-e2e` directory.**
+1. **Node.js** (v18 or higher)
+2. **OpenShift CLI (oc)**: Must be configured in your system PATH.
+3. **Browser Binaries**: Playwright requires its own specific browser engines to run tests reproducibly. These are installed automatically when you run the `npx playwright install` setup command.
 
-**Run All Tests (Headless):**
-```bash
-./run-ui-tests.sh --project=chromium 
-```
+### Installation
+
+Navigate to this directory and install the Node modules along with the required Playwright browser binaries:
 
-**Run All Tests (Headed + Trace):**
 ```bash
-./run-ui-tests.sh --project=chromium --headed --reporter=list --trace on
+cd test/ui-e2e
+npm install
+npx playwright install chromium
+
 ```
 
-**Run Single Test (Headed + Trace):**
+---
+
+## Environment Configuration
+
+The test suite requires cluster administrative credentials to discover routes and handle authentication loops. You can configure these either via a local `.env` file or by exporting them directly into your terminal/CI environment pipeline.
+
+### Quick Setup (Local Development)
+
+Generate a local `.env` file in the root of this directory using the following block:
+
 ```bash
-./run-ui-tests.sh tests/login.spec.ts --project=chromium --headed --trace on
+cat <<EOF > .env
+export CLUSTER_USER="kubeadmin"
+export CLUSTER_PASSWORD="<your_cluster_password>"
+export OC_API_URL="<your_cluster_server_url>"
+export IDP="kube:admin" # (Optional) Defaults to kube:admin
+EOF
+
 ```
 
-**View Trace Results:**
+> **Security Warning:** The `.env` file is explicitly ignored by Git. Please don't commit  credentials to the repository.
+
+---
+
+## Execution Commands
+
+All executions are driven via the ./run-ui-tests.sh wrapper script. This wrapper automatically syncs your local oc CLI context to match your .env configuration, performs route discovery for the Console/Argo CD components, and initializes the Playwright runner.
+
+### Standard Test Execution
+
+| 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` |
+
+### Playwright Flags Reference
+
+| Flag | Purpose |
+| --- | --- |
+| `--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. |
+
+### Visual Debugging (Trace Viewer)
+
+If a test fails during execution, Playwright records a full interactive timeline (DOM snapshots, network calls, console logs). 
+
+When a test fails, the terminal output will provide an exact command to view the trace. Copy and paste that specific command:
+
 ```bash
-npx playwright show-trace test-results/**/*/trace.zip
+# Example:
+npx playwright show-trace test-results/create-application-chromium/trace.zip
+
 ```
 
-** Helpful Flags Explained** 
-* `--headed`: Runs tests in a visible browser. Without this, tests run in "headless" mode (invisible background).
-* `--reporter=list`: Changes console output to a clean, line-by-line list so you can see exactly which test is running in real-time.
-* `--trace on`: Captures a full "recording" (DOM snapshots, network, actions) of the test for debugging.
+---
 
-## Architecture 
+## Suite Architecture
 
-**Global Setup:**
-`.auth/setup.ts` logs into the OCP console to generate a reusable session (`storageState.json`). This prevents having to log in repeatedly for every test file.
+```text
+├── .auth/
+│   └── setup.ts          # Orchestrates global OCP authentication & saves storageState.json
+├── src/
+│   └── 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
+├── .env                  # Local runtime environment overrides (Git ignored)
+└── run-ui-tests.sh       # Context-aware orchestrator & URL discovery engine
+
+```
+
+### Core Architecture Patterns
 
-**Spec Isolation:**
-`login.spec.ts` explicitly clears session cookies to force a full SSO UI validation from a fresh state.
+* **Global Authentication Reusability:** The .auth/setup.ts module runs first to execute the login sequence against the OpenShift cluster identity provider. It drops an authenticated session state cookie into storageState.json, allowing subsequent test specs to skip login actions entirely and save execution time.
+* **Isolated SSO Specs:** Explicit UI authentication testing (such as login.spec.ts) bypasses global storage state configurations and clears active browser contexts intentionally to validate raw login screens and provider selections.
+* **Cross-Version UI Abstraction:** Selectors inside the Page Object Models are written to withstand UI layout drift between consecutive OpenShift versions by prioritizing user-facing roles and text-based assertions over brittle CSS class trees.
+
+---
 
 ## Troubleshooting
 
-* **"Invalid login or password" during automated login:** If you are testing against multiple clusters sequentially, your terminal's `oc` CLI might be holding onto a sticky session from an older cluster. Run `oc logout` before running the bash script to force a clean authentication.
+### Symptom: Playwright targets the wrong cluster version
+
+* **Cause:** The wrapper script handles cross-cluster contexts dynamically. If your terminal environment variables don't match your local ~/.kube/config cache, your terminal may fall back to cached sessions.
+* **Resolution:** Ensure you either run `source .env` inside your terminal window to reset active shell contexts, or verify that the variables declared within your .env file match your active target system configuration. 
+

test/ui-e2e/package-lock.json

@@ -8,7 +8,7 @@
   "license": "ISC",
   "description": "",
   "devDependencies": {
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.61.0",
     "@types/node": "^25.6.0",
     "dotenv": "^17.4.2"
   }

test/ui-e2e/package.json

@@ -15,15 +15,23 @@ export CLUSTER_USER=${CLUSTER_USER:-"kubeadmin"}
 export IDP=${IDP:-"kube:admin"}
 
 #check auth state first
-echo "Checking cluster authentication..."
-if ! oc whoami > /dev/null 2>&1; then
-    if [ -n "$OC_API_URL" ] && [ -n "$CLUSTER_PASSWORD" ]; then
-        echo "Attempting automated login..."
-        oc login "$OC_API_URL" -u "$CLUSTER_USER" -p "$CLUSTER_PASSWORD" --insecure-skip-tls-verify=true
-    else
-        echo "Error: Not logged in. Missing OC_API_URL or CLUSTER_PASSWORD."
+echo "Syncing CLI context..."
+if [ -n "$OC_API_URL" ] && [ -n "$CLUSTER_PASSWORD" ]; then
+    # If variables exist, FORCE the CLI to match them so there is no cross-cluster confusion
+    echo "Logging into $OC_API_URL..."
+    oc login "$OC_API_URL" -u "$CLUSTER_USER" -p "$CLUSTER_PASSWORD" --insecure-skip-tls-verify=true > /dev/null 2>&1
+    
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to log into the cluster. Please check the credentials in your .env file."
         exit 1
     fi
+elif ! oc whoami > /dev/null 2>&1; then
+    # 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
+    echo "No .env credentials found. Using existing oc CLI session..."
 fi
 
 #find the URLs for console and argocd 

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

@@ -0,0 +1,67 @@
+import { test as base, expect } from '@playwright/test';
+import { LoginPage } from './pages/LoginPage';
+import { ApplicationsPage } from './pages/ApplicationsPage';
+
+//define custom fixture types
+type MyFixtures = {
+  managedApp: string;
+};
+
+export const test = base.extend<MyFixtures>({
+  
+  //login override
+  page: async ({ page }, use) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+    
+    // 1. Grab variables from the environment
+    const user = process.env.CLUSTER_USER || 'kubeadmin';
+    const pass = process.env.CLUSTER_PASSWORD;
+    const idp = process.env.IDP || 'kube:admin';
+
+    // 2. Fail loudly if the password is missing
+    if (!pass) {
+      throw new Error('CLUSTER_PASSWORD environment variable is missing. Cannot authenticate.');
+    }
+
+    // 3. Pass them into the login method
+    await loginPage.loginViaOpenShift(user, pass, idp);
+    
+    await use(page);
+  },
+
+//app setup/teardown
+  managedApp: [ async ({ page }, use) => {
+    const appName = `e2e-app-${Date.now()}`;
+    const appsPage = new ApplicationsPage(page);
+    
+    console.log(`[setup] creating and syncing application: ${appName}`);
+    await appsPage.navigate();
+    await appsPage.createApp(
+      appName, 
+      'https://github.com/redhat-developer/openshift-gitops-getting-started.git', 
+      'app'
+    );
+    await appsPage.syncApplication(appName);
+    await appsPage.verifyStatus(appName);
+
+    //pass the name to the test
+    await use(appName);
+
+    //teardown 
+    console.log(`[teardown] deleting ${appName} via api`);
+    const response = await page.request.delete(`/api/v1/applications/${appName}?cascade=true`, {
+      headers: { 'Content-Type': 'application/json' }
+    });
+    
+    // 4. Update the teardown to only ignore 404s, treating 403s as failures
+    if (response.status() === 404) {
+      return; 
+    } else {
+      expect(response.status()).toBeLessThan(400);
+    }
+  }, { timeout: 120000 } ], 
+});
+
+//export it so spec files can use it
+export { expect };