Playwright E2E Test Suite — SauceDemo

A professional end-to-end test automation suite built with Playwright, targeting SauceDemo — a sandbox e-commerce platform designed for QA practice.

This project demonstrates real-world QA automation practices including modular test structure, reusable helpers, cross-browser execution, and CI/CD integration via GitHub Actions.

---

What's Tested

Module	Tests	Coverage
Authentication	6	Login success/failure, locked user, logout, direct URL access control
Inventory	7	Product listing, sorting (price/name), product detail navigation
Cart	6	Add/remove items, badge count, cart persistence across navigation
Checkout	8	Form validation, order summary accuracy, full purchase completion

Total: 27 test cases across 4 modules

---

Tech Stack

• Playwright — E2E automation framework (JavaScript)
• GitHub Actions — CI/CD pipeline (runs on push, PR, and daily schedule)
• Cross-browser — Chromium, Firefox, and Mobile Chrome (Pixel 5)

---

Project Structure

playwright-demo/
├── tests/
│   ├── auth.spec.js          # Login, logout, access control
│   ├── inventory.spec.js     # Product listing and sorting
│   ├── cart.spec.js          # Cart operations
│   └── checkout.spec.js      # Full checkout flow + form validation
├── utils/
│   └── helpers.js            # Shared login helper, test data, reusable actions
├── .github/
│   └── workflows/
│       └── playwright.yml    # GitHub Actions CI pipeline
├── playwright.config.js      # Playwright configuration
└── package.json

---

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

# Clone the repo
git clone https://github.com/Pius931/playwright-saucedemo-tests.git
cd playwright-saucedemo-tests

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

Running Tests

# Run all tests (headless)
npm test

# Run with browser UI visible
npm run test:headed

# Run a specific test file
npx playwright test tests/auth.spec.js

# Run on a specific browser
npx playwright test --project=firefox

# Open HTML report after run
npm run test:report

---

CI/CD Pipeline

Tests run automatically via GitHub Actions on:

• Every push to main or develop
• Every pull request to main
• Daily at 8:00 AM UTC (scheduled regression run)

Test reports and failure screenshots are uploaded as artifacts and retained for 14 days.

---

Test Design Decisions

• Modular helpers — Login, addToCart, and fillCheckoutForm are extracted into utils/helpers.js to avoid repetition and make tests easier to maintain
• beforeEach hooks — Each suite sets up state cleanly before every test so tests remain independent and don't rely on each other's side effects
• Data-test selectors — Tests use [data-test="..."] attributes where available, making them resilient to UI styling changes
• Negative path coverage — Auth and checkout suites explicitly test error states, not just happy paths
• Cross-browser — Configured to run on Chromium, Firefox, and mobile viewport out of the box

---

Author

Pius Olumide — QA Engineer
github.com/Pius931 | olumidepius6@gmail.com