Cypress

Installation

npm i -D cypress

More at Installing Cypress (docs.cypress.io).

Usage

# Use with npx (no installation required)
npx cypress <command> [option]

# Or... use with complete path
./node_modules/.bin/cypress <command> [option]

# Or... use with shortcut
$(npm bin)/cypress <command> [option]

# Or... use with npm scripts
npm run <npm-script> -- [option]

// package.json e.g.:
{
  "scripts": {
    "cy:run": "cypress run [option]",
    "cy:open": "cypress open [option]",
    "cy:info": "cypress info [option]"
  }
}

Commands:

• run (run all tests), options:
  • --auto-cancel-after-failures
  • --headed (show the browser)
  • --headless (hide browser, default)
  • -q, --quiet
  • --parallel
• open (open test runner)
• info (show environment info)

Options (run and open):

• -b, --browser [chrome|chromium|edge|electron|firefox|<browser-path>]
• --component (run component tests)
• -c, --config [config-option]
• -C, --config-file <config-file|false> (cypress.config.json by default)
• --e2e (run e2e tests, default)
• --spec (run a given spec file)
• -h, -help
• -p, --port <number>

More at:

• Command Line (docs.cypress.io).
• cypress run (docs.cypress.io).
• cypress open (docs.cypress.io).

More at TypeScript (docs.cypress.io).

Configuration

Legacy configuration file name is cypress, version 10+ uses cypress.config. Valid configuration file extensions are js|ts|mjs|cjs|json.

// cypress.config.ts e.g.:
import { defineConfig } from 'cypress';

export default defineConfig({
  port: 8080,
  viewportHeight: 1920,
  viewportWidth: 1080,
  waitForAnimations: false,
  e2e: {
    supportFile: 'cypress/support/e2e.{ts,tsx}',
    specPattern: 'cypress/e2e/**/*.cy.{ts,tsx}
  },
  component: {
    devServer: '',
    viewportHeight: 500, // Can override global options
    viewportWidth: 500
  },
  // ...
});

More at:

• Configuration (docs.cypress.io).
• Options (docs.cypress.io).

Using TypeScript

1- If not already, install TypeScript:

npm i -D typescript

2- Setup a TypeScript configuration file inside the cypress folder:

// tsconfig.json e.g.:
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}