4 min read
Learn how to host to set up a GitLab pipeline that can test every Vercel deployment using Cypress.
December 20, 2020
In this tutorial, I'm going to be walking you step-by-step through how to set up a simple GitLab pipeline that allows you to run automated tests against every Vercel deployment.
I assume you know what Vercel, Cypress, and GitLab are and how to use them, so I'm going to jump straight into the "How to" details.
First thing's first, we need an auth token for Vercel.
To create a token:
To add our Vercel Token to GitLab, so it can be used by our job runners:
We're going to set these as:
stages:
- deploy
- test
Here's the deploy-to-vercel
job section of our .gitlab-ci.yml
file.
deploy-to-vercel:
stage: deploy
image: node:13.10.1-alpine3.10
script:
- npm i -g vercel
- DEPLOYMENT_URL=$(vercel -t $VERCEL_TOKEN --confirm)
- echo $DEPLOYMENT_URL >vercel_deployment_url.txt
artifacts:
when: on_success
paths:
- vercel_deployment_url.txt
This is pretty straight forward, but I'm going to breakdown what is going on here section by section.
deploy-to-vercel:
stage: deploy
image: node:13.10.1-alpine3.10
This section is where we tie the deploy-to-vercel
job to the deploy
stage and provide a Docker image to run our NodeJS code.
script:
- npm i -g vercel
- DEPLOYMENT_URL=$(vercel -t $VERCEL_TOKEN --confirm)
- echo $DEPLOYMENT_URL >vercel_deployment_url.txt
This section:
vercel
CLIVERCEL_TOKEN
vercel_deployment_url.txt
artifacts:
when: on_success
paths:
- vercel_deployment_url.txt
And finally, this section is where we keep the vercel_deployment_url.txt
file as an artifact when this job succeeds, so we can read it in the next Cypress job.
Here's the cypress_test
job section of our .gitlab-ci.yml
file.
cypress_test:
image: cypress/browsers:node12.16.2-chrome81-ff75
stage: test
script:
- DEPLOYMENT_URL=$(cat vercel_deployment_url.txt)
- npm ci
- $(npm bin)/cypress run --env CYPRESS_BASE_URL=$DEPLOYMENT_URL
artifacts:
when: on_success
paths:
- cypress/screenshots
- cypress/videos
This one is a tad more complicated than the Vercel job, but again, I'm going to break it down by section.
cypress_test:
image: cypress/browsers:node12.16.2-chrome81-ff75
stage: test
This section is where we tie the cypress-test
job to the test
stage and provide a Docker image to run our tests.
script:
- DEPLOYMENT_URL=$(cat vercel_deployment_url.txt)
- npm ci
- $(npm bin)/cypress run --env CYPRESS_BASE_URL=$DEPLOYMENT_URL
This section:
vercel_deployment_url.txt
and stores the deployment URL in a variable called "DEPLOYMENT_URL" artifacts:
when: on_success
paths:
- cypress/screenshots
- cypress/videos
And finally, this section is where we keep Cypress' test screenshots and videos artifacts when this job succeeds, so we can review them, or share them with other stakeholders.
In order for GitLab to run your pipeline, we need to push up the .gitlab-ci.yml
file, but before you do that, ensure that yours looks like this.
stages:
- deploy
- test
deploy-to-vercel:
stage: deploy
image: node:13.10.1-alpine3.10
script:
- npm i -g vercel
- DEPLOYMENT_URL=$(vercel -t $VERCEL_TOKEN --confirm)
- echo $DEPLOYMENT_URL >vercel_deployment_url.txt
artifacts:
when: on_success
paths:
- vercel_deployment_url.txt
cypress_test:
image: cypress/browsers:node12.16.2-chrome81-ff75
stage: test
script:
- DEPLOYMENT_URL=$(cat vercel_deployment_url.txt)
- npm ci
- $(npm bin)/cypress run --env CYPRESS_BASE_URL=$DEPLOYMENT_URL
artifacts:
when: on_success
paths:
- cypress/screenshots
- cypress/videos
If your file looks like this one, feel free to push it up and watch the pipeline succeed!
This website was proudly made with Nuxt, styled with TailwindCSS, and deployed to Vercel.