Lumina

Manuals / Cypress / Ch 2

A · SetupBeginner50 min read

2. Install, project layout, first green

Cypress · 48 pages source format

Know where config, specs, and support files live. Get one green test before you decorate the suite. Understand the Cypress App and command log.

What you'll learn

  • cypress.config
  • e2e folder
  • Runner time-travel
  • cy.visit / get / type / click / should

Scaffold project

npm init, install cypress, open Cypress App. Default e2e structure appears.

npm init -y
npm install cypress --save-dev
npx cypress open

Do this now

Run npm install cypress --save-dev && npx cypress open. Run the included example spec.

Clear?

Config essentials

cypress.config.js sets baseUrl, viewport, retries, video. Keep config minimal until you need more.

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  e2e: {
    baseUrl: "https://www.saucedemo.com",
    setupNodeEvents(on, config) {},
  },
});

Do this now

Set baseUrl to https://www.saucedemo.com in cypress.config.js.

Clear?

Your first spec

cy.visit, cy.get, cy.type, cy.click, cy.should. Prefer data-cy or getByRole-style queries.

Do this now

Write login.cy.js: visit /, login as standard_user, assert inventory page.

Clear?

Command log superpower

Hover each command in the runner — snapshots show DOM at every step. This is why Cypress debugs faster than many tools.

Do this now

Fail a test on purpose. Step through the log to find where state diverged.

Clear?

Checklist