⚙️ Installation

Installation: Cypress is installed via npm and can run in both GUI mode (Test Runner) and CLI mode (headless).

Cypress is installed via npm and can run in both GUI mode (Test Runner) and CLI mode (headless). Installation is a single package install — unlike Java, there's no separate driver download hassle (ChromeDriver, geckodriver); Cypress downloads its own browser binaries bundled with the package.

Step-by-Step Installation (Windows / macOS / Linux)

Creates package.json if your project does not have one yet. Skip this step if it already exists. Expected output: "Wrote to .../package.json".

Installs Cypress as a devDependency and downloads its own browser binary (~300MB). On Linux you may need to add a few system libraries (libgtk2.0-0, libnotify-dev, xvfb) via apt-get; Windows and macOS need no extra dependencies.

On first run, it auto-scaffolds the cypress/ folder structure and opens the interactive Test Runner GUI — here you pick E2E or Component Testing mode and choose a browser. Expected output: the Cypress window opens showing a "Choose a browser" screen.

Runs all tests headlessly (no visible window) right in the terminal — this is the command used in CI/CD pipelines. Expected output: passed/failed test counts and a video/screenshot path printed in the terminal.

Verifies that the Cypress binary installed correctly. Expected output: "✔ Verified Cypress! ... It passed all the verification checks."

Auto-Generated Folder Structure

cypress.config.js (v10+) is the single source of truth for all configuration — the old cypress.json is no longer used. In Java terms, think of it like Maven's pom.xml or pytest.ini: one central file that defines how the framework behaves.

cypress/e2e/login.cy.js — Your First Test File

Micro Lab: Cypress — Writing assertions

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Cypress — Writing assertions

Determine what to assert: visibility / text / CSS / attribute

Installation steps

  1. npm init -y — Creates package.json if your project does not have one yet. Skip this step if it already exists. Expected output: "Wrote to .../package.json".
  2. npm install cypress --save-dev — Installs Cypress as a devDependency and downloads its own browser binary (~300MB). On Linux you may need to add a few system libraries (libgtk2.0-0, libnotify-dev, xvfb) via apt-get; Windows and macOS need no extra dependencies.
  3. npx cypress open — On first run, it auto-scaffolds the cypress/ folder structure and opens the interactive Test Runner GUI — here you pick E2E or Component Testing mode and choose a browser. Expected output: the Cypress window opens showing a "Choose a browser" screen.
  4. npx cypress run — Runs all tests headlessly (no visible window) right in the terminal — this is the command used in CI/CD pipelines. Expected output: passed/failed test counts and a video/screenshot path printed in the terminal.
  5. npx cypress verify — Verifies that the Cypress binary installed correctly. Expected output: "✔ Verified Cypress! ... It passed all the verification checks."