I have worked with a few different E2E frameworks and most have taken me a little while to get up and running.

Cypress was different, and one of the main reasons for me was being able to query the DOM with jQuery methods. Cypress uses jQuery under the hood and this really makes a JS developer feel at home.

Even just the first two tests I have running against my Vercel builds via GitHub Actions have given me much more confidence in my releases, and the effort to get this up and running was really small for such benefit.

I encourage anybody, especially those working with JS to use this framework for your end-to-end tests - and if you are not adding them at all, start 😉

I don't claim to be an expert in Cypress (yet :) and this post isn't going to go into detail on how to create your tests, but I wanted to share a couple of findings that could be helpful when setting up your environment.

First, Cypress uses Mocha, and this clashed when running my Jest tests.

I followed the set up instructions

npm i cypress

I decided upon and wrote my tests, started my dev environment opened a fresh terminal and executed

npx cypress open

After all my tests were passing, I prepared to get them running on git.

I ran my Jest tests before a push, and got an error:

ReferenceError: cy is not defined

Basically Jest found my Cypress.spec.js file and wanted to run it, but had no idea about Cypress.

 

After some digging around I settled on the solution (there might be a better way please let me know if there is) that was to just tell Jest to ignore any tests found in the the Cypress directory like so:

package.json (you can also use the same setting in a jest.config.js file)

"jest": {
    "testPathIgnorePatterns": [
      "<rootDir>/cypress/"
    ],

Now Jest ignored my specs and all was good.

I was now ready to start running my tests on Github using Github actions, which brings me to my second tip.

This was not that hard due to this excellent post from Gleb Bahmutov which runs you through the whole process.

But what I want to highlight is that if you follow the post through (and not copy and paste directly from the repo provided) the responses you get from the actions at the early stages can be confusing (at least they were for me, as I didn't seem to be getting the same results as stated).

It only seemed to start working for me, and making more sense, once I had gotten to the stage where the reporter actions were applied.

So if you're like me, and you found yourself getting lost a little, the stand out steps to follow, I found were:

The step to protect the matching branches.

Then use the .yml file below (taken from the post) that has reporting actions applied, and you will then get clearer responses from Github.

# ci.yml file
...
- name: Run Cypress 🌲
  uses: cypress-io/github-action@v2
  env:
    CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}

# https://docs.github.com/en/actions/reference/context-and-expression-syntax-for-github-actions#job-status-check-functions
- name: Cypress tests ✅
  if: ${{ success() }}
  # set the merge commit status check
  # using GitHub REST API
  # see https://docs.github.com/en/rest/reference/repos#create-a-commit-status
  run: |
    curl --request POST \
    --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
    --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
    --header 'content-type: application/json' \
    --data '{
      "context": "e2e",
      "state": "success",
      "description": "Cypress tests passed"
    }'

- name: Cypress tests 🚨
  if: ${{ failure() }}
  run: |
    curl --request POST \
    --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
    --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
    --header 'content-type: application/json' \
    --data '{
      "context": "e2e",
      "state": "failure",
      "description": "Cypress tests failed"
    }'