test(e2e): use official cypress github action, enable recording

add support for diff host name, store test artifacts

add badge

fix versioning

.github/workflows/e2e-tests.yaml

@@ -1,4 +1,4 @@
-name: End-to-End Testing (Cypress) 🚀
+name: End-to-End Testing (Cypress)  🚀
 
 on:
   push:
@@ -14,43 +14,33 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 30
     strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
       matrix:
         browser: [ chrome, electron ]
         env:
           - name: no-variable
             NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: ""
           - name: with-variable
             NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: "https://rekor.sigstore.dev"
-    env:
-      CYPRESS_baseUrl: ${{ matrix.env.url }}
+        node: [18]
 
     steps:
-      - name: Checkout 🛎
+      - name: Checkout  🛎
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: ${{ matrix.node }}
 
       - name: Install dependencies
         run: npm install
 
-      - name: Build Next.js app
+      - name: Build Next.js App
         run: npm run build
         env:
-          NODE_ENV: ${{ matrix.env.name }}
           NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: ${{ matrix.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN }}
 
-      - name: Start Next.js app
-        run: npm run start &
-        env:
-          NODE_ENV: ${{ matrix.env.name }}
-          NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: ${{ matrix.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN }}
-
-      - name: Wait for Next.js to start
-        run: npx wait-on http://localhost:3000
-
       - name: Install browsers for Cypress
         run: |
           if [[ "${{ matrix.browser }}" == "chrome" ]]; then
@@ -59,19 +49,37 @@ jobs:
             sudo apt-get install -y firefox;
           fi
 
-      - name: Run Cypress tests
-        run: npx cypress run --browser ${{ matrix.browser }}
+      # install npm dependencies, cache them correctly, and run
+      # all Cypress tests
+      - name: Run Cypress E2E Tests on Node v${{ matrix.node }}
+        uses: cypress-io/github-action@v6
+        with:
+          browser: ${{ matrix.browser }}
+          # the entire command will automatically be prefixed with "npm"
+          # and we need the second "npm" to execute "cypress run ..." command line
+          command-prefix: "-H 127.0.0.1 -- npx"
+          parallel: true
+          record: true
+          start: npm start
+          # keep quoted url to be safe against YML parsing surprises
+          wait-on: "http://127.0.0.1:3000"
         env:
-          NODE_ENV: ${{ matrix.env.name }}
           NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: ${{ matrix.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN }}
-          CYPRESS_baseUrl: "http://localhost:3000"
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Upload Electron artifacts 📸
+      - name: Upload Screenshot Artifacts  📸
         uses: actions/upload-artifact@v4
+        # if: failure()
         with:
-          name: electron-artifacts
-          path: |
-            ./artifacts/electron/videos
-            ./artifacts/electron/screenshots
-          if-no-files-found: ignore
-          retention-days: 5
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore # 'warn' or 'error' are also available, defaults to `warn`
+
+      - name: Upload Video Artifacts  🎥
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-videos
+          path: cypress/videos
+          if-no-files-found: ignore # 'warn' or 'error' are also available, defaults to `warn`
+

README.md

@@ -1,4 +1,5 @@
 [![🧪 Unit Tests (Jest) 🧪](https://github.com/securesign/rekor-search-ui/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/securesign/rekor-search-ui/actions/workflows/unit-tests.yaml)
+[![RHTAS Rekor Search UI](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/wdekco&style=flat&logo=cypress)](https://cloud.cypress.io/projects/wdekco/runs)
 [![codecov](https://codecov.io/gh/securesign/rekor-search-ui/graph/badge.svg?token=1QS2BK1PQL)](https://codecov.io/gh/securesign/rekor-search-ui)
 
 This repo contains a simple UI for searching Search the Rekor public transparency log.