Cypress: Your Automated Sous Chef
summary
Cypress installs via npx cypress open and runs inside Electron or real browsers, integrates with Mocha/Chai, and uses a jQuery-like cy. API so tests wait for DOM events instead of fixed sleeps. The session builds working tests against To‑do MVC and a Hacker News PWA, intercepts APIs with fixtures, verifies rendering of 30 items, produces screenshots and video recordings, outputs JUnit XML for CI, and shows how custom commands like cy.todo_add make tests readable and robust.
AI-written summary · about
chapters (33)
- 0:00Introduction to Cypress
- 1:06Types of frontend tests
- 3:30End-to-end testing tools
- 4:54Cypress vs Selenium
- 9:14Setting up Cypress
- 11:46Exploring Cypress IDE
- 15:03Cypress project structure
- 17:34Running tests in CI
- 18:17Writing first Cypress test
- 20:22Selecting elements in tests
- 21:07Adding a to-do item
- 23:15Marking to-dos complete
- 24:59Creating failing tests
- 27:38Debugging test failures
- 28:41Test reporting in Cypress
- 29:23Page objects and commands
- 31:12Building custom commands
- 33:20Refactoring tests with commands
- 35:29Testing API interactions
- 36:14Mocking API responses
- 38:00Waiting for API calls
- 39:07Hacker News test demo
- 40:11Cypress configuration options
- 41:37Test reporting formats
- 42:18Cross-browser testing
- 43:22Cross-domain testing
- 44:05Image snapshot testing
- 44:48Testing Electron apps
- 45:09Best practices for selectors
- 46:11Best practices for commands
- 46:55Optimizing authentication tests
- 47:36Mocking API data
- 48:18Summary and Q&A
related talks
47mCypress — Charm and Ease
32mGaining Confidence with Cypress Tests
56mCypress: Where Automated Acceptance Testing Isn’t Just for QA Anymore
29mAutomated Testing for the Modern Web
23mGaining Confidence with Cypress Tests
39mGaining Confidence with Cypress Tests
41mCypressIO
23mGaining Confidence with Cypress Tests