Skip to content

Latest commit

 

History

History
204 lines (150 loc) · 4.35 KB

README.md

File metadata and controls

204 lines (150 loc) · 4.35 KB

Automated Testing Demo with Playwright

This project demonstrates automated testing of a web application using Playwright with TypeScript. It implements the Page Object Model (POM) design pattern and includes comprehensive test coverage for login, inventory, and checkout flows.

🛠 Tech Stack

  • Playwright
  • TypeScript
  • Allure Report
  • dotenv

📦 Project Structure

├── tests/
│ ├── pages/ # Page Object Models
│ ├── specs/ # Test Specifications
│ └── fixtures/ # Test Fixtures and Data
├── playwright.config.ts
├── tsconfig.json
└── package.json

🚀 Getting Started

  1. Install dependencies:
pnpm install
  1. Copy the .env.example file to .env and update the credentials:
cp .env.example .env
  1. Run tests:
pnpm test # Run all tests
pnpm test:chrome # Run tests in Chrome only
pnpm test:headed # Run tests in headed mode
pnpm test:ui # Run tests with UI mode
  1. Configure the Allure Report in your machine:

Mac OS:

brew install allure

Linux:

# Using package file
# 1. Download the latest release
# Go to the latest Allure Report release on GitHub and download the allure-*.deb file.

# 2. Install the package
sudo dpkg -i allure_<version>_all.deb
sudo apt-get install -f # Install dependencies if needed

# Verify installation
allure --version

For other Linux distributions, check the official Allure documentation.

📝 Test Structure

Page Objects

  • BasePage: Abstract base class with common functionality
  • AuthenticatedPage: Base class for authenticated pages
  • LoginPage: Login page interactions
  • InventoryPage: Product inventory functionality
  • CheckoutPage: Checkout process handling

Test Specs

  • Login Tests: User authentication scenarios
  • Inventory Tests: Product listing and cart operations
  • Checkout Tests: Order completion flow

🧪 Test Coverage

Login Flow

  • Multiple user type authentication:
    • Standard user
    • Performance glitch user
    • Error user
    • Visual user
    • Problem user
  • Error validation:
    • Locked out user handling
    • Invalid credentials messaging
  • Error message verification
  • Page navigation validation

Inventory Management

  • Product listing:
    • Price sorting (low to high, high to low)
    • Alphabetical sorting (A to Z)
    • Product details verification
  • Cart operations:
    • Single item add/remove
    • Multiple items management
    • Cart badge count updates
    • Cart persistence after page reload
  • Navigation:
    • Cart page access
    • Shopping flow continuity

Checkout Process

  1. Information Form (Step One):

    • Form field validation:
      • First name requirement
      • Last name requirement
      • Postal code requirement
    • Error message handling
    • Navigation controls (continue/cancel)

  2. Order Summary (Step Two):

    • Item list verification
    • Price calculations:
      • Subtotal accuracy
      • Tax computation
      • Total amount validation
    • Cart persistence
    • Navigation options

  3. Order Completion:

    • Success message verification
    • Order confirmation elements
    • Post-purchase navigation
    • Cart status reset

📊 Reporting

Generate and view test reports:

pnpm report

🔍 Key Features

  1. Page Object Model

    • Modular and maintainable test structure
    • Reusable page components
    • Type-safe interactions

  2. Cross-browser Testing

    • Chrome, Firefox, and Safari support
    • Mobile viewport testing (configurable)

  3. Test Fixtures

    • Shared test context
    • User credentials management
    • Error message constants

  4. CI/CD Ready

    • Configurable retry logic (configurable)
    • Parallel test execution (configurable)
    • Failure screenshots and videos (configurable)

📚 Best Practices

  1. Data-test Attributes

    • Consistent selector strategy using data-test attributes
    • Reliable element identification
    • Maintainable selectors

  2. Type Safety

    • Strong TypeScript types
    • Interface definitions for test data
    • Compile-time error checking

  3. Error Handling

    • Graceful failure handling
    • Detailed error messages
    • Visual failure evidence

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a Pull Request

📄 License

MIT License