End-to-End Testing a MERN Ecommerce App with Playwright - From Zero to 38 Passing Tests

Introduction

Every production application needs a safety net. Unit tests verify individual functions. Integration tests verify that modules talk to each other correctly. But only end-to-end (E2E) tests verify that a real user can actually complete a real workflow — log in, browse products, add items to the cart, and check out — without anything breaking.

In this article I'll walk through how I built a complete Playwright E2E automation suite for a full-stack MERN Ecommerce application (MongoDB, Express, React, Node.js). By the end you'll understand:

How to structure a Playwright project with the Page Object Model (POM) pattern
How to handle cookie-based authentication so tests don't repeat login every time
How to reliably test React + Redux UIs where API calls, animations, and state timing can trip up naive selectors
The specific techniques I used to defeat Framer Motion animations, MUI hidden inputs, and Redux empty-state redirects

The full source is at github.com/mgkaran/Mern-E-Commerce-Playwright-Automation.

Application Under Test

The MERN Ecommerce app includes:

Area	Features
Auth	Signup, login (JWT cookie), OTP verification, forgot/reset password
Products	Listing, filtering by brand/category, sorting, pagination
Cart	Add/remove items, quantity control, checkout
Wishlist	Add/remove items, personal notes, add-to-cart from wishlist
Orders	Place orders, view order history
Admin	Product management, order management

Tech stack: React 18, Redux Toolkit, MUI v5, Framer Motion, react-hook-form, Node/Express, MongoDB, JWT HTTP-only cookies.

Project Structure

mern-ecommerce/ ├── playwright.config.js # Multi-project config ├── package.json # Test scripts ├── pages/ # Page Object Model │ ├── LoginPage.js │ ├── SignupPage.js │ ├── HomePage.js │ ├── CartPage.js │ ├── WishlistPage.js │ ├── NavbarComponent.js │ └── ForgotPasswordPage.js └── tests/ ├── fixtures.js # Shared test data ├── auth.setup.js # Saves auth cookie └── ui/ ├── login.spec.js # Unauthenticated ├── signup.spec.js ├── forgot-password.spec.js └── authenticated/ ├── home.spec.js # Authenticated ├── cart.spec.js ├── wishlist.spec.js └── navigation.spec.js

1. Playwright Configuration — Three Projects, One Config

The most important architectural decision was splitting tests into three Playwright projects: