Cursor Playwright Project

End-to-end test automation for the Sauce Demo e-commerce application, built with Playwright and the Page Object Model (POM) pattern in JavaScript.

Overview

This project validates core shopping workflows on Sauce Demo, including login, inventory browsing, cart management, checkout, and navigation. Tests are organized by feature area and tagged for flexible execution of happy paths, unhappy paths, or full-suite runs.

Target application: https://www.saucedemo.com

Features

• Page Object Model — reusable page classes with centralized selectors
• 49 automated tests — happy path, unhappy path, and access-control coverage
• Tagged test suites — run by flow type or by page
• Externalized selectors — locators stored in selectors/selectors.json
• Environment-based configuration — credentials and checkout data via .env
• Screenshots on every test — latest screenshot retained at screenshots/latest.png
• Visual test mode — headed browser with slowed actions for debugging

Project Structure

CursorPlaywrightProject/
├── pages/                  # Page Object Model classes
│   ├── BasePage.js
│   ├── LoginPage.js
│   ├── StoreFrontPage.js
│   ├── ProductDetailPage.js
│   ├── CartPage.js
│   ├── CheckoutPage.js
│   └── ProfilePage.js
├── selectors/
│   └── selectors.json      # Centralized element selectors
├── tests/e2e/              # Test specifications
├── utils/                  # Helpers, test data, and tags
├── scripts/                # Suite runner and visual mode scripts
├── playwright.config.js
└── globalTeardown.js       # Screenshot cleanup after each run

Prerequisites

• Node.js 18 or later
• npm

Setup

1. Clone the repository:

   git clone https://github.com/Beck19/CursorPlaywrightProject.git
   cd CursorPlaywrightProject

2. Install dependencies (Chromium is installed automatically via postinstall):

   npm install

3. Create your environment file:

   cp .env.example .env

4. Update .env if needed. The default values work with the public Sauce Demo site.

Running Tests

Full suite

npm test

By flow type

Command	Description
npm run test:happy	Happy path tests (27)
npm run test:unhappy	Error handling and edge cases (22)

By page / feature

Command	Description
npm run test:login	Login page
npm run test:inventory	Inventory / storefront
npm run test:product-detail	Product detail page
npm run test:cart	Cart page
npm run test:checkout	Checkout flow
npm run test:navigation	Profile menu and navigation
npm run test:access-control	Route guard tests
npm run test:user-flows	End-to-end user journeys

Debug and visual modes

Command	Description
npm run test:headed	Run with a visible browser (parallel)
npm run test:visual	Visible browser, one test at a time, 250ms slowMo
npm run test:ui	Playwright UI mode

Pass additional Playwright flags after --:

npm run test:happy -- --headed
npm run test:login -- tests/e2e/login.spec.js

Adjust visual mode speed:

PW_SLOW_MO=500 npm run test:visual

Environment Variables

Variable	Default	Description
BASE_URL	https://www.saucedemo.com	Application under test
STANDARD_USER	standard_user	Valid login username
PASSWORD	secret_sauce	Login password
CHECKOUT_FIRST_NAME	John	Checkout first name
CHECKOUT_LAST_NAME	Doe	Checkout last name
CHECKOUT_POSTAL_CODE	12345	Checkout postal code
PW_SLOW_MO	0 (250 in visual mode)	Delay between browser actions (ms)

Test Coverage

Happy paths

Login, logout, product browsing, sorting, add/remove cart items, product detail navigation, checkout completion, and profile menu actions.

Unhappy paths

Invalid credentials, missing form fields, empty cart edge cases, duplicate add-to-cart prevention, checkout validation errors, error_user checkout failure, and unauthenticated route access.

Reports and Artifacts

• HTML report: generated after each run — open with npx playwright show-report
• Latest screenshot: screenshots/latest.png (most recent test captured)
• Traces: captured on first retry in CI

License

This project is provided for educational and demonstration purposes.