SauceDemo Playwright Testing Framework

A comprehensive TypeScript-based testing framework for the SauceDemo website using Playwright.

Project Structure

├── src/
│   ├── pages/              # Page Object Models
│   │   ├── LoginPage.ts
│   │   ├── ProductsPage.ts
│   │   ├── CartPage.ts
│   │   └── CheckoutPage.ts
│   └── fixtures/           # Test data and fixtures
│       ├── testData.ts
│       └── currentUser.ts  # TEST_USER env resolution
├── tests/                  # Test suites
│   ├── login.spec.ts
│   ├── products.spec.ts
│   ├── cart.spec.ts
│   ├── checkout.spec.ts
│   ├── performance.spec.ts
│   └── e2e.spec.ts
├── .github/workflows/ci.yml
├── playwright.config.ts    # Playwright configuration
└── tsconfig.json          # TypeScript configuration

Features

• Page Object Model Pattern: Clean separation between page elements and test logic
• TypeScript Support: Full type safety for tests
• Multiple Browsers: Tests run against Chromium, Firefox, and WebKit
• Mobile Testing: Mobile Chrome and Safari viewport configurations
• UI Issue Detection: Broken product images and cart bugs for problem_user (always runs)
• Comprehensive Test Suites:
  • Login validation (including locked out users)
  • Product browsing and filtering
  • Shopping cart operations
  • Checkout process
  • UI/visual bug detection
  • End-to-end purchase flows

Assignment Compliance

This project is designed to satisfy the Foundation Health QA Automation Tech Test requirements:

• Framework: Playwright
• Language: TypeScript
• Test URL: https://www.saucedemo.com
• Login flow: Automated in tests/login.spec.ts
• Additional critical coverage:
  • Product browsing, sorting, and details validation
  • Cart operations, totals calculation, and remove/continue shopping behavior
  • Checkout form validation, order summary, and completion flow
  • End-to-end purchase flow from login to order confirmation
• Meaningful assertions: Validates URLs, element visibility, item and cart counts, total values, error messages, and order completion text
• Documentation: This README.md includes setup, run instructions, and a To Do section

User-Specific Coverage

Most tests use CURRENT_USER from src/fixtures/currentUser.ts, which defaults to standard_user. Override with the TEST_USER environment variable (see Running Tests).

• standard_user (default): full workflow coverage for shopping, checkout, and order completion; 39 of 40 tests run (1 performance-specific test is skipped)
• performance_glitch_user: same coverage as standard user, plus the slow inventory load test in tests/performance.spec.ts
• problem_user: the Problem User Tests in tests/products.spec.ts always run — they log in directly as problem_user regardless of the TEST_USER setting
• locked_out_user: locked-out login is validated directly in tests/login.spec.ts using TEST_USERS.LOCKED_USER (no TEST_USER override required)

Installation

All dependencies are already installed. If you need to reinstall:

npm install
npx playwright install

Running Tests

Run all tests

npm test

Run tests in UI mode (interactive)

npm run test:ui

Run tests in headed mode (visible browser)

npm run test:headed

Run tests with debugging

npm run test:debug

Run tests for specific browser

npm run test:chromium
npm run test:firefox
npm run test:webkit

Run tests for mobile viewports

npm run test:mobile

Run tests for specific test suite

npm test tests/login.spec.ts          # Login tests
npm test tests/products.spec.ts       # Product browsing tests (includes problem_user tests)
npm test tests/cart.spec.ts           # Shopping cart tests
npm test tests/checkout.spec.ts       # Checkout process tests
npm test tests/performance.spec.ts    # Slow-load detection (when TEST_USER=performance_glitch_user)
npm test tests/e2e.spec.ts            # End-to-end purchase flows

Run tests with a specific SauceDemo user

TEST_USER=standard_user npm test -- --project=chromium
TEST_USER=performance_glitch_user npm test -- --project=chromium
TEST_USER=problem_user npm test -- --project=chromium
TEST_USER=locked_out_user npm test -- --project=chromium

View test report

npm run test:report

Test Users

The SauceDemo website provides the following test accounts:

Username	Password	Notes
standard_user	secret_sauce	Standard account
locked_out_user	secret_sauce	Account is locked
problem_user	secret_sauce	Account with UI issues
performance_glitch_user	secret_sauce	Slow page loads

Test Coverage Summary

