PITCHME.md

☀️ Starting new projects

📚 You will learn

• Cypress folder structure
• Writing first test
• Setting up intelligent code completion
• Cypress documentation

+++

Todo: make a new project and add Cypress

Create a new folder

• cd /tmp
• mkdir example
• cd example
• npm init --yes
• npm install -D cypress

+++

How to open Cypress

npx cypress open
$(npm bin)/cypress open
./node_modules/.bin/cypress open

+++

In package.json I usually have

{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  }
}

And I use npm run cy:open

+++

+++

• "cypress.json" - all Cypress settings
• "cypress/integration" - test files (specs)
• "cypress/fixtures" - mock data
• "cypress/plugins" - extending Cypress
• "cypress/support" - shared commands, utilities

Note: This section shows how Cypress scaffolds its files and folders. Then the students can ignore this folder. This is only done once to show the scaffolding.

+++

Look at the scaffolded example test files (specs).

Run specs for topics that look interesting

Hint: you can find latest examples in https://github.com/cypress-io/cypress-example-kitchensink

+++

💡 Pro tip

npx @bahmutov/cly init
# quickly scaffolds Cypress folders

Repo @bahmutov/cly

+++

Cypress example kitchen sink

• repo github.com/cypress-io/cypress-example-kitchensink
• site example.cypress.io

Todo

Look at any particular group of commands, like Querying or Assertions

+++

First spec

Create a new file

• cypress/integration/spec.js

+++

Type into the spec.js

it('loads', () => {
  cy.visit('localhost:3000')
})

+++

• make sure you have started react-todomvc in another terminal with npm run start
• click on "spec.js" in Cypress GUI

+++

Questions

• what does Cypress do?
• what happens when the server is down?
  • stop the application server running in folder react-todomvc
  • reload the tests

+++

Switch browser

+++

/// <reference types="cypress" />
it('loads', () => {
  cy.visit('localhost:3000')
})

• why do we need reference types ... line?

Note: By having "reference" line we tell editors that support it (VSCode, WebStorm) to use TypeScript definitions included in Cypress to provide intelligent code completion. Hovering over any cy command brings helpful tooltips.

+++

IntelliSense

+++

Every Cypress command and every assertion

+++

Using ts-check

/// <reference types="cypress" />
// @ts-check
it('loads', () => {
  cy.visit('localhost:3000')
})

• what happens if you add ts-check line and misspell cy.visit?

Note: The check works really well in VSCode editor. I am not sure how well other editors support Cypress type checks right out of the box.

+++

If we add @ts-check comment, VSCode is complaining about unknown variable cy.

+++

Docs

Your best friend is https://docs.cypress.io/

+++

Find at docs.cypress.io

@ul

• Cypress main features and how it works docs
• core concepts
• command API
  • how many commands are there? @ulend

+++

💡 Pro tip

https://on.cypress.io/<command>

goes right to the documentation for that command.

+++

Find at docs.cypress.io

@ul

• examples
  • recipes
  • tutorial videos
  • example applications
  • blogs
  • FAQ
• Cypress changelog and roadmap @ulend

Note: Students should know where to find information later on. Main resources is the api page https://on.cypress.io/api

+++

@snap[west] @snapend

@snap[east] Bonus: extension vscode-icons @snapend