🧪 Playwright Automation Testing - SauceDemo E-Commerce

This repository contains an End-to-End (E2E) automation testing framework built with Native Playwright TypeScript for the SauceDemo e-commerce web application.

Designed using the Page Object Model (POM) pattern, this framework leverages modern Playwright locators (getByTestId, getByText), dynamic selector helpers, and robust environment variable handling to deliver maintainable, high-performance automated tests.

---

📌 Key Framework Features

• Page Object Model (POM) Architecture: Clear separation of concerns between Selectors, Page Objects, and Test Specs.
• Dynamic Locators: Reusable helper functions for handling repetitive UI elements efficiently (DRY Principle).
• Cross-Browser & Parallel Execution: Configured for multi-browser execution (Chromium/Firefox/WebKit) with parallel execution support.
• Environment Configuration: Centralized management of test credentials and URLs using .env files.
• Interactive HTML Reports: Automatically generates visual test reports complete with screenshots, videos, and trace viewers on test failures.

---

📁 Repository Structure

├── .env.example            # Template for environment variables
├── playwright.config.ts    # Main Playwright configuration
├── tsconfig.json           # TypeScript configuration
├── pages/                  # Page Object Classes
│   ├── LoginPage.ts
│   ├── InventoryPage.ts
│   ├── ProductDetailPage.ts
│   ├── CartPage.ts
│   └── CheckoutPage.ts
├── selectors/              # UI Selectors and Locators
│   ├── loginSelectors.ts
│   ├── inventorySelectors.ts
│   ├── productDetailSelectors.ts
│   ├── cartSelectors.ts
│   └── checkoutSelectors.ts
└── tests/                  # Automated Test Specs
    ├── login.spec.ts
    ├── inventory.spec.ts
    ├── product-detail.spec.ts
    ├── cart.spec.ts
    └── checkout.spec.ts

---

🧪 Test Coverage

1. Authentication (Login & Logout)
   • Successful login with standard credentials.
   • Error message handling (invalid credentials, empty username/password).
   • User logout workflow.
2. Product Catalog & Filtering
   • Product sorting options (A-Z, Z-A, Price Low-to-High, Price High-to-Low).
   • Adding and removing items directly from the catalog page.
   • Real-time validation of cart badge counter increments/decrements.
3. Product Details
   • Verification of product details (titles, descriptions, pricing, and images).
   • Adding/removing items from the item details view.
4. Cart Management
   • Item verification in the cart view.
   • Item removal from inside the cart.
   • "Continue Shopping" navigation flow.
5. Checkout Workflow (E2E)
   • Form validation (required First Name, Last Name, and Postal Code fields).
   • Price calculation verification on the Checkout Overview page (Item Total, Tax, Total).
   • Order cancellation and completion workflows (Thank You page validation).

---

⚙️ Getting Started

1. Prerequisites

Ensure you have the following installed on your machine:

• Node.js (Version 18 or higher)
• VS Code (Recommended)

2. Installation

# Clone the repository
git clone [https://github.com/your-username/playwright-saucedemo.git](https://github.com/your-username/playwright-saucedemo.git)

# Navigate to the project directory
cd playwright-saucedemo

# Install project dependencies
npm install

# Install Playwright browsers
npx playwright install

3. Environment Variables

Create a .env file in the root directory based on the provided .env.example:

BASE_URL=[https://www.saucedemo.com](https://www.saucedemo.com)
STANDARD_USER=standard_user
STANDARD_PASSWORD=secret_sauce
LOCKED_USER=locked_out_user

---

🚀 Running Tests

Command	Description
npx playwright test	Runs all test specs headlessly
npx playwright test --headed	Runs tests with visible browser windows
npx playwright test tests/checkout.spec.ts	Runs a specific test suite
npx playwright test --ui	Launches Playwright Interactive UI Mode
npx playwright show-report	Opens the latest HTML test execution report

---

📊 Test Reporting

Upon execution completion, Playwright automatically generates an interactive HTML report. To view it, run:

npx playwright show-report

---

🚀 CI/CD Pipeline & Notification

This project is integrated with GitHub Actions for Continuous Integration (CI) and Discord Webhooks to deliver automated, real-time test execution status alerts directly to a monitoring channel.

Workflow Features

• Automated Triggers: Tests run automatically on every push and pull_request to the main branch.
• Environment Security: Sensitive credentials and webhook URLs are securely injected using GitHub Repository Secrets.
• Instant Monitoring: Receives instant pass/fail status updates complete with commit details and workflow metadata upon test completion.

GitHub Actions

Playwright HTML Report

Discord Notification

---

👨‍💻 Author

• Aulia Fasya Nugroho - QA Automation Engineer
• GitHub: @fasyauliuli
• LinkedIn: Aulia Fasya Nugroho