[main] fix(ui-tests): upgrade Cypress to 15.6.0 for OCP 4.20+ support (#3931)

* fix(ui-tests): upgrade Cypress to 15.6.0 for OCP 4.20+ support

- Cypress 13.7.0 → 15.6.0 (Electron 27→37, Chromium 118→138)
- Fix PatternFly v6 selectors: OCP 4.19 uses data-test-id, 4.20+ uses data-test
- Add chromeWebSecurity: false for OAuth cross-origin flow
- Update HTTP proxy patch for Cypress 15 dependency structure
- Consolidate reporter config, improve test script argument handling

* fix(ui-tests): delete videos for passing tests

- only keep videos when tests fail, saves artifact storage

* fix(ui-tests): update selectors for OCP 4.19/4.20 PatternFly v6

- external link: .pf-v6-c-clipboard-copy a.pf-m-link
- dropdown: .pf-v6-c-menu button (4.20+), with .pf-m-expanded for 4.19
- add oc version logging
- add semver unit tests (11 tests, ES module support)

---------

Co-authored-by: Chris Suszyński <ksuszyns@redhat.com>

Author: openshift-cherrypick-robot

test/ui-e2e-tests.sh

@@ -21,16 +21,6 @@ function check_node {
   logger.info "NPM version: $(npm --version)"
 }
 
-function archive_cypress_artifacts {
-  mkdir -p "${ARTIFACTS}/ui/screenshots" "${ARTIFACTS}/ui/videos" "${ARTIFACTS}/ui/results"
-  pushd "$(dirname "${BASH_SOURCE[0]}")/ui/cypress" >/dev/null
-  ln -sf "${ARTIFACTS}/ui/screenshots" "${ARTIFACTS}/ui/videos" .
-  popd >/dev/null
-  pushd "$(dirname "${BASH_SOURCE[0]}")/ui" >/dev/null
-  ln -sf "${ARTIFACTS}/ui/results" .
-  popd >/dev/null
-}
-
 function enable_dev_perspective() {
   local ocpversion
   ocpversion="$(oc get clusterversion/version -o jsonpath='{.status.desired.version}')"
@@ -60,25 +50,43 @@ OCP_PASSWORD="${OCP_PASSWORD:-$(echo "$OCP_USERNAME" | sha1sum - | awk '{print $
 OCP_LOGIN_PROVIDER="${OCP_LOGIN_PROVIDER:-my_htpasswd_provider}"
 CYPRESS_BASE_URL="https://$(oc get route console -n openshift-console -o jsonpath='{.status.ingress[].host}')"
 
-# use dev to run test development UI
+# Process arguments
 DEFAULT_NPM_TARGET='test'
-if [ $# -gt 0 ] && [ "$1" = "--dev" ]; then
-  DEFAULT_NPM_TARGET='dev'
-  shift
-fi
+cypress_args=()
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --dev)
+      DEFAULT_NPM_TARGET='dev'
+      shift
+      ;;
+    --no-retries)
+      cypress_args+=("--config" "retries=0")
+      shift
+      ;;
+    *)
+      # Pass through any other argument to cypress
+      cypress_args+=("$1")
+      shift
+      ;;
+  esac
+done
+
 
 if [ -n "${BUILD_ID:-}" ]; then
   export CYPRESS_NUM_TESTS_KEPT_IN_MEMORY=0
 fi
 export OCP_VERSION OCP_USERNAME OCP_PASSWORD OCP_LOGIN_PROVIDER CYPRESS_BASE_URL
 
 add_user "$OCP_USERNAME" "$OCP_PASSWORD"
+
 check_node
+logger.info "OCP version: $OCP_VERSION"
+oc version
 enable_dev_perspective
-archive_cypress_artifacts
 logger.success '🚀 Cluster prepared for testing.'
 
 pushd "$(dirname "${BASH_SOURCE[0]}")/ui" >/dev/null
 npm install
 npm run install
-npm run "${NPM_TARGET:-$DEFAULT_NPM_TARGET}"
+npm run unit
+npm run "${NPM_TARGET:-$DEFAULT_NPM_TARGET}" -- "${cypress_args[@]}"

test/ui/.gitignore

@@ -1,4 +1,2 @@
 node_modules
-cypress/videos
-cypress/screenshots
 results

test/ui/cypress.config.js

@@ -1,17 +1,60 @@
-const {defineConfig} = require('cypress')
+import { defineConfig } from 'cypress'
+import path from 'path'
+import fs from 'fs'
 
-module.exports = defineConfig({
+// Determine base directory for test results
+const artifactsDir = path.join(process.env.ARTIFACTS || 'results', 'ui')
+
+/**
+ * Safely delete a file, ignoring errors if file doesn't exist
+ * @param {string} filePath - Path to file to delete
+ */
+function safeUnlink(filePath) {
+  try {
+    fs.unlinkSync(filePath)
+  } catch (err) {
+    // Ignore errors (file may not exist)
+  }
+}
+
+export default defineConfig({
   defaultCommandTimeout: 60_000,
   reporter: 'cypress-multi-reporters',
   reporterOptions: {
-    configFile: 'reporter-config.json',
+    reporterEnabled: 'spec, mocha-junit-reporter',
+    mochaJunitReporterReporterOptions: {
+      mochaFile: path.join(artifactsDir, 'junit-[hash].xml'),
+    },
   },
   retries: {
     runMode: 2,
     openMode: 0,
   },
+  // Configure artifact directories
+  screenshotsFolder: path.join(artifactsDir, 'screenshots'),
+  videosFolder: path.join(artifactsDir, 'videos'),
   e2e: {
+    // Disable web security to allow cross-origin OAuth flow (console → oauth-openshift → console)
+    chromeWebSecurity: false,
+    video: true,
     setupNodeEvents(on, config) {
+      // Delete videos for specs without failing or retried tests
+      // This saves artifact storage space by only keeping videos of failed tests
+      on('after:spec', (spec, results) => {
+        if (results && results.video) {
+          // Check if any test attempt failed
+          const hasFailures = results.tests.some((test) =>
+            test.attempts.some((attempt) => attempt.state === 'failed')
+          )
+          // Delete video if all tests passed
+          if (!hasFailures) {
+            safeUnlink(results.video)
+            // Also delete compressed video if it exists
+            safeUnlink(results.video.replace('.mp4', '-compressed.mp4'))
+          }
+        }
+      })
+
       config.env.TEST_NAMESPACE = process.env.TEST_NAMESPACE || 'default'
       config.env.OCP_LOGIN_PROVIDER = process.env.OCP_LOGIN_PROVIDER || 'kube:admin'
       config.env.OCP_VERSION = process.env.OCP_VERSION || '0.0.0'

test/ui/cypress/apply-patches.mjs test/ui/cypress/apply-patches.jstest/ui/cypress/apply-patches.mjs renamed to test/ui/cypress/apply-patches.js

@@ -37,7 +37,15 @@ class ShowcaseKservice {
         .should('have.attr', 'value')
         .and('include', 'showcase')
     }
-    let selector = '.co-external-link--block a'
+    
+    // OCP 4.20+ uses ExternalLinkWithCopy inside clipboard-copy component
+    let selector = '.pf-v6-c-clipboard-copy a.pf-m-link'
+    
+    // OCP 4.19 and earlier use co-external-link--block
+    if (environment.ocpVersion().satisfies('<4.20')) {
+      selector = '.co-external-link--block a'
+    }
+    
     return cy.get(selector)
       .last()
       .scrollIntoView()

test/ui/cypress/code/knative/serving/showcase.js

@@ -63,49 +63,64 @@ class OpenshiftConsole {
     const selectors = this.sidebarSelectors()
     cy.get(selectors.drawer)
       .then(($drawer) => {
-        const selector = selectors.drawer +
-          ' button[data-test-id=sidebar-close-button]'
+        const selector = selectors.drawer + selectors.closeButtonSelector
         if (selectors.checkIsOpen($drawer)) {
           cy.log('Closing sidebar')
           cy.get(selector).click()
         }
       })
   }
 
+  /**
+   * Returns CSS selectors for topology sidebar based on OCP version.
+   *
+   * Version Timeline:
+   * - OCP 4.14:      PatternFly v4, old drawer, data-test-id
+   * - OCP 4.15-4.18: PatternFly v5, new drawer, data-test-id
+   * - OCP 4.19.x:    PatternFly v6, new drawer, data-test-id (migration in progress)
+   * - OCP 4.20+:     PatternFly v6, new drawer, data-test (migration complete)
+   *
+   * @returns {{checkIsOpen: function(JQuery<HTMLElement>): boolean, drawer: string, closeButtonSelector: string}}
+   *   Object containing sidebar selectors:
+   *   - checkIsOpen: Function to check if drawer is open
+   *   - drawer: CSS selector for the drawer panel element
+   *   - closeButtonSelector: CSS selector for the close button (appended to drawer selector)
+   */
   sidebarSelectors() {
-    if (environment.ocpVersion().satisfies('<=4.14')) {
+    const version = environment.ocpVersion()
+    
+    // OCP 4.14 and earlier: PatternFly v4
+    if (version.satisfies('<=4.14')) {
       return {
-        /**
-         * @param drawer {JQuery<HTMLElement>}
-         * @returns {boolean}
-         */
-        checkIsOpen: function (drawer) {
-          return drawer.hasClass('pf-m-expanded')
-        },
+        checkIsOpen: (drawer) => drawer.hasClass('pf-m-expanded'),
         drawer: '.odc-topology .pf-c-drawer',
+        closeButtonSelector: ' button[data-test-id=sidebar-close-button]',
       }
     }
-    if (environment.ocpVersion().satisfies('<=4.18')) {
+    
+    // OCP 4.15-4.18: PatternFly v5
+    if (version.satisfies('<=4.18')) {
       return {
-        /**
-         * @param drawer {JQuery<HTMLElement>}
-         * @returns {boolean}
-         */
-        checkIsOpen: function (drawer) {
-          return drawer.find('.pf-topology-resizable-side-bar').length > 0
-        },
+        checkIsOpen: (drawer) => drawer.find('.pf-topology-resizable-side-bar').length > 0,
         drawer: '.pf-v5-c-drawer__panel.ocs-sidebar-index',
+        closeButtonSelector: ' button[data-test-id=sidebar-close-button]',
       }
     }
+    
+    // OCP 4.19.x: PatternFly v6 with old data-test-id attribute
+    if (version.satisfies('<4.20')) {
+      return {
+        checkIsOpen: (drawer) => drawer.find('.pf-topology-resizable-side-bar').length > 0,
+        drawer: '.pf-v6-c-drawer__panel.ocs-sidebar-index',
+        closeButtonSelector: ' button[data-test-id=sidebar-close-button]',
+      }
+    }
+    
+    // OCP 4.20+: PatternFly v6 with new data-test attribute
     return {
-      /**
-       * @param drawer {JQuery<HTMLElement>}
-       * @returns {boolean}
-       */
-      checkIsOpen: function (drawer) {
-        return drawer.find('.pf-topology-resizable-side-bar').length > 0
-      },
+      checkIsOpen: (drawer) => drawer.find('.pf-topology-resizable-side-bar').length > 0,
       drawer: '.pf-v6-c-drawer__panel.ocs-sidebar-index',
+      closeButtonSelector: ' button[data-test=sidebar-close-button]',
     }
   }
 }

test/ui/cypress/code/openshift/openshiftConsole.js

@@ -7,9 +7,7 @@ class SemverResolver {
 
   satisfies(range) {
     const r = new semver.Range(range)
-    const result = r.test(this.version)
-    console.log(`Version '${this.version}' matches range '${range}': ${result}`)
-    return result
+    return r.test(this.version)
   }
 }
 

test/ui/cypress/code/semverResolver.js

@@ -0,0 +1,33 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert'
+import SemverResolver from './semverResolver.js'
+
+describe('SemverResolver', () => {
+  describe('satisfies with <= operator', () => {
+    const testCases = [
+      // Regular versions
+      { version: '4.19.18', range: '<=4.19', expected: true },
+      { version: '4.19.0',  range: '<=4.19', expected: true },
+      { version: '4.20.0',  range: '<=4.19', expected: false },
+      { version: '4.20.4',  range: '<=4.19', expected: false },
+      { version: '4.18.0',  range: '<=4.19', expected: true },
+      { version: '4.14.0',  range: '<=4.19', expected: true },
+      // Pre-release versions
+      { version: '4.19.0-rc',     range: '<=4.19', expected: true },
+      { version: '4.20.0-rc',     range: '<=4.19', expected: false },
+      { version: '4.19.0-alpha2', range: '<=4.19', expected: true },
+      { version: '4.20.0-alpha2', range: '<=4.19', expected: false },
+      { version: '4.21.0-rc',     range: '<=4.19', expected: false },
+    ]
+
+    testCases.forEach(({ version, range, expected }) => {
+      const verb = expected ? 'satisfies' : 'does NOT satisfy'
+      it(`${version} ${verb} ${range}`, () => {
+        assert.strictEqual(
+          new SemverResolver(version).satisfies(range),
+          expected
+        )
+      })
+    })
+  })
+})

test/ui/cypress/code/semverResolver.test.js

@@ -43,7 +43,16 @@ describe('OCP UI for Serverless Serving', () => {
     cy.get('input[name="trafficSplitting.1.tag"]')
       .type('v1')
     cy.contains('Select a Revision', {matchCase: false}).click()
-    let selector = `.pf-v6-c-dropdown.pf-m-expanded .pf-v6-c-menu button`
+    
+    // PatternFly dropdown selectors vary by OCP version:
+    // - OCP 4.20+: PatternFly v6 (without .pf-m-expanded)
+    // - OCP 4.19: PatternFly v6 (requires .pf-m-expanded state class)
+    // - OCP 4.15-4.18: PatternFly v5
+    // - OCP ≤4.14: PatternFly v4
+    let selector = `.pf-v6-c-menu button`
+    if (environment.ocpVersion().satisfies('<=4.19')) {
+      selector = `.pf-v6-c-dropdown.pf-m-expanded .pf-v6-c-menu button`
+    }
     if (environment.ocpVersion().satisfies('<=4.18')) {
       selector = `ul.pf-v5-c-dropdown__menu button`
     }

test/ui/cypress/e2e/serving/multiple-revisions.cy.js

@@ -1,6 +1,6 @@
 # TODO: Workaround for cypress-io/cypress#17288, remove after fixed on upstream.
---- Cypress/resources/app/node_modules/http-proxy-middleware/node_modules/http-proxy/lib/http-proxy/passes/ws-incoming.js
-+++ Cypress/resources/app/node_modules/http-proxy-middleware/node_modules/http-proxy/lib/http-proxy/passes/ws-incoming.js
+--- Cypress/resources/app/node_modules/http-proxy/lib/http-proxy/passes/ws-incoming.js
++++ Cypress/resources/app/node_modules/http-proxy/lib/http-proxy/passes/ws-incoming.js
 @@ -111,7 +111,7 @@ module.exports = {
      proxyReq.on('error', onOutgoingError);
      proxyReq.on('response', function (res) {