# karkimilan/saucelabs_e2e architecture

> Architecture diagram of the GitHub repository karkimilan/saucelabs_e2e, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/karkimilan/saucelabs_e2e
- Repository: https://github.com/karkimilan/saucelabs_e2e

## Overview

This repository is a Playwright end-to-end test framework for SauceDemo’s e-commerce checkout, organized around page objects. The principal workflow is the test exercising login, product browsing, cart management, and checkout through completion; the page classes implement those interactions and checks. Product sorting, item removal, login errors, and logout are additional documented-by-source capabilities. The test file itself is present in the tree but was not excerpted, so its specific calls are not verified; workflow links below rely on the README’s POM and checkout-flow description.

Main entry points: [`tests/e2e.spec.ts`](https://github.com/karkimilan/saucelabs_e2e/blob/main/tests/e2e.spec.ts) (Checkout tests), [`pages/Login.ts`](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/Login.ts) (Login page), [`pages/InventoryPage.ts`](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/InventoryPage.ts) (Inventory page), [`pages/ProductPage.ts`](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/ProductPage.ts) (Product page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Checkout workflow"]
  node_e2e["Checkout tests<br/>[e2e.spec.ts]"]
end

subgraph group_pages["Page objects"]
  node_login["Login page<br/>[Login.ts]"]
  node_inventory["Inventory page<br/>[InventoryPage.ts]"]
  node_product["Product page<br/>[ProductPage.ts]"]
  node_cart["Cart page<br/>[CartPage.ts]"]
  node_checkout["Checkout page<br/>[CheckoutPage.ts]"]
end

node_runner(("Playwright runner"))
node_saucedemo["SauceDemo"]

node_runner -->|"runs tests"| node_e2e
node_e2e -->|"exercises"| node_login
node_e2e -->|"exercises"| node_inventory
node_e2e -->|"exercises"| node_product
node_e2e -->|"exercises"| node_cart
node_e2e -->|"exercises"| node_checkout
node_login -->|"interacts with"| node_saucedemo
node_inventory -->|"interacts with"| node_saucedemo
node_product -->|"interacts with"| node_saucedemo
node_cart -->|"interacts with"| node_saucedemo
node_checkout -->|"interacts with"| node_saucedemo

click node_e2e "https://github.com/karkimilan/saucelabs_e2e/blob/main/tests/e2e.spec.ts"
click node_login "https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/Login.ts"
click node_inventory "https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/InventoryPage.ts"
click node_product "https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/ProductPage.ts"
click node_cart "https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/CartPage.ts"
click node_checkout "https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/CheckoutPage.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_e2e toneBlue
class node_login,node_inventory,node_product,node_cart,node_checkout toneAmber
class node_runner,node_saucedemo toneIndigo
```

## Components

### Checkout workflow

- [Checkout tests](https://github.com/karkimilan/saucelabs_e2e/blob/main/tests/e2e.spec.ts): `tests/e2e.spec.ts`

### Page objects

- [Login page](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/Login.ts): `pages/Login.ts`
- [Inventory page](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/InventoryPage.ts): `pages/InventoryPage.ts`
- [Product page](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/ProductPage.ts): `pages/ProductPage.ts`
- [Cart page](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/CartPage.ts): `pages/CartPage.ts`
- [Checkout page](https://github.com/karkimilan/saucelabs_e2e/blob/main/pages/CheckoutPage.ts): `pages/CheckoutPage.ts`

### Other components

- **Playwright runner**
- **SauceDemo**

## Connections

- Playwright runner → Checkout tests: runs tests (evidence: `readme.md`)
- Checkout tests → Login page: exercises (evidence: `readme.md`)
- Checkout tests → Inventory page: exercises (evidence: `readme.md`)
- Checkout tests → Product page: exercises (evidence: `readme.md`)
- Checkout tests → Cart page: exercises (evidence: `readme.md`)
- Checkout tests → Checkout page: exercises (evidence: `readme.md`)
- Login page → SauceDemo: interacts with (evidence: `pages/Login.ts`)
- Inventory page → SauceDemo: interacts with (evidence: `pages/InventoryPage.ts`)
- Product page → SauceDemo: interacts with (evidence: `pages/ProductPage.ts`)
- Cart page → SauceDemo: interacts with (evidence: `pages/CartPage.ts`)
- Checkout page → SauceDemo: interacts with (evidence: `pages/CheckoutPage.ts`)