🚀 SauceDemo Automation Framework

This repository features an E2E (End-to-End) automation framework built for the SauceDemo application. This project was developed to apply and refine advanced automation practices learned from the "Playwright Foundations with Node.js" course by Andrejs Doronins.

🛠️ Tech Stack

• Core: Playwright Test
• Language: TypeScript
• CI/CD: GitHub Actions
• Reporting: Playwright HTML Reporter

✨ Key Features

• ⚡ Web-First Assertions: Utilizing Playwright's auto-retrying assertions for flaky-free testing.
• 🛠️ Clean Code & DRY: Advanced implementation of the Page Object Model (POM) to separate concerns.
• 🛡️ Type Safety: Full TypeScript integration for robust development and refactoring.
• 📊 Detailed Reporting: Automatic HTML report generation with screenshots on failure.
• 🚀 Continuous Integration: Fully automated test execution via GitHub Actions on every push.
• 🌍 Cross-Browser Support: Tests are configured to run against Chromium, Firefox, and WebKit to ensure full application compatibility.

📥 Getting Started

Prerequisites

• Node.js: LTS version recommended.
• npm: Installed automatically with Node.js.

Installation

1. Clone the repository:

   git clone https://github.com/alanrychert/saucedemo-playwright-typescript.git

2. Navigate to the project folder:

   cd saucedemo-playwright-typescript

3. Install dependencies:

   npm ci

4. Install Playwright browsers:

   npx playwright install --with-deps

🧪 Running tests

• Run all tests:

  npx playwright test 

• Run in headed mode (UI visible):

  npx playwright test --headed

• View the latest HTML Report:

  npx playwright show-report

📊 Test Execution

The suite is automatically validated across all major browser engines to guarantee a consistent user experience. Below are the execution reports for the primary test flows:

🏗️ Architectural Decisions & Conventions

This framework was designed following industry best practices to mirror a real-world production project, prioritizing scalability, type safety, and the Single Source of Truth principle.

1. 🧩 Advanced Page Object Model (POM)

The application is decomposed into specialized Page Objects. Each class encapsulates its own locators and business logic (semantic actions), ensuring the tests remain readable and decoupled from the UI implementation.

• Benefit: Simplifies maintenance. If a UI element changes, only one file needs updating, and tests remain expressive and easy to understand.

2. 🎯 Centralized Metadata & Constant Management

URLs, expected text patterns, and business constants (such as sorting options) are stored as static readonly properties within their respective Page Objects using TypeScript's as const assertion.

• Benefit: Guarantees that the data used for assertions and navigation is consistent throughout the framework.

3. 🛡️ Defensive & Semantic Locators

The framework prioritizes the use of getByTestId and user-centric locators (like getByRole or getByText) over CSS or XPath selectors that depend on the DOM structure.

• Benefit: Provides high resilience to layout changes and ensures the tests verify the application from the user's perspective, aligning with accessibility standards.

4. 📉 Data-Independent Assertions

For features like product sorting, the framework uses logic-based sorting and dynamic data retrieval instead of hardcoded expected arrays.

• Benefit: Tests remain robust even if the product catalog or the data changes, focusing on verifying the correct behavior of the sorting algorithm rather than static content.

5. 🤖 Automated CI/CD (GitHub Actions)

Every commit and Pull Request triggers an automated pipeline that provisions a clean Linux environment, installs dependencies, and executes the full test suite.

• Benefit: Guarantees continuous reliability, ensures that every change is validated before merging, and prevents regression bugs from reaching the main branch.

6. 🌍 Cross-Browser Engine Strategy

The framework is configured to execute the entire suite across Chromium, Firefox, and WebKit.

• Benefit: Identifies browser-specific bugs early in the development cycle, ensuring that the application remains functional for 100% of the user base regardless of their browser choice.

7. 🏗️ Global Authentication & Multi-Project Flow

The framework implements a Global Setup strategy to optimize execution times and efficiently simulate user states:

• Session Persistence: Utilizes auth.setup.ts to perform the login only once and save the storageState into a JSON file.
• Project Separation: The configuration file splits execution into:
  • public-projects: For flows requiring a clean state (e.g., login error validation).
  • logged-in-projects: For business flows (Purchase, Inventory) that reuse the previously saved session.
• Benefit: This architecture reduces login overhead by approximately 40% across the entire test suite.

8. 🚪 Optimized Entry Points

To maintain strict navigation control, only the LoginPage and InventoryPage serve as valid entry points using a .goto() method. All other pages are accessed through natural UI interactions, mimicking real user behavior.