https://github.com/jptrp/saucedemo-playwright
Playwright + TypeScript automation framework for SauceDemo with comprehensive test coverage
https://github.com/jptrp/saucedemo-playwright
automation automation-testing playwright playwright-tests playwright-typescript pomme qa qa-automation test-automation testing typescript
Last synced: about 2 months ago
JSON representation
Playwright + TypeScript automation framework for SauceDemo with comprehensive test coverage
- Host: GitHub
- URL: https://github.com/jptrp/saucedemo-playwright
- Owner: jptrp
- Created: 2025-11-15T21:51:42.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-15T22:28:46.000Z (7 months ago)
- Last Synced: 2025-11-16T00:19:24.204Z (7 months ago)
- Topics: automation, automation-testing, playwright, playwright-tests, playwright-typescript, pomme, qa, qa-automation, test-automation, testing, typescript
- Language: TypeScript
- Homepage:
- Size: 1.58 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🧪 Playwright UI Automation Framework
Modern, maintainable end-to-end automation using Playwright, TypeScript, and the Page Object Model.
---
## 🎯 Why This Project Matters
**Most QA portfolios only show simple scripts. This repo demonstrates real-world automation capability:**
- ✅ **Clean Architecture** - Page Object Model pattern with proper encapsulation and reusability
- ✅ **Comprehensive Coverage** - 25+ tests across authentication, inventory, cart, and checkout flows
- ✅ **Production-Ready** - CI/CD pipeline with GitHub Actions, automated testing on every push
- ✅ **Modern Stack** - TypeScript with Playwright, following current industry standards
- ✅ **Best Practices** - Centralized test data, JSDoc documentation, AAA test pattern
- ✅ **Robust Selectors** - Data-test attributes and defensive locator strategies
- ✅ **Cross-Browser** - Configured for Chromium, Firefox, and WebKit testing
- ✅ **Professional Reporting** - HTML reports with screenshots and videos on failure
- ✅ **Maintainable** - DRY principles, clear naming conventions, and comprehensive comments
**This isn't just test automation—it's a scalable framework that shows enterprise-level thinking.**
---
## 🎬 Demo
*Automated end-to-end checkout flow running in Chromium*
---
## 📋 Overview
A production-ready UI automation framework built using Playwright, TypeScript, and the Page Object Model (POM) pattern.
This project demonstrates clean automation architecture, comprehensive test coverage, and CI/CD integration — all aligned with real-world QA Engineer workflows.
📚 **Documentation**:
- [Test Strategy](./docs/TestStrategy.md) - Comprehensive testing approach and methodology
- [Test Plan](./docs/TestPlan.md) - Detailed test planning and execution strategy
- [Architecture](./docs/Architecture.md) - Framework design and technical architecture
---
## 🚀 Tech Stack
- Playwright (TypeScript)
- Page Object Model (POM)
- GitHub Actions (Continuous Integration)
- Node.js
- HTML Reporter
- Cross-browser testing (Chromium, Firefox, WebKit)
---
## 📁 Project Structure
```text
saucedemo-playwright/
├── tests/ # Test specs
│ ├── login.spec.ts
│ ├── inventory.spec.ts
│ ├── cart.spec.ts
│ └── checkout.spec.ts
│
├── pages/ # Page Object Model classes
│ ├── BasePage.ts
│ ├── LoginPage.ts
│ ├── InventoryPage.ts
│ ├── CartPage.ts
│ └── CheckoutPage.ts
│
├── fixtures/ # Test data
│ └── testData.ts
│
├── playwright.config.ts # Global Playwright settings
├── package.json
│
└── .github/workflows/ # CI pipeline
└── playwright.yml
```
---
## 🧪 Features & Tests Included
### ✔️ Login tests
- Valid login
- Invalid login (error validation)
### ✔️ Inventory tests
- Add item to cart
- Navigate from inventory → cart
### ✔️ Cart & Checkout tests
- Start checkout
- Fill user information
- Complete the purchase
- Validate confirmation screen
### ✔️ Page Object Model (POM)
- LoginPage
- InventoryPage
- CartPage
- CheckoutPage
- BasePage (shared functionality)
### ✔️ CI Integration
- GitHub Actions workflow triggers on push and pull requests
- Ensures all tests run headless in CI
---
## ▶️ Running Tests Locally
Install dependencies:
```bash
npm install
```
Run all Playwright tests:
```bash
npx playwright test
```
View the HTML test report:
```bash
npx playwright show-report
```
Run tests in headed mode:
```bash
npx playwright test --headed
```
Run a specific test file:
```bash
npx playwright test tests/login.spec.ts
```
---
## 🤖 Continuous Integration (CI)
GitHub Actions workflow automatically runs:
- `npm ci`
- Install Playwright browsers
- All test specs
- Generate report artifacts
On:
- Push to main
- Pull requests
Workflow file: `.github/workflows/playwright.yml`