Cypress E2E Tests parallelization

.github/workflows/ci.yaml

@@ -357,6 +357,10 @@ jobs:
     name: End to end tests
     needs: [elixir-deps, npm-deps, npm-e2e-deps]
     runs-on: ubuntu-20.04
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1,2,3,4]
     env:
       MIX_ENV: dev
     steps:
@@ -427,6 +431,8 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v6
         env:
+          SPLIT: ${{ strategy.job-total }}
+          SPLIT_INDEX: ${{ strategy.job-index }}
           cypress_video: false
           cypress_db_host: postgres
           cypress_db_port: 5432

.github/workflows/cypress_parallel_poc.yaml

@@ -0,0 +1,210 @@
+name: Cypress Parallelization POC
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize]
+
+
+env:
+  MIX_ENV: test
+  NODE_VERSION: "20"
+  MANTAINERS: '["cdimonaco", "dottorblaster", "janvhs", "nelsonkopliku", "arbulu89","jagabomb","emaksy", "balanza", "gagandeepb"]'
+  RG_TEST_LABEL: regression
+  INTEGRATION_TEST_LABEL: integration
+
+jobs:
+  elixir-deps:
+    name: Elixir ${{ matrix.mix_env }} dependencies
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        include:
+          - mix_env: dev
+          - mix_env: test
+    env:
+      MIX_ENV: ${{ matrix.mix_env }}
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.12.1
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup
+        id: setup-elixir
+        uses: erlef/setup-beam@v1
+        with:
+          version-file: .tool-versions
+          version-type: strict
+        env:
+          ImageOS: ubuntu20
+      - name: Retrieve Cached Dependencies
+        uses: actions/cache@v4
+        id: mix-cache
+        with:
+          path: |
+            deps
+            _build/${{ matrix.mix_env }}
+            priv/plts
+          key: ${{ runner.os }}-${{ steps.setup-elixir.outputs.otp-version }}-${{ steps.setup-elixir.outputs.elixir-version }}-${{ hashFiles('mix.lock') }}
+      - name: Install Dependencies
+        if: steps.mix-cache.outputs.cache-hit != 'true'
+        run: |
+          mkdir -p priv/plts
+          mix local.rebar --force
+          mix local.hex --force
+          mix deps.get
+          mix deps.compile --warnings-as-errors
+          mix dialyzer --plt
+
+  npm-deps:
+    name: Npm dependencies
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.12.1
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Retrieve Cached Dependencies
+        uses: actions/cache@v4
+        id: npm-cache
+        with:
+          path: |
+            assets/node_modules
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-${{ hashFiles('assets/package-lock.json') }}
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install NPM dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: cd assets && npm install
+
+  npm-e2e-deps:
+    name: Npm E2E dependencies
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.12.1
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Retrieve Cached Dependencies
+        uses: actions/cache@v4
+        id: npm-e2e-cache
+        with:
+          path: |
+            test/e2e/node_modules
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-${{ hashFiles('test/e2e/package-lock.json') }}
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install E2E NPM dependencies
+        if: steps.npm-e2e-cache.outputs.cache-hit != 'true'
+        run: cd test/e2e && npm install
+
+  test-e2e:
+    name: End to end tests
+    needs: [elixir-deps, npm-deps, npm-e2e-deps]
+    runs-on: ubuntu-20.04
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1,2,3,4,5,6]
+    env:
+      MIX_ENV: dev
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.12.1
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup
+        id: setup-elixir
+        uses: erlef/setup-beam@v1
+        with:
+          version-file: .tool-versions
+          version-type: strict
+        env:
+          ImageOS: ubuntu20
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Retrieve Cached Dependencies
+        uses: actions/cache@v4
+        id: mix-cache
+        with:
+          path: |
+            deps
+            _build/dev
+            priv/plts
+          key: ${{ runner.os }}-${{ steps.setup-elixir.outputs.otp-version }}-${{ steps.setup-elixir.outputs.elixir-version }}-${{ hashFiles('mix.lock') }}
+      - name: Retrieve NPM Cached Dependencies
+        uses: actions/cache@v4
+        id: npm-cache
+        with:
+          path: |
+            assets/node_modules
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-${{ hashFiles('assets/package-lock.json') }}
+      - name: Retrieve E2E NPM Cached Dependencies
+        uses: actions/cache@v4
+        id: npm-e2e-cache
+        with:
+          path: |
+            test/e2e/node_modules
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-${{ hashFiles('test/e2e/package-lock.json') }}
+      - name: Check Eslint and JS Code Format
+        run: cd test/e2e && npm run lint && npm run format:check
+      - name: "Docker compose dependencies"
+        uses: isbang/compose-action@v2.0.2
+        with:
+          compose-file: "./docker-compose.yaml"
+          down-flags: "--volumes"
+      - name: Mix setup
+        run: mix setup
+      - name: Run trento detached
+        run: mix phx.server &
+      - name: Install photofinish
+        uses: jaxxstorm/action-install-gh-release@v1.14.0
+        with:
+          repo: trento-project/photofinish
+          tag: v1.4.1
+          cache: enable
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Give executable permissions to photofinish
+        run: chmod +x $(whereis photofinish | cut -d" " -f2)
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        env:
+          SPLIT: ${{ strategy.job-total }}
+          SPLIT_INDEX: ${{ strategy.job-index }}
+          cypress_video: false
+          cypress_db_host: postgres
+          cypress_db_port: 5432
+          cypress_photofinish_binary: $(whereis photofinish | cut -d" " -f2)
+        with:
+          working-directory: test/e2e
+          wait-on-timeout: 30
+          config: baseUrl=http://localhost:4000
+      - name: Upload cypress test screenshots
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: e2e-screenshots
+          path: test/e2e/cypress/screenshots/

