Fabe browser tests

End-to-end browser tests for fab.earth using Cypress.io test runner.

All tests are in folder cypress/integration with the most important settings in cypress.json file. Each time the tests run on CI the screenshots and videos are stored as test artifacts.

Install and use

To run Cypress you need Node and NPM installed and available from your terminal.

Cypress test runner is installed when you run npm install or npm ci.

npm install

To open Cypress in the interactive mode, from the root of the repository run command

npm run e2e

This should open Cypress GUI where you can pick and run a spec (test) file.

The tests run against baseUrl defined in cypress.json file. Typically this will be the dev deploy of the site and you would need userPassword, adminPassword, and maybe other passwords to be able to log in from tests. The simplest way is to pass these values via environment variables starting with CYPRESS_ prefix by using as-a utility. Just create ~/.as-a/.as-a.ini text file and put the environment variables there under a section, like fabe

[fabe]
CYPRESS_userPassword=<password string>
CYPRESS_adminPassword=<admin password string>

(Ask Hayden Hudson or Vincent Morneau if you want the relevant variables for a given environment)

Then, from the terminal run the command

as-a fabe npm run e2e

This will inject environment variables from section fabe when running npm run e2e and the tests will be able to log in.

If you want to run a single test file in headless mode, use --spec argument, for example

npx cypress run \
  --spec cypress/integration/app/app200.p9991.js

JavaScript formatting with Prettier

The JavaScript files are formatted automatically using Prettier. If you use VSCode you can install Prettier VSCode extension to automatically format files on save. For detailed tutorial read How to configure Prettier and VSCode but it should be all set up already.

To reformat all JS files execute

npm run format