Run Cypress Tests against Vercel Preview Deployments
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.
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.
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.
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
- set up an Ubuntu environment
- checkout our branch
- run the Cypress tests
We're using Cypress's first-party GitHub Action to run the tests.
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.
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.
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
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
