COURSE OUTLINE

Day 1: Unit & Integration Testing with Jest

·      Session 1: Introduction to Testing in the Frontend

o  Testing pyramid: Unit, Integration, E2E

o  Why testing matters in modern JavaScript applications

o  TDD vs BDD approaches

·      Session 2: Getting Started with Jest

o  Setting up Jest for JavaScript and React/Angular/Vue

o  Writing test cases: matchers, spies, and mocks

o  Snapshot testing and testing functions with side effects

·      Session 3: Testing React/Vue/Angular Components

o  Testing component logic and props

o  Testing user interactions and events

o  Mocking services and hooks

·      Lab Activities:

o  Write unit tests for utility functions and logic

o  Build test cases for a frontend component using Jest

o  Practice mocking and snapshot testing

Day 2: End-to-End Testing with Cypress

·      Session 1: Introduction to Cypress

o  How Cypress differs from other testing tools

o  Installing Cypress and understanding its architecture

o  Writing your first E2E test

·      Session 2: Writing and Structuring Cypress Tests

o  Navigating, interacting, and asserting in Cypress

o  Waiting strategies and handling asynchronous behavior

o  Organizing tests and test data (fixtures)

·      Session 3: Advanced Cypress Features

o  Network interception and stubbing (cy.intercept)

o  Visual regression testing and accessibility plugins

o  Running tests in headless mode

·      Lab Activities:

o  Create Cypress E2E tests for a sample login flow

o  Stub API responses and simulate error conditions

o  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

o  Comparing Playwright to Cypress and Selenium

o  Cross-browser automation setup

o  Writing tests across Chromium, Firefox, and WebKit

·      Session 2: Scenarios and Test Automation with Playwright

o  Record/playback feature and CLI usage

o  Assertions, locators, and page interactions

o  Handling iframes, downloads, and file uploads

·      Session 3: Test Strategy & CI/CD Integration

o  Choosing between Jest, Cypress, and Playwright

o  Combining unit and E2E tests in a full test suite

o  Running tests in GitHub Actions or other CI tools

·      Lab Activities:

o  Write Playwright tests to automate a user workflow

o  Set up browser testing in multiple environments

o  Integrate test runs into a CI pipeline