Setting up Cypress with Github Actions and Heroku Review Apps
I’ve spent this past weekend setting up Cypress tests for a project hosted on Heroku. I used Heroku's preview environments along with Github Actions to quickly set up Cypress to run against PRs in just a few minutes. Let's dive into what it takes to get it set up!
Set Up Heroku Review Apps
First we’ll want to enable review apps on Heroku, fortunately it’s super easy to get started. Heroku’s docs are available here (opens in a new tab).
The most important part is to choose the predictable review app URL (opens in a new tab) option - this makes it easy for your Cypress to know how to connect to your Heroku preview instance. We'll use this later in our Github workflow.
Set up Github Action Workflow
With our Github action workflow, we’re going to use the
Github Action context (opens in a new tab)
to access the current PR number, which will let us specify the review app URL.
So we can specify the review app URL like:
https://cy-heroku-review-pr-${{github.event.pull_request.number }}.herokuapp.com
In this example, I chose cy-heroku-review
as my review app prefix, you'll need
to replace it with the predictable URL pattern you chose earlier in this guide.
Additionally, we’ll be using the
wait-on
npm package (opens in a new tab) to have our
Github runner wait until the URL is available on Heroku before triggering
Cypress. This allows us to have more control on waiting for the review app to be
available than just letting Cypress retry itself (ex. if you want a longer wait
period).
on:
pull_request:
branches: [main]
jobs:
test-heroku:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v2
- run: yarn install
# Here we're waiting for the Heroku preview instance to boot up
- name: Wait for Server
run:
npx wait-on https://cy-heroku-review-pr-${{
github.event.pull_request.number }}.herokuapp.com
# Here we're running the test, specifying the baseUrl via the CLI
- name: Run E2E Tests
run:
yarn test --config baseUrl=https://cy-heroku-review-pr-${{
github.event.pull_request.number }}.herokuapp.com
# Adding the DeploySentinel debugger
# So we can easily debug test failures in case anything goes wrong 😉
env:
CYPRESS_DEPLOYSENTINEL_KEY: ${{ secrets.CYPRESS_DEPLOYSENTINEL_KEY }}
ELECTRON_EXTRA_LAUNCH_ARGS: '--remote-debugging-port=40500'
Run the Test!
With the review app configured, and the Github action workflow in place, you can open a new PR and see the new workflow kick off and run your tests against a Heroku preview instance!
I have a full demo repo available here (opens in a new tab) to check out.
Feel free to message me any thoughts/questions @ mike@deploysentinel.com