Automatically run Cypress once Storybook has been deployed

.github/workflows/deploy-vercel-storybook.yml

@@ -6,9 +6,13 @@
 # Dependencies overview:
 # - See https://github.com/actions/setup-node https://github.com/actions/setup-node/tree/v1
 # - See https://github.com/actions/checkout https://github.com/actions/checkout/tree/v1
+# - See https://github.com/actions/upload-artifact https://github.com/actions/upload-artifact/tree/v1
 # - See https://github.com/rlespinasse/github-slug-action https://github.com/rlespinasse/github-slug-action/tree/3.x
 # - See https://github.com/jwalton/gh-find-current-pr https://github.com/jwalton/gh-find-current-pr/tree/v1
 # - See https://github.com/peter-evans/create-or-update-comment https://github.com/peter-evans/create-or-update-comment/tree/v1
+# - See https://github.com/UnlyEd/github-action-await-vercel https://github.com/UnlyEd/github-action-await-vercel/tree/v1.1.1
+# - See https://github.com/UnlyEd/github-action-store-variable https://github.com/UnlyEd/github-action-store-variable/tree/v1.0.1
+# - See https://github.com/cypress-io/github-action https://github.com/cypress-io/github-action/tree/v2
 
 name: Deploy Storybook static site to Vercel
 
@@ -132,3 +136,85 @@ jobs:
             :white_check_mark:  Deployment **SUCCESS**
             Commit ${{ github.sha }} successfully deployed **Storybook static site** to [${{ env.VERCEL_DEPLOYMENT_URL }}](${{ env.VERCEL_DEPLOYMENT_URL }})
             Deployment aliased as [nrn-v2-mst-aptd-at-lcz-sty-storybook](https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app)
+
+      # At the end of the job, store all variables we will need in the following jobs
+      # The variables will be stored in and retrieved from a GitHub Artifact (each variable is stored in a different file)
+      - name: Store variables for next jobs
+        uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-store-variable
+        with:
+          variables: |
+            VERCEL_DEPLOYMENT_URL=${{ env.VERCEL_DEPLOYMENT_URL }}
+            VERCEL_DEPLOYMENT_DOMAIN=${{ env.VERCEL_DEPLOYMENT_DOMAIN }}
+            GITHUB_PULL_REQUEST_ID=${{ steps.pr_id_finder.outputs.number }}
+
+  # Runs E2E tests against the Vercel deployment
+  run-2e2-tests:
+    name: Run end to end (E2E) tests (Ubuntu 18.04)
+    runs-on: ubuntu-18.04
+    # Docker image with Cypress pre-installed
+    # https://github.com/cypress-io/cypress-docker-images/tree/master/included
+    container: cypress/included:3.8.3
+    needs: await-for-vercel-deployment
+    steps:
+      - uses: actions/checkout@v1 # Get last commit pushed - See https://github.com/actions/checkout
+
+      # Restore variables stored by previous jobs
+      - name: Restore variables
+        uses: UnlyEd/[email protected] # See https://github.com/UnlyEd/github-action-store-variable
+        id: restore-variable
+        with:
+          variables: |
+            VERCEL_DEPLOYMENT_URL
+            GITHUB_PULL_REQUEST_ID
+
+      # Runs the E2E tests against the new Vercel deployment
+      - name: Run E2E tests (Cypress)
+        uses: cypress-io/github-action@v2 # See https://github.com/cypress-io/github-action
+        with:
+          # XXX We disabled "wait-on" option, because it's useless. Cypress will fail anyway, because it gets redirected to some internal Vercel URL if the domain isn't yet available - See https://github.com/cypress-io/github-action/issues/270
+          # wait-on: '${{ env.VERCEL_DEPLOYMENT_URL }}' # Be sure that the endpoint is ready by pinging it before starting tests, using a default timeout of 60 seconds
+          config-file: 'cypress/config-storybook.json' # Use Cypress config file for Storybook, and override it below
+          config: baseUrl=${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }} # Overriding baseUrl provided by config file to test the new deployment
+        env:
+          # Enables Cypress debugging logs, very useful if Cypress crashes, like out-of-memory issues.
+          # DEBUG: "cypress:*" # Enable all logs. See https://docs.cypress.io/guides/references/troubleshooting.html#Print-DEBUG-logs
+          DEBUG: "cypress:server:util:process_profiler" # Enable logs for "memory and CPU usage". See https://docs.cypress.io/guides/references/troubleshooting.html#Log-memory-and-CPU-usage
+
+      # On E2E failure, upload screenshots
+      - name: Upload screenshots artifacts (E2E failure)
+        uses: actions/upload-artifact@v1 # On failure we upload artifacts, https://help.github.com/en/actions/automating-your-workflow-with-github-actions/persisting-workflow-data-using-artifacts
+        if: failure()
+        with:
+          name: screenshots
+          path: cypress/screenshots/
+
+      # On E2E failure, upload videos
+      - name: Upload videos artifacts (E2E failure)
+        uses: actions/upload-artifact@v1 # On failure we upload artifacts, https://help.github.com/en/actions/automating-your-workflow-with-github-actions/persisting-workflow-data-using-artifacts
+        if: failure()
+        with:
+          name: videos
+          path: cypress/videos/
+
+      # On E2E failure, add a comment to the PR with additional information, if there is an open PR for the current branch
+      - name: Comment PR (E2E failure)
+        uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
+        if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}
+          body: |
+            :x:  E2E tests **FAILED** for commit ${{ github.sha }} previously deployed **Storybook static site** at [${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }}](${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }})
+            Download artifacts (screenshots + videos) from [`checks`](https://github.com/UnlyEd/next-right-now/pull/${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}/checks) section
+
+      # On E2E success, add a comment to the PR, if there is an open PR for the current branch
+      - name: Comment PR (E2E success)
+        uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
+        if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && success()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}
+          body: |
+            :white_check_mark:  E2E tests **SUCCESS** for commit ${{ github.sha }} previously deployed **Storybook static site** at [${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }}](${{ fromJson(steps.restore-variable.outputs.variables).VERCEL_DEPLOYMENT_URL }})
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}