SauceDemo Playwright TypeScript Test Automation Framework

A comprehensive, enterprise-grade test automation framework for SauceDemo using Playwright and TypeScript. This project demonstrates modern test automation best practices, scalable architecture, and professional CI/CD integration.

🎯 Project Overview

This framework showcases:

• Page Object Model (POM) design pattern for maintainable tests
• TypeScript for type safety and better developer experience
• Multi-browser testing (Chrome, Firefox, Safari)
• Cross-platform CI/CD (GitHub Actions & CircleCI)
• Professional reporting (Allure, Playwright HTML, JUnit)
• Code quality tools (ESLint, Prettier, TypeScript compiler)
• Mobile testing capabilities
• Parallel test execution with sharding

📋 Test Documentation

Test Strategy

[Attach Test Strategy Document Here - PDF/Excel/Google Docs]

Key Focus Areas:

• Login functionality validation
• User role testing (standard, locked, problem, performance users)
• Negative test scenarios and edge cases
• Cross-browser compatibility
• Performance and visual regression detection

Test Plan

[Attach Test Plan Document Here - PDF/Excel/Google Docs]

Test Coverage:

• ✅ Authentication & Authorization
• ⏳ Product Catalog & Inventory
• ⏳ Shopping Cart & Checkout
• ⏳ User Profile & Settings
• ⏳ Error Handling & Validation

Test Cases

[Attach Test Cases Document Here - Excel/CSV/Test Management Tool Export]

Current Implementation:

• Login functionality (6 user types + edge cases)
• Error message validation
• Page navigation flows
• UI element interactions

🏗️ Project Structure

The following shows the structure of this auceDemo Playwright TypeScript Test Automation:

saucedemo-playwright-ts-tests/
├── .circleci/                          # CircleCI continuous integration configuration
│   └── config.yml                      # Defines CI/CD pipeline for CircleCI platform - runs tests on every push/PR
├── .github/                            # GitHub-specific configuration
│   └── workflows/                      # GitHub Actions workflow definitions
│       └── playwright.yml              # Automated test execution on GitHub infrastructure - runs on schedule and triggers
├── allure-results/                     # AUTO-GENERATED: Raw test results for Allure reports - contains test execution data
├── allure-report/                      # AUTO-GENERATED: HTML test reports generated by Allure - interactive test results dashboard
├── pages/                              # PAGE OBJECT MODEL: Contains classes representing each page in the application
│   ├── base-page.ts                    # Abstract base class with common functionality inherited by all page objects
│   ├── login-page.ts                   # Login page specific elements and methods - handles authentication flows
│   └── inventory-page.ts               # Products inventory page - handles product listing, sorting, and cart operations
├── tests/                              # TEST SPECIFICATIONS: Contains all test files organized by functionality
│   ├── home.spec.ts                    # Tests for basic navigation, page structure, and initial load validations
│   └── login.spec.ts                   # Comprehensive login functionality tests - positive, negative, and edge cases
├── utils/                              # UTILITY FUNCTIONS: Reusable helper methods and common test operations
│   ├── test-data.ts                    # Centralized test data repository - users, error messages, URLs, timeouts
│   ├── helpers.ts                      # Generic helper functions - random data generation, element checks, screenshots
│   └── common-steps.ts                 # Reusable test steps - login, logout, verification methods for BDD-like approach
├── fixtures/                           # TEST FIXTURES: Static test data sets for different test scenarios
│   └── test-data.ts                    # Predefined data sets for login tests - valid/invalid credentials, edge cases
├── types/                              # TYPE DEFINITIONS: TypeScript interfaces and type definitions for type safety
│   ├── index.ts                        # Main exports barrel file - aggregates all type definitions for easy importing
│   ├── user.types.ts                   # User-related interfaces - credentials, profiles, sessions, roles, and permissions
│   ├── page.types.ts                   # Page-related interfaces - products, carts, navigation, forms, and UI elements
│   ├── test.types.ts                   # Test-related interfaces - configurations, results, suites, and performance metrics
│   └── api.types.ts                    # API-related interfaces - request/response structures, errors, pagination (future use)
├── .eslintrc.js                        # ESLint configuration - code quality rules, TypeScript support, and formatting standards
├── .gitignore                          # Git ignore rules - excludes generated files, dependencies, and sensitive data from version control
├── package.json                        # Project configuration - dependencies, scripts, metadata, and npm package information
├── playwright.config.ts                # Playwright test runner configuration - browsers, reporters, timeouts, and global settings
├── tsconfig.json                       # TypeScript compiler configuration - strict type checking, module resolution, and output settings
└── README.md                           # Project documentation - setup instructions, usage guide, and architecture overview

---

📁 Folder & File Details

Configuration Files

• playwright.config.ts - Main Playwright configuration (browsers, reporters, timeouts)
• tsconfig.json - TypeScript compiler settings with strict type checking
• eslint.config.js - ESLint configuration using modern ES modules
• package.json - Project metadata, dependencies, and npm scripts