• Total Tests: 40 individual tests (39 run with default standard_user; 1 performance-specific test is skipped)
• Browser Coverage: Chromium, Firefox, WebKit
• Mobile Testing: Chrome Mobile (Pixel 5), Safari Mobile (iPhone 12)
• Features Tested:
  • User authentication scenarios
  • Product discovery and filtering
  • Shopping cart management
  • Checkout validation
  • End-to-end purchase flows
  • Configurable user account testing via TEST_USER
  • Order totals calculation
  • Slow inventory load detection (performance_glitch_user)
  • Broken product image detection (problem_user)
  • Cart add bug detection (problem_user)

Known SauceDemo Issues

The problem_user account is known to have UI quirks on SauceDemo. This framework automates detection of two of them:

1. Image loading issues — all product images use the broken sl-404 placeholder (tests/products.spec.ts, always runs)
2. Cart add bug — attempting to add 3 items only adds 2; the third product stays on "Add to cart" and never appears in the cart (tests/products.spec.ts, always runs)

Other commonly reported problem_user issues (not currently covered by automated tests):

• UI rendering glitches — visual elements may display incorrectly while underlying functionality still works

Test Suites

Login Tests (tests/login.spec.ts)

• Form element visibility
• Successful login with valid credentials
• Login rejection with invalid credentials
• Locked out user handling with comprehensive validation
• Empty field validation
• Error message persistence and retry behavior

Product Tests (tests/products.spec.ts)

• Display all products
• Product details visibility
• Add single product to cart
• Add multiple products to cart
• Navigation to cart
• Sorting by name (A-Z, Z-A)
• Sorting by price (Low-High, High-Low)
• Broken product images for problem_user
• Cart add bug for problem_user

Cart Tests (tests/cart.spec.ts)

• Empty cart display
• Display added items (single and multiple)
• Remove items from cart (single and multiple)
• Continue shopping functionality
• Total calculations (subtotal, tax, total)
• Proceed to checkout

Checkout Tests (tests/checkout.spec.ts)

• Checkout form validation
• Missing field validation
• Proceed to step two
• Order completion
• Checkout cancellation
• Total verification between cart and checkout

Performance Glitch User Tests (tests/performance.spec.ts)

• Detect slow inventory page loads for performance_glitch_user (skipped unless TEST_USER=performance_glitch_user)
• Keeps normal test timeouts unchanged for standard_user
• Isolates slow-load detection to a dedicated test

Problem User Tests (tests/products.spec.ts — Problem User Tests describe block)

• Broken product images for problem_user (always runs — logs in directly as problem_user)
• Cart add bug when attempting to add 3 items (always runs)

E2E Tests (tests/e2e.spec.ts)

• Complete purchase flow from login to confirmation
• Add, remove, and re-add items
• Purchase flow using CURRENT_USER (configurable via TEST_USER)
• Total calculations for multiple items

Page Object Models

LoginPage

• navigate() - Go to login page
• login(username, password) - Perform login
• getErrorMessage() - Get error message text
• isErrorMessageVisible() - Check error visibility

ProductsPage

• navigate() - Go to products page
• getProductCount() - Get number of products
• getProductByName(productName) - Find product by name
• addProductToCart(productName) - Add product to cart
• isProductInCart(productName) - Check if product is in cart
• getCartItemCount() - Get cart item count
• goToCart() - Navigate to cart
• sortBy(sortOption) - Sort products
• getAllProductNames() - Get all product names
• getAllProductPrices() - Get all product prices

CartPage

• navigate() - Go to cart page
• getCartItemCount() - Get number of items
• getCartItemNames() - Get item names
• removeItemFromCart(productName) - Remove item from cart
• isCartEmpty() - Check if cart is empty
• continueShopping() - Continue shopping button
• proceedToCheckout() - Go to checkout
• getSubtotal() - Get subtotal amount
• getTax() - Get tax amount
• getTotal() - Get total amount

CheckoutPage

• navigateToCheckoutOne() - Go to checkout step 1
• navigateToCheckoutTwo() - Go to checkout step 2
• fillCheckoutInfo(firstName, lastName, postalCode) - Fill checkout form
• continueToNextStep() - Proceed to step 2
• completeOrder() - Complete the order
• getErrorMessage() - Get error message
• isErrorMessageVisible() - Check error visibility
• cancelCheckout() - Cancel checkout
• getSubtotal(), getTax(), getTotal() - Get totals

