🎭 Playwright QA Automation Framework

A professional QA automation framework built with Playwright and JavaScript, covering API and UI testing with multi-browser support, detailed reporting, and clean project structure.

Built by Jhon Carlos Acevedo Mendoza — QA Analyst with experience in SaaS platforms and international health applications.

---

📁 Project Structure

playwright-qa-framework/
├── tests/
│   ├── api/
│   │   └── api.spec.js        # API tests — JSONPlaceholder REST API
│   └── ui/
│       └── ui.spec.js         # UI tests — Books to Scrape demo site
├── utils/
│   └── helpers.js             # Reusable QA utility functions
├── reports/                   # Auto-generated test reports (HTML + JSON)
├── playwright.config.js       # Playwright configuration
├── package.json
└── README.md

---

✅ What's Tested

🔌 API Tests (tests/api/api.spec.js)

Target: JSONPlaceholder — public REST API

Endpoint	Methods Covered
/posts	GET all, GET by ID, POST, PUT, PATCH, DELETE, Filter by userId
/users	GET all, GET by ID, Email format validation, Nested /posts
/comments	GET all, Filter by postId, Nested from /posts

What's validated:

• HTTP status codes (200, 201, 404)
• Response schema and data types
• Content-Type headers
• Data integrity and filtering logic
• Email format via regex

---

🖥️ UI Tests (tests/ui/ui.spec.js)

Target: Books to Scrape — safe public demo site

Area	Tests
Homepage	Book count, sidebar categories, star ratings, prices
Navigation	Pagination, category filtering
Product Detail	Title, price, availability, description
Accessibility	Load time < 5s, header visibility, mobile viewport

---

🌐 Browser Coverage

Browser	Status
Chromium (Desktop)	✅
Firefox (Desktop)	✅
Mobile Chrome (Pixel 5)	✅

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• npm

Installation

# Clone the repository
git clone https://github.com/your-username/playwright-qa-framework.git
cd playwright-qa-framework

# Install dependencies
npm install

# Install Playwright browsers
npm run install:browsers

---

▶️ Running Tests

# Run all tests
npm test

# Run only API tests
npm run test:api

# Run only UI tests
npm run test:ui

# Run with browser visible (headed mode)
npm run test:headed

# Run on specific browser
npm run test:chrome
npm run test:firefox
npm run test:mobile

# Open HTML report after test run
npm run report

---

📊 Reports

After each run, reports are generated in the reports/ folder:

File	Description
reports/html-report/	Interactive HTML report (open in browser)
reports/results.json	Machine-readable JSON results

Screenshots and videos are captured automatically on failure.

---

🛠️ Utilities (utils/helpers.js)

Function	Description
hasRequiredKeys(obj, keys)	Validates object schema
isValidEmail(email)	Email format validation
isSuccessStatus(status)	Checks if HTTP status is 2xx
randomTestString(prefix)	Generates unique test identifiers
timestamp()	Returns ISO timestamp
wait(ms)	Async delay helper

---

📌 Key Concepts Demonstrated

• ✅ REST API testing (GET, POST, PUT, PATCH, DELETE)
• ✅ Schema validation and data type checks
• ✅ UI testing with locators and assertions
• ✅ Cross-browser and mobile testing
• ✅ Parallel test execution
• ✅ Automatic retry on CI
• ✅ HTML + JSON reporting
• ✅ Screenshot and video capture on failure
• ✅ Reusable utilities and helper functions

---

📄 License

MIT © Jhon Carlos Acevedo Mendoza