test/e2e/cypress.config.js

@@ -23,6 +23,7 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return require('./cypress/plugins/index.js')(on, config);
     },
+    video: true,
     testIsolation: false,
     baseUrl: 'http://localhost:4000',
   },

test/e2e/cypress/e2e/databases_overview.cy.js

@@ -3,6 +3,8 @@ import { createUserRequestFactory } from '@lib/test-utils/factories';
 context('Databases Overview', () => {
   before(() => {
     cy.loadScenario('healthy-29-node-SAP-cluster');
+    cy.loadScenario('healthy-29-node-SAP-cluster');
+
     cy.visit('/databases');
     cy.url().should('include', '/databases');
   });
@@ -59,12 +61,24 @@ context('Databases Overview', () => {
     });
 
     it('should not deregister database instances if the SAP system using the database is deregistered', () => {
-      cy.deregisterHost(nwqSystem.ascsInstance.id);
-      cy.contains(
-        'p',
-        `The SAP System ${nwqSystem.sid} has been deregistered.`
-      );
-      cy.get('.table-row-group > div.table-row').should('have.length', 9);
+      const collapsedTableRowsSelector = '.table-row-group > div.table-row';
+      cy.get(collapsedTableRowsSelector).then((collapsedTableRows) => {
+        const amountOfDatabaseInstances = collapsedTableRows.length;
+
+        cy.get(collapsedTableRowsSelector).should(
+          'have.length',
+          amountOfDatabaseInstances
+        );
+        cy.deregisterHost(nwqSystem.ascsInstance.id);
+        cy.contains(
+          'p',
+          `The SAP System ${nwqSystem.sid} has been deregistered.`
+        );
+        cy.get(collapsedTableRowsSelector).should(
+          'have.length',
+          amountOfDatabaseInstances
+        );
+      });
     });
   });
 

test/e2e/cypress/e2e/home.cy.js

@@ -1,5 +1,6 @@
 context('Homepage', () => {
   before(() => {
+    cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.visit('/');
     cy.url().should('include', '/');

test/e2e/cypress/e2e/hosts_overview.cy.js

@@ -11,6 +11,7 @@ const NEXT_PAGE_SELECTOR = '[aria-label="next-page"]';
 
 context('Hosts Overview', () => {
   before(() => {
+    cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.visit('/hosts');
     cy.url().should('include', '/hosts');
@@ -170,11 +171,18 @@ context('Hosts Overview', () => {
       });
 
       it('should show health status of the entire cluster of 29 hosts with partial pagination', () => {
-        cy.get('.tn-health-container .tn-health-passing', {
-          timeout: 15000,
-        }).should('contain', 12);
-        cy.get('.tn-health-container .tn-health-warning').should('contain', 12);
-        cy.get('.tn-health-container .tn-health-critical').should('contain', 5);
+        cy.get(
+          '.tn-health-container .tn-health-passing p[class="font-semibold"]',
+          {
+            timeout: 25000,
+          }
+        ).should('have.text', 12);
+        cy.get(
+          '.tn-health-container .tn-health-warning p[class="font-semibold"]'
+        ).should('have.text', 12);
+        cy.get(
+          '.tn-health-container .tn-health-critical p[class="font-semibold"]'
+        ).should('have.text', 5);
       });
 
       it('should show the correct health on the hosts when the agents are sending the heartbeat', () => {
@@ -271,9 +279,12 @@ context('Hosts Overview', () => {
       });
 
       it('should show health status of the entire cluster of 29 hosts with critical health', () => {
-        cy.get('.tn-health-container .tn-health-critical', {
-          timeout: 15000,
-        }).should('contain', 29);
+        cy.get(
+          '.tn-health-container .tn-health-critical p[class="font-semibold',
+          {
+            timeout: 20000,
+          }
+        ).should('have.text', 29);
       });
 
       it('should show a critical health on the hosts when the agents are not sending the heartbeat', () => {

test/e2e/cypress/e2e/sap_systems_overview.cy.js

@@ -11,6 +11,7 @@ import {
 
 context('SAP Systems Overview', () => {
   before(() => {
+    cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.loadScenario('healthy-29-node-SAP-cluster');
     cy.visit('/sap_systems');
     cy.url().should('include', '/sap_systems');

test/e2e/cypress/plugins/index.js

@@ -17,16 +17,20 @@
  */
 // eslint-disable-next-line no-unused-vars
 
+const cypressSplit = require('cypress-split');
 const http = require('http');
 const webpack = require('@cypress/webpack-preprocessor');
 let heartbeatsIntervals = [];
 
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  cypressSplit(on, config);
   on('task', {
     startAgentHeartbeat(agents) {
       const { web_api_host, web_api_port, heartbeat_interval } = config.env;
+      const sleep = (ms = 0) =>
+        new Promise((resolve) => setTimeout(resolve, ms));
       const heartbeat = (agentId) =>
         http
           .request({
@@ -37,13 +41,15 @@ module.exports = (on, config) => {
           })
           .end();
 
-      agents.forEach((agentId) => {
-        heartbeat(agentId);
-        let interval = setInterval(
-          () => heartbeat(agentId),
-          heartbeat_interval
-        );
-        heartbeatsIntervals.push(interval);
+      sleep(500).then(() => {
+        agents.forEach((agentId) => {
+          heartbeat(agentId);
+          let interval = setInterval(
+            () => heartbeat(agentId),
+            heartbeat_interval
+          );
+          heartbeatsIntervals.push(interval);
+        });
       });
       return null;
     },