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