Merge pull request #5925 from mermaid-js/sidv/parallelCypress

chore: Split cypress tests locally

.github/workflows/e2e-timings.yml

@@ -0,0 +1,53 @@
+name: E2E - Generate Timings
+
+on:
+  # run this workflow every night at 3am
+  schedule:
+    - cron: '28 3 * * *'
+  # or when the user triggers it from GitHub Actions page
+  workflow_dispatch:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+
+jobs:
+  timings:
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          node-version-file: '.node-version'
+      - name: Install dependencies
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
+        with:
+          runTests: false
+      - name: Cypress run
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
+        id: cypress
+        with:
+          install: false
+          start: pnpm run dev:coverage
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+          publish-summary: false
+        env:
+          VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
+          SPLIT: 1
+          SPLIT_INDEX: 0
+          SPLIT_FILE: 'cypress/timings.json'
+      - name: Commit changes
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+        with:
+          add: 'cypress/timings.json'
+          author_name: 'github-actions[bot]'
+          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
+          message: 'chore: update E2E timings'

.github/workflows/e2e.yml

@@ -28,7 +28,6 @@ env:
       ) || 
       github.event.before
     }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -80,7 +79,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4]
+        containers: [1, 2, 3, 4, 5]
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
@@ -119,9 +118,6 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         id: cypress
-        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
-        # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -129,16 +125,18 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
-          ARGOS_PARALLEL_TOTAL: 4
-          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
+          ARGOS_PARALLEL: true
+          ARGOS_PARALLEL_TOTAL: ${{ strategy.job-total }}
+          ARGOS_PARALLEL_INDEX: ${{ strategy.job-index }}
+          SPLIT: ${{ strategy.job-total }}
+          SPLIT_INDEX: ${{ strategy.job-index }}
+          SPLIT_FILE: 'cypress/timings.json'
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0

cypress.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
-import coverage from '@cypress/code-coverage/task';
 import eyesPlugin from '@applitools/eyes-cypress';
 import { registerArgosTask } from '@argos-ci/cypress/task';
+import coverage from '@cypress/code-coverage/task';
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import cypressSplit from 'cypress-split';
 
 export default eyesPlugin(
   defineConfig({
@@ -13,6 +14,7 @@ export default eyesPlugin(
       specPattern: 'cypress/integration/**/*.{js,ts}',
       setupNodeEvents(on, config) {
         coverage(on, config);
+        cypressSplit(on, config);
         on('before:browser:launch', (browser, launchOptions) => {
           if (browser.name === 'chrome' && browser.isHeadless) {
             launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');

cypress/timings.json

@@ -0,0 +1,152 @@
+{
+  "durations": [
+    {
+      "spec": "cypress/integration/other/configuration.spec.js",
+      "duration": 4989
+    },
+    {
+      "spec": "cypress/integration/other/external-diagrams.spec.js",
+      "duration": 1382
+    },
+    {
+      "spec": "cypress/integration/other/ghsa.spec.js",
+      "duration": 3178
+    },
+    {
+      "spec": "cypress/integration/other/iife.spec.js",
+      "duration": 1372
+    },
+    {
+      "spec": "cypress/integration/other/interaction.spec.js",
+      "duration": 8998
+    },
+    {
+      "spec": "cypress/integration/other/rerender.spec.js",
+      "duration": 1249
+    },
+    {
+      "spec": "cypress/integration/other/xss.spec.js",
+      "duration": 25664
+    },
+    {
+      "spec": "cypress/integration/rendering/appli.spec.js",
+      "duration": 1928
+    },
+    {
+      "spec": "cypress/integration/rendering/architecture.spec.ts",
+      "duration": 2330
+    },
+    {
+      "spec": "cypress/integration/rendering/block.spec.js",
+      "duration": 11156
+    },
+    {
+      "spec": "cypress/integration/rendering/c4.spec.js",
+      "duration": 3418
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
+      "duration": 14866
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram.spec.js",
+      "duration": 9894
+    },
+    {
+      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
+      "duration": 5778
+    },
+    {
+      "spec": "cypress/integration/rendering/current.spec.js",
+      "duration": 1690
+    },
+    {
+      "spec": "cypress/integration/rendering/erDiagram.spec.js",
+      "duration": 9144
+    },
+    {
+      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
+      "duration": 1951
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
+      "duration": 2196
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
+      "duration": 21029
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
+      "duration": 16087
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
+      "duration": 27465
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart.spec.js",
+      "duration": 20035
+    },
+    {
+      "spec": "cypress/integration/rendering/gantt.spec.js",
+      "duration": 11366
+    },
+    {
+      "spec": "cypress/integration/rendering/gitGraph.spec.js",
+      "duration": 34025
+    },
+    {
+      "spec": "cypress/integration/rendering/iconShape.spec.ts",
+      "duration": 185902
+    },
+    {
+      "spec": "cypress/integration/rendering/imageShape.spec.ts",
+      "duration": 41631
+    },
+    {
+      "spec": "cypress/integration/rendering/info.spec.ts",
+      "duration": 1736
+    },
+    {
+      "spec": "cypress/integration/rendering/journey.spec.js",
+      "duration": 2247
+    },
+    {
+      "spec": "cypress/integration/rendering/katex.spec.js",
+      "duration": 2144
+    },
+    {
+      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
+      "duration": 1646
+    },
+    {
+      "spec": "cypress/integration/rendering/mindmap.spec.ts",
+      "duration": 6406
+    },
+    {
+      "spec": "cypress/integration/rendering/newShapes.spec.ts",
+      "duration": 107219
+    },
+    {
+      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
+      "duration": 15834
+    },
+    {
+      "spec": "cypress/integration/rendering/theme.spec.js",
+      "duration": 33240
+    },
+    {
+      "spec": "cypress/integration/rendering/timeline.spec.ts",
+      "duration": 7122
+    },
+    {
+      "spec": "cypress/integration/rendering/xyChart.spec.js",
+      "duration": 11127
+    },
+    {
+      "spec": "cypress/integration/rendering/zenuml.spec.js",
+      "duration": 2391
+    }
+  ]
+}

package.json

@@ -91,6 +91,7 @@
     "cspell": "^8.6.0",
     "cypress": "^13.14.1",
     "cypress-image-snapshot": "^4.0.1",
+    "cypress-split": "^1.24.0",
     "esbuild": "^0.21.5",
     "eslint": "^9.4.0",
     "eslint-config-prettier": "^9.1.0",