A production-grade test automation framework built with Playwright and the Page Object Model (POM) pattern, covering the full e-commerce flow on SauceDemo. Tests run across 3 browsers with CI/CD via GitHub Actions, visual regression via Percy, and AI-assisted bug logging via Jira MCP integration.

playwright-qa-project/
├── pages/
│   ├── LoginPage.js          # Login page actions & locators
│   ├── InventoryPage.js      # Products page actions & locators
│   ├── CartPage.js           # Cart page actions & locators
│   └── CheckoutPage.js       # Checkout page actions & locators
├── tests/
│   ├── login.spec.js         # Login validation tests (9 tests)
│   ├── inventory.spec.js     # Product listing & sort tests (18 tests)
│   ├── cart.spec.js          # Cart management tests (9 tests)
│   ├── checkout.spec.js      # Checkout flow & validation tests (12 tests)
│   └── visual.spec.js        # Percy visual regression tests
├── .github/
│   └── workflows/
│       └── ci.yml            # GitHub Actions pipeline
├── playwright.config.js      # Multi-browser configuration
└── README.md

All tests run across Chromium, Firefox and WebKit (Safari).

This framework was built using a modern AI-assisted QA workflow — not just written manually line by line.

• Generated POM class scaffolding from plain comments
• Suggested locators, assertions, and test data
• Assisted with CI/CD YAML configuration and debugging
• Helped with git commits and pipeline fixes

The most advanced feature of this framework — automatic AI-triggered bug logging into Jira.

How it works:

1. A test failure or bug is identified during exploration
2. GitHub Copilot Agent Mode (MCP) is prompted with the bug details
3. Copilot automatically creates a Jira ticket with:
   • Bug title and description
   • Steps to reproduce
   • Screenshot evidence attached
   • Severity and priority set
4. Ticket appears instantly in Jira backlog — zero manual effort

💡 This demonstrates how AI tooling can eliminate the manual overhead of bug logging — one of the most time-consuming parts of a QA engineer's workflow.

Tests run automatically on every push via GitHub Actions.

• ✅ Runs on: push and pull_request to main
• ✅ Browsers: Chromium, Firefox, WebKit
• ✅ 10 successful pipeline runs and counting
• ✅ HTML report uploaded as artifact on failure
• ✅ Pipeline currently green across all browsers

Each page class encapsulates:

• Locators — all selectors defined in the constructor
• Actions — reusable methods for user interactions
• No assertions — assertions stay in spec files for separation of concerns

Example:

// pages/LoginPage.js
export class LoginPage {
  constructor(page) {
    this.usernameInput = page.locator('#user-name');
    this.passwordInput = page.locator('#password');
    this.loginButton = page.locator('#login-button');
  }

  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

This framework was built iteratively — not from a tutorial:

# Clone the repo
git clone https://github.com/Ahtsham-QA/Ahtsham-QA.git
cd Ahtsham-QA

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

# Run all tests
npx playwright test

# Run all tests headed (visible browser)
npx playwright test --headed

# Run specific spec file
npx playwright test tests/login.spec.js

# Run on specific browser
npx playwright test --project=chromium

# View HTML report
npx playwright show-report

Ahtsham — QA Automation Lead & Consultant | AI-Assisted Testing | Playwright | CSM

LinkedIn · GitHub

MIT