Skip to content

Instantly share code, notes, and snippets.

@geoyws
Last active September 9, 2020 08:29
Show Gist options
  • Save geoyws/7b50594cc39bc7815a7130d2ff7cfc9b to your computer and use it in GitHub Desktop.
Save geoyws/7b50594cc39bc7815a7130d2ff7cfc9b to your computer and use it in GitHub Desktop.
Getting started with Cypress

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment