Playwright (& Vitest) Vs Cypress - The Epic Showdown

Comprehensive JS/TS Testing with Playwright & Cypresss ; UI, API, component (and Vitest component)

What you'll learn

Fullstack mastery of JS/TS test tools and how they work together locally and in CI; Jest, Pact, Playwright, Cypress, Github Actions

Master of the 3 testing types with Cypress; UI e2e, API e2e, UI component

Master of the 3 testing types with Playwright; UI e2e, API e2e, UI component

Master UI component testing with Vitest

Requirements

Familiarity with Git and npm.

Description

Course Overview:Dive into the ultimate battle of JavaScript/TypeScript testing frameworks with "Playwright (& Vitest) vs Cypress - The Epic Showdown." This comprehensive course takes you on a comparative journey, mirroring the robust testing architectures you've mastered with Cypress by introducing Playwright and Vitest. Whether you're a seasoned tester looking to expand your toolkit or a developer aiming to implement the most efficient testing strategies, this course provides the knowledge and hands-on experience to make informed decisions for your projects.By the end of this course, you'll be proficient in setting up and executing end-to-end (E2E) tests, UI component tests, and API tests using both Cypress and Playwright. Additionally, you'll explore Vitest for UI component testing enabling a triple comparison approach for component testing.What You’ll Learn:Comprehensive Testing with Playwright:Master Playwright for API e2e, UI e2e, and UI component testingImplement UI API and component tests that mirror Cypress functionalities, compare them 1:1Vitest component testing:Conduct triple comparisons between Vitest browser mode, Cypress, and Playwright to identify the best fit for your testing needs.Cypress vs Playwright - Deep Dive:Comparative analysis of Cypress and Playwright functionalities.Hands-on 3 repositories to implement identical test suites in both frameworks.Understand the strengths and limitations of each tool to choose the right one for your projects.Advanced TypeScript Patterns:Utilize advanced TypeScript features to write type-safe tests.CI/CD Integration with GitHub Actions:Set up automated testing workflows that incorporate Cypress, Playwright, and Vitest.Manage and optimize CI pipelines for efficient testing processes.Why Take This Course?In the ever-evolving landscape of web development, having a versatile testing strategy is crucial. "Playwright (& Vitest) vs Cypress - The Epic Showdown" offers one of the most comprehensive explorations of modern testing frameworks available. By utilizing three repositories (one React TS, and 2 Node TS ) and a variety of technologies, you'll gain a holistic understanding of full-stack testing that scales with complex applications.Whether you're aiming to:Expand your testing toolkit beyond Cypress.Implement more efficient and scalable testing architectures.Ensure your applications are robust against breaking changes across deployments.This course is designed to equip you with the skills and knowledge to achieve these goals. Even if you're an expert, you'll find valuable insights and advanced techniques to enhance your testing strategies. Beginners will benefit from step-by-step guidance to set up everything locally and within CI environments.Who This Course Is For:Developers and Testers: Looking to deepen their understanding of full-stack testing frameworks.QA Engineers: Seeking to implement scalable and robust testing architectures.Technical Leads: Aiming to optimize their team's testing workflows and CI/CD integrations.Enthusiasts: Passionate about exploring the latest tools in the testing ecosystem.Prerequisites:Basic familiarity with Git and npm.Fundamental knowledge of JavaScript or TypeScript.Experience with React & Node is beneficial but not mandatory.

Overview

Section 1: Introduction & Playwright setup at Provider repo (Node TS)

Lecture 1 Introduction

Lecture 2 Playwright setup

Lecture 3 Get token

Lecture 4 API request fixture

Lecture 5 Crud helper fixture

Lecture 6 Movie crud spec

Section 2: Testing Eventual Consistency with Playwright

Lecture 7 Movie CRUD with events

Lecture 8 Movie CRUD with events part 2

Section 3: Playwright (API) e2e using source code at Consumer Repo (Node TS)

Lecture 9 Setup PW at Consumer repo

Lecture 10 Movie crud at Consumer repo part 1

Lecture 11 Movie crud at Consumer repo with events

Section 4: Playwright UI e2e (at React-Consumer repo)

Lecture 12 PW setup at React Consumer repo

Lecture 13 E2e test routes with PW

Lecture 14 UI e2e with stubbed network - movie add

Lecture 15 UI e2e with stubbed network - movie edit

Lecture 16 UI e2e with stubbed network - movie delete

Lecture 17 Classic UI e2e with PW - add & delete

Lecture 18 Classic UI e2e with PW - update

Lecture 19 PW fixture type refinements

Section 5: Playwright & Vitest component testing with React

Lecture 20 PW & Vitest setup and 3 simple components tests with each

Lecture 21 PW + Vite tests part 1

Lecture 22 PW + Vite tests part 2

Lecture 23 PW + Vite tests part 3

Lecture 24 PW + Vite tests part 4

Section 6: Addendum: better interceptNetworkCall helper

Lecture 25 Better network file

Lecture 26 change data property to responseJson for clarity

This is the most comprehensive Playwright related course out there implementing non-trivial testsin 3 reppositories, using 3 testing types (UI, API, componet) and with Vitest component tests to add. All the testing can be compared to Cypress.