Skip to content

Cypress E2E tests

The CATS project is covered by end-to-end (e2e) testing powered by Cypress

Pre-Requisites

  • Cypress installed (run yarn install for example)
  • Server & database up and running (run script/server for example)

Tip

You can runscript/test-e2e to ensure all pre-requisites are setup and run the tests.

Test Workflow

The database is automatically reset via artisan migrate:fresh --seed --force before each test is ran.

Commands

  • Run script/test-e2e to install pre-requisites and run all tests
  • Or:
  • Run yarn run cypress run to run the Cypress tests directly
  • Run yarn run cypress open to open the Cypress GUI

Environment Variables

Cypress can be configured via environment variables for your local environment:

  • CYPRESS_BASE_URL (optional)

If the server/database is not available at localhost:5080, you will at least need to update the baseURL config in cypress.json - CYPRESS_DOCKER_SSH (optional)

Set SSH config for Docker Containers if the server is running on a different server. (e.g. user@example.com -i ~/.ssh/private-key) - CYPRESS_DOCKER_SSH_PATH (optional)

Root project path to CD if DOCKER_SSH is configured. (e.g. /src/app)

!!! tip

docker-compose.yml with docker container configuration should exist in this path if NO_DOCKER is unset/set false - CYPRESS_NO_DOCKER (optional)

Set to true if app server is not running inside of a docker container

!!! tip

Running artisan migrate:status should return the apps migration status

Example Output

Running yarn run test:cypress will give you output such as:

Spec                                              Tests  Passing  Failing  Pending  Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔  edit_profile.js                          00:19        1        1        -        -        - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔  login_admin.js                           00:17        2        2        -        -        - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
  ✔  All specs passed!                        00:37        3        3        -        -        -

✨  Done in 64.53s.

as well as detailed output per test ran such as:

────────────────────────────────────────────────────────────────────────────────────────────────────

Running:  edit_profile.js                                                                 (1 of 2)

Edit Profile test
✓ Edit User Profile (19798ms)

1 passing (20s)

(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests:        1                                                                                │
│ Passing:      1                                                                                │
│ Failing:      0                                                                                │
│ Pending:      0                                                                                │
│ Skipped:      0                                                                                │
│ Screenshots:  0                                                                                │
│ Video:        true                                                                             │
│ Duration:     19 seconds                                                                       │
│ Spec Ran:     edit_profile.js                                                                  │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

(Video)

-  Started processing:  Compressing to 32 CRF
-  Finished processing: /srv/app/core/cypress/videos/edi    (2 seconds)
                        t_profile.js.mp4

which includes videos of each test within the cypress/videos, and screenshots (if the test fails) within the cypress/screenshots directory.

Notes

admin schedule

New vue route was added in branch for CATS-505 named ‘schedule-ymd’. /schedule/ymd/:year/:month/:day?

year and month are used to set a default-date for the FullCalendar component to set the default date.

adding note

.should(‘be.visible’) may need to be added before click() calls on a more consistent basis to prevent render/timing issues.

Cypress - Best Practices

  • Never use cy.waitFor().
  • Never use cy.contains(), always wait for the container. (A root cy.contains after an action will not wait for anything to happen.)
  • Rarely use cy.log() - that same information should be available in the browser console.
  • Rarely use .then(), except when you’re making an XHR call and want to use the response data.
  • Don’t use .within() or .then() unless you apply retryable asserts for all prerequisites first. ???
  • Add a data-cy attribute to elements missing a targetable class or id to be used with cypress.
  • You can test selectors from snapshots with $('...') in the browser console.
  • Use cy.should() instead of cy.then() - cy.should() will retry, while cy.then() does not.
  • Can use jQuery to accomplish things that Cypress doesn’t do especially within .should() statements, eg: Cypress.$('selector')
  • Use cy.intercept() combined with cy.wait() to properly wait for XHR requests. IE: when clicking a button that should change state that the next step relies on, be sure to wait for the post XHR so it doesn’t get cancelled if the next test navigates to a new page before it finishes.

..

Debugging in VS Code

launch.json includes a Cypress debugger