Run Cypress Tests against Vercel Preview Deployments
GitHub Actions is a clean way to run Cypress against every successful Vercel deployment. That gives you a real browser check on the exact preview URL your team is about to share.
To follow along, you should already know the basics of:
- GitHub Actions
- Deploying with Vercel
- Cypress
For a deeper walkthrough, see Gleb Bahmutov's article on testing preview Vercel deploys.
Trigger the workflow from deployment events
Start by creating .github/workflows/cypress.yml.
name: 'Run Cypress tests'
Listen for deployment_status events so the workflow runs only when Vercel has
finished a deploy.
name: 'Run Cypress tests'
on: [ deployment_status ]
Next, define an e2e job.
Gate the job on a successful deployment so failed or still-pending deploys do not waste CI minutes.
name: 'Run Cypress tests'
on: [ deployment_status ]
jobs:
e2e:
if: github.event.deployment_status.state == 'success'
Add the Cypress Action
Once the deployment succeeds, the workflow should:
- set up an Ubuntu environment
- checkout our branch
- run the Cypress tests
Use Cypress's first-party GitHub Action to run the browser 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
Configure environment variables
Set Cypress environment variables for the deployment URL, secrets, and retry behavior.
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
Upload artifacts on failure
If the run fails, upload the Cypress videos so you can inspect the failure later. GitHub stores them as artifacts.
Keep retention-days short so the artifacts do not pile up.
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 in place, every successful Vercel deployment gets a Cypress check automatically.
Final workflow
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