Configuration

Playwright Config (playwright.config.ts)

• Base URL: https://www.saucedemo.com
• Test Directory: ./tests
• Reporter: HTML
• Screenshots: Captured on failure
• Videos: Retained on failure
• Trace: Captured on first retry

TypeScript Config (tsconfig.json)

• Target: ES2020
• Module: NodeNext
• Module Resolution: NodeNext
• Strict Mode: Enabled
• Output Directory: ./dist

Debugging

Using VS Code Debugger

1. Set breakpoints in test files
2. Run: npm run test:debug
3. Step through the code

Using Playwright Inspector

npm run test:debug

To Do

Below are suggested upgrades and maintenance items to make the framework more robust, maintainable, and CI-ready. Items are grouped by priority with short implementation notes.

High priority

• Add CI browser matrix: split .github/workflows/ci.yml into per-browser jobs (chromium/firefox/webkit) for faster feedback and clearer failure isolation. HTML report artifact upload is already configured.
• Add pre-commit hooks (husky + lint-staged) to run npm run lint:fix and npm run format on staged files.
• Add automated dependency updates: enable Dependabot or Renovate to keep Playwright/TypeScript/devDeps current.

Medium priority

• Harden flaky-test handling: collect flakiness metrics, tune retries and timeouts, and add a dedicated flaky-test triage job to mark/track unstable tests.
• Add a Dockerfile and docker-compose snippet to run tests reproducibly in CI or locally (use npx playwright install --with-deps).
• Add visual regression testing (Playwright snapshots, Percy, or Chromatic) focused on problem_user image and cart badge bugs.
• Add dedicated problem_user tests for checkout behavior under visual glitches.
• Add accessibility checks (axe-playwright) to run basic a11y checks during CI on key pages (login, cart, checkout).

Low priority / Nice to have

• Add performance and synthetic monitoring tests (Lighthouse or Playwright timings) for performance_glitch_user scenarios and baseline comparisons.
• Add structured test data management: centralize fixtures, support multiple locales, and add factories (faker) for randomized scenarios.
• Add richer reporting: integrate with TestRail/Jira, generate JUnit/Allure reports, or push results to a dashboard.
• Add security and license scanning to CI (npm audit, snyk) and a dependency policy for production-grade repos.

Repository hygiene

• Add CONTRIBUTING.md, CODE_OF_CONDUCT.md, and a PR template to document expectations for contributors.
• Add badge(s) at the top of this README for CI status and test report link(s).
• Remove any remaining unused code (example: earlier unused CheckoutPage helpers were removed) and keep npm run typecheck in CI to catch type regressions.

Developer ergonomics

• Document npm scripts for common tasks (see Development Scripts).
• Troubleshooting guidance is in Troubleshooting below.

Development Scripts

npm run typecheck     # Type-check without emitting files
npm run lint          # Run ESLint
npm run lint:fix      # Run ESLint with auto-fix
npm run format        # Format source and test files with Prettier
npm run format:check  # Check formatting without writing
npm run clean         # Remove node_modules, dist, test-results, and playwright-report

Best Practices

1. Use Page Objects: Always interact with pages through Page Object Models
2. Clear Test Names: Use descriptive test names that explain what is being tested
3. Arrange-Act-Assert: Structure tests with clear setup, execution, and verification
4. Wait for Elements: Playwright automatically waits for elements, but use explicit waits if needed
5. Test Data: Use constants from testData.ts and CURRENT_USER from currentUser.ts for consistency

Continuous Integration

The framework is configured for CI/CD with:

• GitHub Actions workflow on push/PR to main (typecheck, lint, full Playwright run, plus a dedicated performance_glitch_user step)
• Retry support (2 retries in CI)
• 2 workers in CI
• Screenshot and video capture on failure
• Trace collection on first retry
• HTML report uploaded as a workflow artifact

Troubleshooting

Browser binaries not found

npx playwright install
npx playwright install-deps

Tests timing out

• Increase timeout in playwright.config.ts
• Check SauceDemo website availability

Selector not found

• Verify the website hasn't changed
• Use npm run test:headed to see what's happening
• Update selectors in page objects if needed

Additional Resources

• Playwright Documentation
• Page Object Model Pattern
• SauceDemo Website