Recording E2E Test in React with Cypress & GH Actions.

On my path to learn TDD, and making robust, resilient app I finally learned end to end testing. I added e2e test cases to the React Login Mock app using cypress.io.

I would like to add that cypress provide great developer experience.

This what a recording looks like. In the recording below I am running two test case

• Successful login attempt with valid user credentials.
• Error handling when server responds with an error.

My Workflow

After adding end to end test cases to my project using cypress and developing the app with confidence I wanted to make sure that every code change that is happening in my project is also e2e tested. Thanks to Cypress headless run I was able to e2e test my code for every code push and pull request using Cypress Github Action.

...

- name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          browser: chrome
          headless: true
          record: true
          start: npm start
          wait-on: http://localhost:3000
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

...

Cypress Github Action also let you record your test run and upload it to your cypress dashboard.

Submission Category:

Maintainer Must-Haves, DIY Deployments

Link to Code

You can find the project along with the cypress test cases at

dreamer01 / react-login-mock

A React login mock page with input validation and unit test cases.

Additional Resources / Info

cypress-io / github-action

GitHub Action for running Cypress end-to-end tests

Cypress.io blog post on Github Action