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.

The most important part is to choose the predictable review app URL 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 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 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 to check out.

Feel free to message me any thoughts/questions @ [email protected]