SwagLabs Ecommerce – QA Automation Kit

Playwright + Cucumber (BDD) Setup

What this is

This is a QA automation setup I’ve been putting together using Playwright + Cucumber.

The goal is pretty simple: build something clean, scalable, and easy to extend without it turning into a mess over time.

It’s not trying to be a huge all-in-one framework. It’s more of a practical base for:

• UI end-to-end testing
• BDD-style scenarios using Gherkin
• Page Object Model structure
• CI execution through GitHub Actions

Why I built it this way

Most automation setups start off fine but eventually become hard to maintain.

Common issues usually look like:

• brittle tests
• duplicated logic everywhere
• unclear structure
• debugging becomes slow and frustrating

So this is structured to stay manageable over time by focusing on:

• modular design
• reusable page objects
• clean step definitions
• centralized page management
• CI-friendly execution

Nothing over-engineered, just something that stays stable as it grows.

Project structure

.
├── .github/workflows/
│   └── playwright.yml          # CI pipeline (GitHub Actions)
│
├── page/                       # Page Object Model layer
│   ├── BasePage.ts
│   ├── CartPage.ts
│   ├── CheckoutPage.ts
│   ├── InventoryPage.ts
│   ├── LoginPage.ts
│   └── PageManager.ts
│
├── services/
│   └── AiService.ts           # AI helpers (auto-healing / RCA)
│
├── tests/e2e/cucumber/
│   ├── features/              # Gherkin feature files
│   │   ├── login.feature
│   │   ├── Inventory.feature
│   │   └── Checkout.feature
│   │
│   ├── steps/                 # Step definitions
│   │   ├── loginStep.ts
│   │   ├── InventoryStep.ts
│   │   └── CheckoutSteps.ts
│   │
│   ├── support/              # Hooks / setup
│   │   ├── hook.ts
│   │   └── world.ts
│
├── cucumber.js
├── playwright.config.ts
├── package.json
├── tsconfig.json
└── README.md

AI Auto-Healing (experimental)

This is something I’ve been experimenting with to reduce flaky tests.

The idea is simple: if a locator fails, the system tries to recover instead of immediately breaking the test.

Example usage

await this.smartClick(this.continueButton, "Continue Button");

What this means

• this.continueButton → the selector for the element
• "Continue Button" → a context label used for debugging and AI-assisted recovery

How it works

• The test first attempts a normal click on the element
• If it fails, a self-healing process is triggered
• AI (via GPT-4o using GitHub Models / Azure token) may suggest a better locator using the provided context
• If recovery succeeds, the test continues
• If it fails, the original error is thrown

Purpose

This is designed to:

• improve locator resilience
• make debugging easier with contextual information
• experiment with AI-assisted test recovery

There’s also ongoing work on adding basic root cause analysis so failures are easier to understand beyond raw stack traces.

How I run it

Scenario	Command
Run All Tests	npm run test:cucumber
Smoke Tests	npm run test:cucumber:tags -- '@smoke'
Headed Mode	HEADLESS=false npm run test:cucumber
Playwright UI	npm run test:cucumber:headed