Cypress – Modern Frontend Testing

Module 1: Introduction to Cypress

• Cypress architecture: in-browser execution vs Selenium
• Installing Cypress: npm, project setup, folder structure
• Cypress Test Runner: interactive and headless modes
• First test: describe, it, cy commands
• Dashboard overview and cloud recording
• Cypress vs Selenium vs Playwright: choosing the right tool

Module 2: Core Commands

• cy.visit, cy.get, cy.contains, cy.find, cy.first, cy.last
• Selectors: data-cy attributes, CSS, text-based
• Interactions: cy.click, cy.type, cy.clear, cy.check, cy.select
• Assertions: should and expect with Chai
• Automatic retry and default waiting behaviour
• Querying: within, filter, not

Module 3: Network & Advanced Interactions

• cy.intercept: stubbing and spying on network requests
• Waiting for XHR with cy.wait and aliases
• File upload testing with Cypress plugins
• Drag-and-drop with cy.trigger
• Complex UI components: date pickers, rich text editors
• Iframe handling workarounds

Module 4: Configuration & Environment

• cypress.config.js: baseUrl, timeouts, viewport
• Environment variables and multi-environment configs
• Custom commands: reusable cy.login utilities
• TypeScript support for type-safe tests
• Plugins: cypress-real-events, cypress-axe
• Test isolation: resetting state between tests

Module 5: Best Practices & Organisation

• Page Object Model adapted for Cypress
• App actions pattern: setting state via app code
• Fixtures: external test data files
• beforeEach/afterEach hooks
• Avoiding flaky tests: deterministic automation
• Cypress official best practices

Module 6: Component Testing

• Cypress Component Testing: React, Vue, Angular
• Mounting components with cy.mount
• Props and event testing in isolation
• Percy visual regression integration
• Component vs E2E testing strategy
• Migrating from Jest/RTL to Cypress component tests

Module 7: API Testing with Cypress

• cy.request for HTTP API testing
• Authentication flows and token management
• Combining API setup with UI scenarios
• Schema validation for API responses
• Performance assertions with response time checks
• GraphQL API testing with Cypress

Module 8: CI/CD & Scaling

• GitHub Actions and GitLab CI pipelines
• Cypress Dashboard: parallelisation and analytics
• Docker-based Cypress execution
• BrowserStack Automate integration
• Mochawesome and Dashboard reporting
• Complete Cypress test strategy for real applications

Our Cypress instructors are recognised JavaScript testing experts and Cypress community contributors who have helped engineering teams at SaaS companies adopt Cypress as their primary E2E testing framework. They are TypeScript developers who understand React, Vue, and Angular component architecture.