# thulisa-n/playwright-unified-test-suite architecture

> Architecture diagram of the GitHub repository thulisa-n/playwright-unified-test-suite, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thulisa-n/playwright-unified-test-suite
- Repository: https://github.com/thulisa-n/playwright-unified-test-suite

## Overview

This repository is a Playwright/TypeScript end-to-end and API testing framework, rather than the e-commerce application itself. Its main workflow runs UI suites against SauceDemo across browser projects, with page objects and shared test data supporting functional checks; separate suites cover accessibility and visual baselines. API tests exercise a bundled deterministic mock REST API and validate contracts. The README documents these capabilities, while the sampled excerpts do not show test implementations or fixture wiring, so those relationships are omitted or marked unverified.

Main entry points: [`playwright.config.ts`](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/playwright.config.ts) (Playwright projects), [`tests/ui/login.spec.ts`](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/login.spec.ts) (Login suite), [`tests/ui/products.spec.ts`](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/products.spec.ts) (Products suite), [`tests/ui/cart.spec.ts`](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/cart.spec.ts) (Cart suite)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["UI testing"]
  node_login["Login suite<br/>[login.spec.ts]"]
  node_products["Products suite<br/>[products.spec.ts]"]
  node_cart["Cart suite<br/>[cart.spec.ts]"]
  node_checkout["Checkout suite<br/>[checkout.spec.ts]"]
  node_menu["Menu suite<br/>[menu.spec.ts]"]
  node_loginpo["Login page object<br/>[LoginPage.ts]"]
  node_inventorypo["Inventory page object<br/>[InventoryPage.ts]"]
  node_cartpo["Cart page object<br/>[CartPage.ts]"]
  node_checkoutpo["Checkout page object<br/>[CheckoutPage.ts]"]
  node_productpo["Product detail object"]
  node_menupo["Menu page object<br/>[MenuPage.ts]"]
end

subgraph group_api["API testing"]
  node_api_tests["API contracts<br/>[api.spec.ts]"]
  node_mock["Mock REST API<br/>[server.mjs]"]
end

subgraph group_quality["Quality checks"]
  node_visual["Visual regression<br/>[visual.spec.ts]"]
  node_a11y["Accessibility scans"]
end

subgraph group_support["Framework support"]
  node_config["Playwright projects"]
  node_fixtures["Reusable fixtures<br/>[test-fixtures.ts]"]
  node_users["User test data<br/>[users.ts]"]
  node_productdata["Product test data<br/>[products.ts]"]
end

node_engineer(("Test runner"))
node_saucedemo["SauceDemo"]

node_engineer -->|"runs projects"| node_config
node_config -->|"starts server"| node_mock
node_config -->|"selects suite"| node_login
node_config -->|"selects suite"| node_products
node_config -->|"selects suite"| node_cart
node_config -->|"selects suite"| node_checkout
node_config -->|"selects suite"| node_menu
node_config -->|"selects suite"| node_visual
node_config -->|"selects suite"| node_a11y
node_config -->|"selects suite"| node_api_tests
node_login -->|"tests UI"| node_saucedemo
node_products -->|"tests UI"| node_saucedemo
node_cart -->|"tests UI"| node_saucedemo
node_checkout -->|"tests UI"| node_saucedemo
node_menu -->|"tests UI"| node_saucedemo
node_visual -->|"checks baselines"| node_saucedemo
node_a11y -->|"scans pages"| node_saucedemo
node_api_tests -->|"tests endpoints"| node_mock
node_login -.->|"uses page object"| node_loginpo
node_products -.->|"uses page object"| node_inventorypo
node_products -.->|"uses page object"| node_productpo
node_cart -.->|"uses page object"| node_cartpo
node_checkout -.->|"uses page object"| node_checkoutpo
node_menu -.->|"uses page object"| node_menupo
node_login -.->|"uses test data"| node_users
node_products -.->|"uses test data"| node_productdata
node_login -.->|"may use fixtures"| node_fixtures

