Getting started with Cypress

CypressGuide.md

Updated 3rd Sept 2020

1. yarn add cypress -D

2. yarn run cypress open

   2.1 Wait for cypress to completely load and then close it. We're just running this to instantiate the files we need.

3. Follow these steps for TypeScript or basically just follow the below:

   3.1. Basically make sure that tsconfig.json exists in the ./cypress folder with the minimum below:

   {
     "compilerOptions": {
       "target": "es5",
       "lib": ["es5", "dom"],
       "types": ["cypress"]
     },
     "include": [
       "**/*.ts"
     ]
   }
   

   3.2. Then change all files in ./cypress/support/ from *.js to *.ts and things should work.

4. Add these to .gitignore:

   cypress/screenshots/*
   cypress/videos/*
   

5. Add *.spec.ts files in cypress/integration/ folder because Cypress is meant for integration tests and not unit tests.

6. Ensure that there is also an empty .babelrc.js file in /cypress if your root project uses Babel because Cypress will error out after reading your root project's .babelrc.js.

7. To run, run yarn run cypress open again.

8. Environmental variables should be put in cypress.json.

9. Custom commands should be put in ./cypress/support/commands.ts.