QA Automation Portfolio

Playwright + TypeScript + Groq AI + GitHub Actions CI/CD

Portfolio project demonstrating AI-driven QA automation. Target app: automationexercise.com — public e-commerce practice site.

---

Test Results

Suite	Tests	Status
E2E	34	✅ Passing
API	28	✅ Passing
Performance	10	✅ Passing
AI	10	✅ Passing
Total	82	✅ 77+ passing

---

Tech Stack

Tool	Purpose
Playwright	E2E, API, mobile, performance testing
TypeScript	Type-safe test code
Groq AI (llama-3.3-70b)	AI test generation + result analysis
GitHub Actions	CI/CD — runs on push, PR, daily schedule
Docker	Containerized test execution
Page Object Model	Maintainable test architecture

---

Project Structure

qa-automation-portfolio/
├── tests/
│   ├── e2e/
│   │   └── ecommerce.spec.ts       # Homepage, products, cart, auth, mobile
│   ├── api/
│   │   └── products-api.spec.ts    # REST API endpoint validation
│   ├── ai/
│   │   └── ai-test-generator.spec.ts # Groq AI test generation + analysis
│   └── performance/
│       └── load-performance.spec.ts  # FCP, load time, image analysis
├── pages/
│   └── index.ts                    # Page Object Model
├── .github/
│   └── workflows/
│       └── qa-tests.yml            # CI/CD pipeline
├── Dockerfile
├── playwright.config.ts
└── .env.example

---

Quick Start

# Clone
git clone https://github.com/yourusername/qa-automation-portfolio
cd qa-automation-portfolio

# Install
npm install
npx playwright install chromium

# Configure environment
cp .env.example .env
# Add your GROQ_API_KEY to .env (get it free at console.groq.com)

# Run all tests
npm test

# Run specific suite
npm run test:e2e
npm run test:api
npm run test:performance
npm run test:ai

# View HTML report
npm run report

# Interactive UI mode
npm run test:ui

---

Environment Variables

Create a .env file based on .env.example:

BASE_URL=https://automationexercise.com
GROQ_API_KEY=your_groq_api_key_here

Get a free Groq API key at console.groq.com.

Note: The AI test suite falls back to predefined scenarios if no API key is provided — all other suites work without a key.

---

Test Suites

E2E Tests (tests/e2e/)

Full user journey tests using Page Object Model:

Test	Description
Homepage loads correctly	Title, logo, nav links, featured products
No broken images	Validates all img elements load
Search functionality	Search returns relevant results
Category navigation	Women/Men/Kids category filtering
Product detail page	Name, price, availability visible
Add to cart	Product added via hover overlay
Cart updates	Cart count increments correctly
Cart persists	Items survive page navigation
Remove from cart	Item deletion works
Login validation	Empty form, invalid credentials
Mobile responsiveness	375px viewport, no horizontal overflow
Page load timing	Homepage < 15s, Products < 6s

API Tests (tests/api/)

Direct REST API validation against automationexercise.com/api:

Endpoint	Method	Validated
/productsList	GET	200, product schema, categories
/productsList	POST	405 method not allowed
/brandsList	GET	200, brands array
/brandsList	PUT	405 method not allowed
/searchProduct	POST	Results for valid query
/searchProduct	GET	405 method not allowed
/verifyLogin	POST	404 for invalid credentials
/verifyLogin	POST	400 for missing params
/verifyLogin	DELETE	405 method not allowed
Response times	—	Products + Search API < 3s

AI Tests (tests/ai/)

Groq llama-3.3-70b-versatile model integration:

• Scenario generation — AI generates prioritized test scenarios from feature descriptions
• Result analysis — AI explains why tests pass/fail and suggests fixes
• Bug detection — AI analyzes DOM metrics and flags UX concerns

Example AI output:

🤖 AI-Generated Test Scenarios for "Shopping Cart":

1. [CRITICAL] Add to Cart
   Steps: Login → Search product → Add to cart
   Expected: Product added successfully
   Risk: Cart functionality

2. [HIGH] View Cart
   Steps: Add product → Click cart icon → Verify display
   Expected: All products shown with correct price
   Risk: Cart display

Performance Tests (tests/performance/)

Real browser metrics via Performance API:

Metric	Budget	Result
First Contentful Paint	< 2500ms	~750ms ✅
DOM Content Loaded	< 5000ms	~800ms ✅
Page Load Complete	< 6000ms	measured ✅
Products page load	< 6000ms	~1500ms ✅
Large images (>500KB)	flag only	1 found ⚠️
Multi-page degradation	< 150%	passing ✅

---

QA Findings

Issues discovered during testing on automationexercise.com:

Severity	Finding	Details
⚠️ Medium	Large image asset	Image #29 is 602KB — should be compressed/WebP
⚠️ Medium	Multiple H1 tags	3 H1 elements found — SEO issue, should be 1
ℹ️ Low	147 links on homepage	May impact render performance
ℹ️ Low	Mobile hover blocked by ads	Ad iframes intercept pointer events on cart overlay

---

CI/CD Pipeline

Tests run automatically on:

• Every push to main or develop
• Every pull request (posts results as PR comment)
• Daily at 8am UTC (scheduled)
• Manual trigger with suite selection

Push → GitHub Actions → Install → Run all suites → Upload HTML report artifact

To add the Groq API key in GitHub: Settings → Secrets and variables → Actions → New secret → GROQ_API_KEY

---

Docker

# Build
npm run docker:build

# Run all tests
docker run --rm \
  -e GROQ_API_KEY=your_key \
  -v $(pwd)/playwright-report:/app/playwright-report \
  qa-portfolio

# Run specific suite
docker run --rm qa-portfolio npx playwright test tests/e2e

---

Skills Demonstrated

Skill	Location
Playwright E2E automation	tests/e2e/
Page Object Model	pages/index.ts
TypeScript	Entire codebase
REST API testing	tests/api/
AI integration (Groq LLM)	tests/ai/
Performance testing	tests/performance/
CI/CD (GitHub Actions)	.github/workflows/
Docker	Dockerfile
Test reporting	HTML + JSON output
Bug reporting	QA Findings section above