Frontend Testing with Jest, Cypress & Playwright
Software Testing
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.
Program Duration
Duration: 3 days (24 hours)
Format: Classroom-based, Virtual Instructor-Led Training
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
REGISTER NOW
