Use GitHub Pull Request Title To Name Cypress Dashboard Run

If you have a project and run Cypress tests on GitHub pull requests, you might use a workflow like this:

.github/workflows/ci.yml

name: PR tests
on: pull_request
jobs:
  e2e:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      # Install npm dependencies, cache them correctly
      # and run all Cypress tests
      # https://github.com/cypress-io/github-action
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          record: true
        env:
          # pass the Cypress Cloud record key as an environment variable
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

This works great. You can see an example pull request running through end-to-end tests.

The test run was record on Cypress Dashboard Cloud. We can see the URL in the terminal output

🎁 You can find the source code for this blog post in the repo bahmutov/cypress-pull-request-title.

There is only one small problem. Cypress names the recording for pull requests like "Merge SHA1 into SHA2", which does not look good.

Let's change our workflow to use the pull request title instead.

- name: Cypress run
  uses: cypress-io/github-action@v5
  with:
    record: true
  env:
    # pass the Cypress Cloud record key as an environment variable
    CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
    # set custom commit message based on PR title
    COMMIT_INFO_MESSAGE: Tests for PR ${{ github.event.number }} "${{ github.event.pull_request.title }}"

We are using custom environment variable COMMIT_INFO_MESSAGE to pass a custom "commit" title. You can use other environment variables to pass information to Cypress, see my work at cypress-io/commit-info.

Here is how it looks on the Dashboard. Nice and clear.

Tip: for more about GitHub Actions and contexts like "github.event", read my blog post Trying GitHub Actions.

Cypress Cloud status checks

Unfortunately, there is one more thing we have to do before the new pull request titles work correctly. If you use Cypress Cloud GitHub integration, it posts status checks and a pull request comment on the pull request. If you do not set a custom COMMIT_INFO_MESSAGE, then you see these status checks.

If you do set COMMIT_INFO_MESSAGE, then there are NO status checks and NO pull request comment. I think Cypress is confused about the commit the tests are running for. Let's debug the @cypress/commit-info module and see what it collects. Let's run the code with:

env:
  # pass the Cypress Cloud record key as an environment variable
  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
  # set custom commit message based on PR title
  COMMIT_INFO_MESSAGE: Tests for PR ${{ github.event.number }} "${{ github.event.pull_request.title }}"
  # debug commit info information
  DEBUG: commit-info

If you set a commit message, then the other properties become empty. Is this a problem?

I tried passing the SHA, but it seems Cypress Dashboard grabs the pull request by parsing the message text in the format "Merge HEADSHA into BASESHA", otherwise it "loses" Git pull request information. I even tried adding the same info at the end of the message

COMMIT_INFO_MESSAGE: Tests for PR ${{ github.event.number }} "${{ github.event.pull_request.title }}" Merge ${{ github.event.pull_request.head.sha }} into ${{ github.event.pull_request.base.sha }}

No luck, the regular expression used to parse the commit message is too strict! Only the exact message works:

COMMIT_INFO_MESSAGE: Merge ${{ github.event.pull_request.head.sha }} into ${{ github.event.pull_request.base.sha }}
COMMIT_INFO_SHA: ${{ github.sha }}

Sad. I opened an issue

Solved

On the advice of the Cypress team, I passed the branch head commit SHA.

# set custom commit message based on PR title
COMMIT_INFO_MESSAGE: Tests for PR ${{ github.event.number }} "${{ github.event.pull_request.title }}"
# pass the HEAD SHA to let Cypress Dashboard correctly set the status checks
# https://github.com/cypress-io/cypress/issues/26917
COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}

Now I see the right title and GitHub status checks

Excellent!