click node_config "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/playwright.config.ts"
click node_login "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/login.spec.ts"
click node_products "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/products.spec.ts"
click node_cart "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/cart.spec.ts"
click node_checkout "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/checkout.spec.ts"
click node_menu "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/menu.spec.ts"
click node_loginpo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/LoginPage.ts"
click node_inventorypo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/InventoryPage.ts"
click node_cartpo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/CartPage.ts"
click node_checkoutpo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/CheckoutPage.ts"
click node_productpo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/ProductDetailPage.ts"
click node_menupo "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/MenuPage.ts"
click node_visual "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/visual/visual.spec.ts"
click node_a11y "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/a11y/accessibility.spec.ts"
click node_api_tests "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/api/api.spec.ts"
click node_mock "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/mock-api/server.mjs"
click node_fixtures "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/fixtures/test-fixtures.ts"
click node_users "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/data/users.ts"
click node_productdata "https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/data/products.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_login,node_products,node_cart,node_checkout,node_menu,node_loginpo,node_inventorypo,node_cartpo,node_checkoutpo,node_productpo,node_menupo toneBlue
class node_api_tests,node_mock toneAmber
class node_visual,node_a11y toneMint
class node_config,node_fixtures,node_users,node_productdata toneRose
class node_engineer,node_saucedemo toneIndigo
```

## Components

### UI testing

- [Login suite](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/login.spec.ts): `tests/ui/login.spec.ts`
- [Products suite](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/products.spec.ts): `tests/ui/products.spec.ts`
- [Cart suite](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/cart.spec.ts): `tests/ui/cart.spec.ts`
- [Checkout suite](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/checkout.spec.ts): `tests/ui/checkout.spec.ts`
- [Menu suite](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/ui/menu.spec.ts): `tests/ui/menu.spec.ts`
- [Login page object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/LoginPage.ts): `page-objects/LoginPage.ts`
- [Inventory page object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/InventoryPage.ts): `page-objects/InventoryPage.ts`
- [Cart page object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/CartPage.ts): `page-objects/CartPage.ts`
- [Checkout page object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/CheckoutPage.ts): `page-objects/CheckoutPage.ts`
- [Product detail object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/ProductDetailPage.ts): `page-objects/ProductDetailPage.ts`
- [Menu page object](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/page-objects/MenuPage.ts): `page-objects/MenuPage.ts`

### API testing

- [API contracts](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/api/api.spec.ts): `tests/api/api.spec.ts`
- [Mock REST API](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/mock-api/server.mjs): `mock-api/server.mjs`

### Quality checks

- [Visual regression](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/visual/visual.spec.ts): `tests/visual/visual.spec.ts`
- [Accessibility scans](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/tests/a11y/accessibility.spec.ts): `tests/a11y/accessibility.spec.ts`

### Framework support

- [Playwright projects](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/playwright.config.ts): `playwright.config.ts`
- [Reusable fixtures](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/fixtures/test-fixtures.ts): `fixtures/test-fixtures.ts`
- [User test data](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/data/users.ts): `data/users.ts`
- [Product test data](https://github.com/thulisa-n/playwright-unified-test-suite/blob/main/data/products.ts): `data/products.ts`

### Other components

- **Test runner**
- **SauceDemo**

## Connections

- Test runner → Playwright projects: runs projects (evidence: `README.md`)
- Playwright projects → Mock REST API: starts server (evidence: `playwright.config.ts`)
- Playwright projects → Login suite: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Products suite: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Cart suite: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Checkout suite: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Menu suite: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Visual regression: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → Accessibility scans: selects suite (evidence: `playwright.config.ts`)
- Playwright projects → API contracts: selects suite (evidence: `playwright.config.ts`)
- Login suite → SauceDemo: tests UI (evidence: `README.md`)
- Products suite → SauceDemo: tests UI (evidence: `README.md`)
- Cart suite → SauceDemo: tests UI (evidence: `README.md`)
- Checkout suite → SauceDemo: tests UI (evidence: `README.md`)
- Menu suite → SauceDemo: tests UI (evidence: `README.md`)
- Visual regression → SauceDemo: checks baselines (evidence: `README.md`)
- Accessibility scans → SauceDemo: scans pages (evidence: `README.md`)
- API contracts → Mock REST API: tests endpoints (evidence: `README.md`)
- Login suite → Login page object: uses page object
- Products suite → Inventory page object: uses page object
- Products suite → Product detail object: uses page object
- Cart suite → Cart page object: uses page object
- Checkout suite → Checkout page object: uses page object
- Menu suite → Menu page object: uses page object
- Login suite → User test data: uses test data
- Products suite → Product test data: uses test data
- Login suite → Reusable fixtures: may use fixtures