SauceDemo Test Automation Framework

A comprehensive Playwright test automation framework with Page Object Model (POM), utilities, data management, logging, and reporting for the SauceDemo application.

🚀 Features

• Page Object Model (POM): Clean, maintainable page objects for all application pages
• Test Data Management: Centralized test data with user credentials and checkout information
• Advanced Logging: Detailed test execution logging with timestamps and structured output
• Custom Reporting: Comprehensive test reports with execution summaries and failure details
• Utility Functions: Helper functions for common test operations and validations
• Test Fixtures: Pre-configured test setup with authentication and page object initialization
• Screenshot Capture: Automatic screenshot capture on test failures
• Multi-Browser Support: Configured for Chromium, Firefox, and WebKit

📁 Project Structure

├── src/
│   ├── pages/                  # Page Object Models
│   │   ├── base-page.ts       # Base page with common functionality
│   │   ├── login-page.ts      # Login page object
│   │   ├── inventory-page.ts  # Inventory/products page object
│   │   ├── cart-page.ts       # Shopping cart page object
│   │   └── checkout-page.ts   # Checkout process page object
│   ├── data/                  # Test data management
│   │   └── test-data.ts       # User credentials, product info, URLs
│   ├── utils/                 # Utility functions
│   │   ├── logger.ts          # Structured logging utility
│   │   ├── helpers.ts         # Helper functions and validations
│   │   └── reporter.ts        # Custom test reporting
│   └── fixtures/              # Test setup and configuration
│       └── test-setup.ts      # Extended test fixtures and hooks
├── tests/                     # Test specifications
│   └── saucedemo-e2e.spec.ts # Complete E2E test suite
├── test-results/              # Test execution results
│   └── screenshots/           # Failure screenshots
├── test_scenarios/            # BDD feature files
│   └── 01_saucedemo.feature  # Original scenario definition
└── playwright.config.ts      # Playwright configuration

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd playwright-mcp-two

2. Install dependencies

   npm install

3. Install Playwright browsers

   npx playwright install

🏃‍♂️ Running Tests

Run All Tests

npx playwright test

Run Specific Test Suite

npx playwright test tests/saucedemo-e2e.spec.ts

Run Tests in Headed Mode (with browser UI)

npx playwright test --headed

Run Tests with Specific Browser

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Run Specific Test

npx playwright test --grep "Complete end-to-end shopping flow"

Debug Mode

npx playwright test --debug

Generate and View Reports

npx playwright show-report

📋 Test Scenarios

The framework includes comprehensive test coverage for:

1. Complete E2E Shopping Flow

• Login with valid credentials
• Navigate to product inventory
• Add backpack product to cart
• Proceed through checkout process
• Fill shipping information
• Complete order placement
• Verify order completion

2. Login Validation

• Test with different user types (standard, locked-out)
• Negative testing with invalid credentials
• Error message validation

3. Product Catalog

• Verify product listings
• Validate product pricing
• Product detail verification

4. Cart Management

• Add/remove items from cart
• Cart quantity validation
• Continue shopping functionality

5. Checkout Validation

• Form validation
• Order summary verification
• Price calculation validation

🔍 Test Data

The framework uses structured test data located in src/data/test-data.ts:

• User Credentials: Valid and invalid user accounts
• Product Information: Product details with prices and descriptions
• Checkout Data: Shipping information for testing
• URLs: Application endpoints and navigation paths
• Error Messages: Expected error messages for validation

📊 Logging and Reporting

Logging Features

• Structured Logging: Timestamped logs with log levels (INFO, ERROR, WARN, DEBUG)
• Test Steps: Clear step-by-step execution tracking
• Success/Failure Indicators: Visual indicators for test results
• Page Object Logging: Automatic logging in all page object interactions

Reporting Features

• Test Summary: Pass/fail statistics and execution time
• Detailed Results: Individual test results with duration and errors
• Failure Screenshots: Automatic screenshot capture on failures
• HTML Reports: Built-in Playwright HTML reporting

🎯 Key Features

Page Object Model Benefits

• Maintainability: Changes to UI elements require updates in only one place
• Reusability: Page objects can be reused across multiple tests
• Readability: Tests are more readable and focused on business logic
• Accessibility-First: Uses semantic locators (getByRole, getByLabel) for better reliability

Advanced Test Setup

• Pre-authenticated Sessions: Automatic login setup for tests that require authentication
• Test Fixtures: Custom fixtures for page objects and common test data
• Global Hooks: Setup and teardown operations for test environment
• Error Handling: Comprehensive error handling with detailed logging

Utility Functions

• Price Extraction: Parse and validate monetary values
• Random Data Generation: Generate test data dynamically
• Screenshot Management: Organized screenshot capture and storage
• Validation Helpers: Email, postal code, and other format validations

🔧 Configuration

The framework is configured via playwright.config.ts with:

• Multi-browser support: Chromium, Firefox, WebKit
• Retry logic: 2 retries on CI, 0 locally
• Timeout settings: Reasonable timeout values for reliability
• Trace collection: On retry for debugging failures
• HTML reporting: Detailed test reports with visual timeline

📈 Best Practices

The framework follows Playwright and testing best practices:

1. Accessibility-First Locators: Uses getByRole, getByLabel over CSS selectors
2. Web-First Assertions: Auto-retrying assertions that wait for conditions
3. Test Independence: Each test can run independently without affecting others
4. Descriptive Test Names: Clear test descriptions that explain the scenario
5. Step Organization: Tests organized with test.step() for better reporting
6. Error Screenshots: Automatic failure documentation
7. Structured Logging: Comprehensive logging for debugging and monitoring

🚀 Extending the Framework

To add new test scenarios:

1. Create Page Objects: Add new page objects in src/pages/
2. Add Test Data: Update src/data/test-data.ts with new test data
3. Write Tests: Create new test files in tests/ directory
4. Update Fixtures: Add new fixtures in src/fixtures/test-setup.ts if needed

📝 Example Usage

import { test, expect } from '../src/fixtures/test-setup';
import { TestData } from '../src/data/test-data';

test.describe('My New Feature', () => {
    test('should perform specific action', async ({ 
        loginPage, 
        inventoryPage, 
        logger 
    }) => {
        const credentials = TestData.getStandardUser();
        
        await test.step('Login to application', async () => {
            await loginPage.navigateToLoginPage(TestData.URLS.BASE_URL);
            await loginPage.login(credentials.username, credentials.password);
            await inventoryPage.verifyInventoryPageLoaded();
        });
        
        // Additional test steps...
    });
});

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Add tests for new functionality
4. Ensure all tests pass
5. Submit a pull request

📄 License

This project is licensed under the ISC License.

---

Generated from SauceDemo scenario using systematic website exploration and following Playwright MCP best practices.