skies.dev

Run Cypress Tests against Vercel Preview Deployments

3 min read

We're going to use GitHub Actions to run our Cypress tests against our Vercel deployments.

To follow along, you should be familiar with

  • GitHub Actions
  • Deploying with Vercel
  • Cypress

For greater detail, check out Gleb Bahmutov's article on testing preview Vercel deploys.

Setting up the workflow to run after a successful deployment

We'll start by creating .github/workflows/cypress.yml to define our workflow.

.github/workflows/cypress.yml
name: 'Run Cypress tests'

We'll set up our workflow to listen to deployment events. This will be triggered after Vercel deploys (or fails to deploy) our app.

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [ deployment_status ]

Next, we'll create the workflow job e2e.

We only want to run Cypress tests if Vercel successfully deploys our app, so the workflow steps that follow will be predicated on a successful deployment status.

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [ deployment_status ]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'

Setting up the Cypress GitHub Action

Assuming a successful deployment, the workflow should

  1. set up an Ubuntu environment
  2. checkout our branch
  3. run the Cypress tests

We're using Cypress's first-party GitHub Action to run the tests.

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [ deployment_status ]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Run Cypress
        uses: cypress-io/github-action@v2

Environment variables

We can then set environment variables, such as the base URL, secrets, retries, etc.

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [ deployment_status ]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Run Cypress
        uses: cypress-io/github-action@v2
        env:
          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}
          CYPRESS_SECRET: ${{ secrets.CYPRESS_SECRET }}
          CYPRESS_RETRIES: 1

Uploading Cypress artifacts

Finally, if the Cypress tests fail, the Action should upload the Cypress videos, which can then be downloaded as artifacts.

To avoid using too much storage, we've set retention-days to delete the video artifacts after 1 day.

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [deployment_status]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Run Cypress
        uses: cypress-io/github-action@v2
        env:
          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}
          CYPRESS_SECRET: ${{ secrets.CYPRESS_SECRET }}
          CYPRESS_RETRIES: 1
      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          retention-days: 1
          path: |
            cypress/videos

With this workflow enabled, our Cypress tests will automatically be run against our Vercel deployments. ๐Ÿš€

Final result

.github/workflows/cypress.yml
name: 'Run Cypress tests'
on: [deployment_status]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Run Cypress
        uses: cypress-io/github-action@v2
        env:
          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}
          CYPRESS_SECRET: ${{ secrets.CYPRESS_SECRET }}
          CYPRESS_RETRIES: 1
      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          retention-days: 1
          path: |
            cypress/videos

(clap if you liked the article)

You might also like