Pathwise

Manuals / Cypress / Chapter 2

A · Setup · beginner · Week 1 · Chapter 2 of 12

Install, project layout, first green

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

Path progress
10%

Step 1 of 4

Scaffold project

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

Scaffold projectDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Scaffold projectdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

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.

Was this step clear?
Chapter learning outcomes
  • cypress.config
  • e2e folder
  • Runner time-travel
  • cy.visit / get / type / click / should

Clear these before you leave

Side quest

Login happy path

Spec: fill credentials → submit → assert URL contains inventory and cart icon visible.