Course Overview
This 3-day intensive course is designed for frontend developers who want to master automated testing using industry-leading tools. Participants will learn how to write and organize unit tests with Jest, component and integration tests, and end-to-end (E2E) tests with Cypress and Playwright. By the end, learners will have a complete testing strategy that ensures high-quality code, prevents regressions, and accelerates delivery.
Duration: 3 Days
Format: Instructor-led, hands-on labs, test-driven development (TDD), CI integration, and real-world test cases
Description
Course Outline
? Day 1: Unit & Integration Testing with Jest
Session 1: Introduction to Testing in the Frontend
- Testing pyramid: Unit, Integration, E2E
- Why testing matters in modern JavaScript applications
- TDD vs BDD approaches
Session 2: Getting Started with Jest
- Setting up Jest for JavaScript and React/Angular/Vue
- Writing test cases: matchers, spies, and mocks
- Snapshot testing and testing functions with side effects
Session 3: Testing React/Vue/Angular Components
- Testing component logic and props
- Testing user interactions and events
- Mocking services and hooks
Lab Activities:
- Write unit tests for utility functions and logic
- Build test cases for a frontend component using Jest
- Practice mocking and snapshot testing
? Day 2: End-to-End Testing with Cypress
Session 1: Introduction to Cypress
- How Cypress differs from other testing tools
- Installing Cypress and understanding its architecture
- Writing your first E2E test
Session 2: Writing and Structuring Cypress Tests
- Navigating, interacting, and asserting in Cypress
- Waiting strategies and handling asynchronous behavior
- Organizing tests and test data (fixtures)
Session 3: Advanced Cypress Features
- Network interception and stubbing (cy.intercept)
- Visual regression testing and accessibility plugins
- Running tests in headless mode
Lab Activities:
- Create Cypress E2E tests for a sample login flow
- Stub API responses and simulate error conditions
- Automate a test suite and run headless tests in CI mode
? Day 3: Playwright & End-to-End Testing at Scale
Session 1: Introduction to Playwright
- Comparing Playwright to Cypress and Selenium
- Cross-browser automation setup
- Writing tests across Chromium, Firefox, and WebKit
Session 2: Scenarios and Test Automation with Playwright
- Record/playback feature and CLI usage
- Assertions, locators, and page interactions
- Handling iframes, downloads, and file uploads
Session 3: Test Strategy & CI/CD Integration
- Choosing between Jest, Cypress, and Playwright
- Combining unit and E2E tests in a full test suite
- Running tests in GitHub Actions or other CI tools
Lab Activities:
- Write Playwright tests to automate a user workflow
- Set up browser testing in multiple environments
- Integrate test runs into a CI pipeline