CI/CD Configuration

• .github/workflows/playwright.yml - GitHub Actions workflow with scheduled runs
• .circleci/config.yml - CircleCI configuration with parallel jobs

Test Organization (To Be Implemented)

• tests/specs/ - Actual test files organized by feature
• tests/pages/ - Page Object Model classes for each page
• tests/utils/ - Reusable utilities, helpers, and custom commands
• tests/fixtures/ - Test data, mock data, and fixtures
• config/environment.ts - Environment-specific configurations

Generated Reports & Artifacts

• allure-report/ - Detailed Allure test reports with trends and history
• playwright-report/ - Playwright's built-in HTML test reporter
• test-results/ - Videos, screenshots, and trace files for failed tests

🚀 Quick Start

Prerequisites

• Node.js 18 or higher
• npm (comes with Node.js)
• Git

Installation

1. Clone the repository

   git clone https://github.com/SabineU/saucedemo-playwright-ts-tests.git
   
   cd saucedemo-playwright-ts-tests
   

2. Install dependencies

   npm ci
   

3. Install Playwright browsers

    npx playwright install

4. Install Playwright browsers

    npx playwright install
   

🧪 Running Tests

1. Basic Test Execution

   # Run all tests in headless mode
   npm test
   
   # Run tests with browser UI visible
   npm run test:headed
   
   # Run tests in debug mode
   npm run test:debug
   

2. Interactive Test Development

    # Open Playwright Test Runner UI
    npm run test:ui
    
    # Generate tests using Codegen (record user actions)
    npm run test:codegen
   

3. Advanced Test Execution

    # Run tests on specific browsers only
    npx playwright test --project=chromium
    npx playwright test --project=firefox
    npx playwright test --project=webkit
    
    # Run tests in parallel (4 workers)
    npx playwright test --workers=4
    
    # Run tests matching a tag or name pattern
    npx playwright test --grep="@login"
    npx playwright test --grep="should validate error messages"
   

4. Report Generation

    # View latest test report
    npm run test:report
    
    # Generate Allure report
    npm run allure:generate
    
    # Serve Allure report locally
    npm run allure:serve
   

5. 🔧 Code Quality & Maintenance

    # Run ESLint to check code quality
    npm run lint
    
    # Auto-fix ESLint issues
    npm run lint:fix
    
    # TypeScript type checking (no compilation)
    npm run type-check
    
    # Clear all generated reports and results
    npm run allure:clear
   

📊 Test Reports

This framework generates multiple types of reports:

1. Playwright HTML Report

    npm run test:report
   

   • Interactive HTML report with test results
   • Screenshots and videos for failed tests
   • Test timeline and execution details

2. Allure Reports

    npm run allure:generate
    
    npm run allure:serve
   

   • Professional test reporting with trends
   • Historical data and analytics
   • Rich attachments and environment info

## CI/CD Integration

• JUnit XML for CI systems (Jenkins, etc.)
• GitHub Actions artifacts with test results
• CircleCI test insights and timing analytics

🛠️ CI/CD Pipeline

1. GitHub Actions

• Trigger: On push/PR to main/master + scheduled daily runs
• Jobs: Code quality checks → Parallel test execution
• Artifacts: Test reports, videos, screenshots
• Schedule: Weekdays at 8:00 AM (GMT+2)

2. CircleCI

• Workflows: On-demand testing + scheduled afternoon runs
• Parallelism: Multi-container test execution
• Caching: Optimized dependency installation
• Artifacts: Comprehensive test results storage

🎨 Framework Features

1. ✅ Best Practices Implemented

• Type Safety: Full TypeScript implementation with strict mode
• Code Quality: ESLint with TypeScript rules and Prettier formatting
• Page Object Model: Clean separation of test logic and page interactions
• Environment Configuration: Configurable base URLs and test data
• Error Handling: Comprehensive error catching and reporting
• Parallel Execution: Fast test runs through sharding and workers

2. 🔒 Security & Maintenance

• Dependency Management: Regular updates with npm ci for consistency
• Secret Management: Environment variables for sensitive data
• Artifact Retention: Automatic cleanup after 30 days
• Resource Optimization: Efficient browser management and caching

2. 🤝 Contributing

• Fork the repository
• Create a feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

Development Workflow

  # 1. Run tests to ensure everything works
  npm test
  
  # 2. Check code quality
  npm run lint
  
  # 3. Verify TypeScript types
  npm run type-check
  
  # 4. Run tests in UI mode for new features
  npm run test:ui

📝 License

This project is licensed under

👥 Author

GitHub Profile: https://github.com/SabineU

🙏 Acknowledgments

• Playwright (https://playwright.dev/) for the excellent testing framework
• SauceDemo (https://www.saucedemo.com/) for providing a great test application
• Allure Report (https://allurereport.org/) for beautiful test reporting
• GitHub Actions and CircleCI for robust CI/CD pipelines

⭐ If you find this project helpful, please give it a star! ⭐