# visanu1996/playwright-pack architecture

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

- Interactive diagram: https://gitdiagram.com/visanu1996/playwright-pack
- Repository: https://github.com/visanu1996/playwright-pack

## Overview

Playwright Pack is a collection of browser and mobile automation examples, principally exercising SauceDemo through Python and TypeScript page objects. In the Python flow, a session loads configuration and test data, creates browser and app-factory objects, and centralized SauceDemo flows drive login, product selection, cart review, and checkout. TypeScript also includes SauceDemo pages plus API, upload, and Material X examples. The graph follows documented or indexed relationships; dashed links with no evidence path indicate likely test-to-page usage not shown in the excerpts.

Main entry points: [`SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py) (Purchase flow), [`SAUCEDEMO-Playwright/Python/resources/base_page.py`](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/base_page.py) (Base page), [`SAUCEDEMO-Playwright/Python/utils/driver_factory.py`](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/driver_factory.py) (Browser manager), [`SAUCEDEMO-Playwright/Python/utils/session_manage.py`](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/session_manage.py) (Session setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_py_runtime["Python Runtime"]
  node_py_session["Session setup<br/>[session_manage.py]"]
  node_py_loader["Config loader<br/>[file_loader.py]"]
  node_py_driver["Browser manager<br/>[driver_factory.py]"]
  node_py_app["App factory<br/>[app_factory.py]"]
  node_py_base["Base page<br/>[base_page.py]"]
  node_python_config["Python settings"]
end

subgraph group_py_sauce["Python SauceDemo"]
  node_py_flows["Purchase flow<br/>[sauce_common.py]"]
  node_py_login["Login<br/>[login_page.py]"]
  node_py_products["Product catalog<br/>[product_page.py]"]
  node_py_cart["Cart<br/>[cart_page.py]"]
  node_py_checkout["Checkout<br/>[checkout_page.py]"]
end

subgraph group_ts_core["TypeScript Core"]
  node_ts_driver["Driver factory<br/>[DriverFactory.ts]"]
  node_ts_base["Base page<br/>[BasePage.ts]"]
  node_ts_config["TypeScript settings<br/>[config.ts]"]
  node_ts_data["Test data<br/>[testdata.ts]"]
end

subgraph group_ts_sauce["TypeScript SauceDemo"]
  node_ts_login["Login<br/>[LoginPage.ts]"]
  node_ts_products["Product catalog<br/>[ProductPage.ts]"]
  node_ts_cart["Cart<br/>[CartPage.ts]"]
  node_ts_checkout["Checkout<br/>[CheckoutPage.ts]"]
end

subgraph group_ts_examples["TypeScript Examples"]
  node_ts_api["Booker API<br/>[RestfulBooker.ts]"]
  node_ts_upload["Upload page<br/>[UploadPage.ts]"]
  node_ts_mobile_main["Material X page<br/>[MainPage.ts]"]
  node_ts_mobile_common["Material X common<br/>[CommonMat.ts]"]
end

node_tester(("Test author"))
node_sauce_site["SauceDemo site"]

node_py_session -->|"loads settings"| node_py_loader
node_py_session -->|"creates manager"| node_py_driver
node_py_session -->|"creates factory"| node_py_app
node_py_base -->|"uses browser"| node_py_driver
node_py_app -->|"opens pages"| node_py_driver
node_py_flows -->|"calls login"| node_py_login
node_py_flows -->|"adds products"| node_py_products
node_py_flows -->|"checks cart"| node_py_cart
node_py_flows -->|"fills checkout"| node_py_checkout
node_py_login -->|"inherits"| node_py_base
node_py_products -->|"inherits"| node_py_base
node_py_cart -->|"inherits"| node_py_base
node_py_checkout -->|"inherits"| node_py_base
node_tester -.->|"exercises"| node_py_flows
node_py_driver -.->|"drives browser"| node_sauce_site
node_ts_driver -->|"reads settings"| node_ts_config
node_ts_base -->|"uses settings"| node_ts_config
node_ts_base -->|"uses test data"| node_ts_data
node_ts_api -->|"uses payloads"| node_ts_data
node_ts_mobile_main -->|"extends"| node_ts_mobile_common
node_tester -.->|"exercises"| node_ts_login
node_tester -.->|"exercises"| node_ts_api
node_tester -.->|"exercises"| node_ts_upload
node_tester -.->|"exercises"| node_ts_mobile_main

click node_py_session "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/session_manage.py"
click node_py_loader "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/file_loader.py"
click node_py_driver "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/driver_factory.py"
click node_py_app "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/app_factory.py"
click node_py_base "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/base_page.py"
click node_python_config "https://github.com/visanu1996/playwright-pack/tree/master/SAUCEDEMO-Playwright/Python/config"
click node_py_flows "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py"
click node_py_login "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/login_page.py"
click node_py_products "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/product_page.py"
click node_py_cart "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/cart_page.py"
click node_py_checkout "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/checkout_page.py"
click node_ts_driver "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/core/DriverFactory.ts"
click node_ts_base "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/core/BasePage.ts"
click node_ts_config "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/config/config.ts"
click node_ts_data "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/config/testdata.ts"
click node_ts_login "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/LoginPage.ts"
click node_ts_products "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/ProductPage.ts"
click node_ts_cart "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CartPage.ts"
click node_ts_checkout "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CheckoutPage.ts"
click node_ts_api "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/api/RestfulBooker.ts"
click node_ts_upload "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/expandtesting/UploadPage.ts"
click node_ts_mobile_main "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/MainPage.ts"
click node_ts_mobile_common "https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/CommonMat.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_py_session,node_py_loader,node_py_driver,node_py_app,node_py_base,node_python_config toneBlue
class node_py_flows,node_py_login,node_py_products,node_py_cart,node_py_checkout toneAmber
class node_ts_driver,node_ts_base,node_ts_config,node_ts_data toneMint
class node_ts_login,node_ts_products,node_ts_cart,node_ts_checkout toneRose
class node_ts_api,node_ts_upload,node_ts_mobile_main,node_ts_mobile_common,node_tester,node_sauce_site toneIndigo
```

## Components

### Python Runtime

- [Session setup](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/session_manage.py): `SAUCEDEMO-Playwright/Python/utils/session_manage.py`
- [Config loader](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/file_loader.py): `SAUCEDEMO-Playwright/Python/utils/file_loader.py`
- [Browser manager](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/driver_factory.py): `SAUCEDEMO-Playwright/Python/utils/driver_factory.py`
- [App factory](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/utils/app_factory.py): `SAUCEDEMO-Playwright/Python/utils/app_factory.py`
- [Base page](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/base_page.py): `SAUCEDEMO-Playwright/Python/resources/base_page.py`
- [Python settings](https://github.com/visanu1996/playwright-pack/tree/master/SAUCEDEMO-Playwright/Python/config): `SAUCEDEMO-Playwright/Python/config`

### Python SauceDemo

- [Purchase flow](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py): `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`
- [Login](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/login_page.py): `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/login_page.py`
- [Product catalog](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/product_page.py): `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/product_page.py`
- [Cart](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/cart_page.py): `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/cart_page.py`
- [Checkout](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/checkout_page.py): `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/checkout_page.py`

### TypeScript Core

- [Driver factory](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/core/DriverFactory.ts): `SAUCEDEMO-Playwright/TypeScript/src/core/DriverFactory.ts`
- [Base page](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/core/BasePage.ts): `SAUCEDEMO-Playwright/TypeScript/src/core/BasePage.ts`
- [TypeScript settings](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/config/config.ts): `SAUCEDEMO-Playwright/TypeScript/config/config.ts`
- [Test data](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/config/testdata.ts): `SAUCEDEMO-Playwright/TypeScript/config/testdata.ts`

### TypeScript SauceDemo

- [Login](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/LoginPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/LoginPage.ts`
- [Product catalog](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/ProductPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/ProductPage.ts`
- [Cart](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CartPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CartPage.ts`
- [Checkout](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CheckoutPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/sauce-demo/CheckoutPage.ts`

### TypeScript Examples

- [Booker API](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/api/RestfulBooker.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/api/RestfulBooker.ts`
- [Upload page](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/expandtesting/UploadPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/expandtesting/UploadPage.ts`
- [Material X page](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/MainPage.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/MainPage.ts`
- [Material X common](https://github.com/visanu1996/playwright-pack/blob/master/SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/CommonMat.ts): `SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/CommonMat.ts`

### Other components

- **Test author**
- **SauceDemo site**

## Connections

- Session setup → Config loader: loads settings (evidence: `SAUCEDEMO-Playwright/Python/utils/session_manage.py`)
- Session setup → Browser manager: creates manager (evidence: `SAUCEDEMO-Playwright/Python/utils/session_manage.py`)
- Session setup → App factory: creates factory (evidence: `SAUCEDEMO-Playwright/Python/utils/session_manage.py`)
- Base page → Browser manager: uses browser (evidence: `SAUCEDEMO-Playwright/Python/resources/base_page.py`)
- App factory → Browser manager: opens pages (evidence: `SAUCEDEMO-Playwright/Python/utils/app_factory.py`)
- Purchase flow → Login: calls login (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Purchase flow → Product catalog: adds products (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Purchase flow → Cart: checks cart (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Purchase flow → Checkout: fills checkout (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Login → Base page: inherits (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Product catalog → Base page: inherits (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Cart → Base page: inherits (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Checkout → Base page: inherits (evidence: `SAUCEDEMO-Playwright/Python/resources/PageObjects/SAUCEDEMO/sauce_common.py`)
- Test author → Purchase flow: exercises
- Browser manager → SauceDemo site: drives browser
- Driver factory → TypeScript settings: reads settings (evidence: `SAUCEDEMO-Playwright/TypeScript/src/core/DriverFactory.ts`)
- Base page → TypeScript settings: uses settings (evidence: `SAUCEDEMO-Playwright/TypeScript/src/core/BasePage.ts`)
- Base page → Test data: uses test data (evidence: `SAUCEDEMO-Playwright/TypeScript/src/core/BasePage.ts`)
- Booker API → Test data: uses payloads (evidence: `SAUCEDEMO-Playwright/TypeScript/src/pages/api/RestfulBooker.ts`)
- Material X page → Material X common: extends (evidence: `SAUCEDEMO-Playwright/TypeScript/src/pages/material-x/MainPage.ts`)
- Test author → Login: exercises
- Test author → Booker API: exercises
- Test author → Upload page: exercises
- Test author → Material X page: exercises