Marco Adán Vera Zboralski
Senior QA Automation Engineer

LinkedIn

This project demonstrates a scalable UI automation framework built with Playwright and TypeScript.

It follows real-world best practices such as Page Object Model (POM), multi-environment configuration, and reusable components to ensure maintainability and reliability.

This project follows a scalable and maintainable automation architecture:

• ✅ Page Object Model (POM)
• ✅ Separation of concerns (tests, pages, models, utils)
• ✅ Dynamic DOM handling to avoid fragile locators
• ✅ Multi-environment support (dev, qa, stage, prod)
• ✅ Reusable utility classes

project-root/
│── .github/                 # GitHub workflows, PR templates, CODEOWNERS
│── data/                    # Test data files
│
│── src/
│   ├── api/
│   │   ├── clients/
│   │   │   └── jsonplaceholder/   # API client classes
│   │   ├── fixtures/              # API fixtures
│   │   ├── models/
│   │   │   └── jsonplaceholder/   # API data models/interfaces
│   │   ├── payloads/
│   │   │   └── jsonplaceholder/   # API request payload builders
│   │   ├── utils/                 # API-specific utilities
│   │   └── base.api.ts            # Base API functionality
│   │
│   ├── config/
│   │   └── saucedemo/             # Environment/configuration files
│   │
│   ├── fixtures/
│   │   └── saucedemo/             # Playwright UI fixtures
│   │
│   ├── models/                    # Shared UI/domain models
│   │
│   ├── pages/
│   │   └── saucedemo/             # Page Object Model classes
│   │
│   └── utils/                     # Shared utilities and helpers
│
│── tests/
│   ├── api/
│   │   └── jsonplaceholder/       # API test specs
│   └── ui/
│       └── saucedemo/             # UI test specs
│
│── test-results/                  # Test execution artifacts
│── playwright-report/             # Playwright HTML reports
│── allure-results/                # Allure raw results
│── allure-report/                 # Allure generated reports
│
│── .gitignore
│── .prettierrc
│── package.json
│── package-lock.json
│── playwright.config.ts
│── README.md

• 🔄 End-to-End flows (login, checkout)
• 🎲 Dynamic product selection using randomization
• ✅ Validation across UI layers
• 📝 BDD-style comments (Given / When / Then)

• 🌐 Multi-environment execution
• 🎲 Randomized test execution
• 🔍 Product validation across pages
• 🛠️ Utilities for random data, waits, and calculations
• 🎬 Playwright features:
  • Video recording
  • Trace viewer
  • Screenshots on failure

# Clone the repository
git clone <repository-url>

# Navigate to project directory
cd playwright-automation-framework

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

# Run all tests
npx playwright test

# Run a specific test file
npx playwright test tests/saucedemo/login-page.spec.ts

# Run tests by name
npx playwright test -g "login"

# Run in headed mode (visible browser)
npx playwright test --headed

# Run with specific number of workers
npx playwright test --workers=4

# Run in debug mode
npx playwright test --debug

# Run with verbose output
npx playwright test --reporter=list

This framework supports multiple environments using the ENV variable.

Available environments:

• dev (default)
• qa
• stage
• prod

# Set environment and run all tests
set ENV=qa && npx playwright test

# Set environment and run specific test name
set ENV=qa && npx playwright test -g "checkout"

# Set environment and run specific file
set ENV=qa && npx playwright test tests/saucedemo/login-page.spec.ts

# Set environment and run tests
$env:ENV="qa"; npx playwright test

# Run specific test
$env:ENV="stage"; npx playwright test -g "checkout"

# Run all tests in QA environment
ENV=qa npx playwright test

# Run specific test in staging
ENV=stage npx playwright test -g "checkout"

# Run specific file in production
ENV=prod npx playwright test tests/saucedemo/checkout.spec.ts

Common scripts are defined in package.json.

Examples:

npm run test
npm run test:dev
npm run test:qa
npm run test:stage
npm run test:prod
npm run test:headed
npm run report:playwright

Environment-specific scripts use cross-env to support Windows, macOS, Linux, and CI/CD environments.

npx playwright show-report

test-results/
├── videos/ # .webm video recordings
├── traces/ # Playwright trace files
└── screenshots/ # Failure screenshots

# Open trace viewer
npx playwright show-trace test-results/traces/trace.zip

• 🧪 Demonstrate automation framework design
• 💻 Practice Playwright + TypeScript
• 📋 Showcase testing best practices
• 📂 Serve as a portfolio project

Contributions are welcome! This project is intended to grow with additional real-world test scenarios.

You can:

• 🧪 Add new test flows
• 🔨 Improve existing tests
• ✅ Enhance validations
• 💡 Suggest improvements

• 🎯 Uses dynamic locators to avoid fragile selectors
• 🏗️ Focus on maintainability and scalability
• 🌐 Designed to simulate real-world automation scenarios
• 📚 Follows testing best practices and design patterns

This project is open source and available under the MIT License.

Marco Adán Vera Zboralski 🔗 LinkedIn