# pgtitov/qa-migration-sandbox architecture

> Architecture diagram of the GitHub repository pgtitov/qa-migration-sandbox, 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/pgtitov/qa-migration-sandbox
- Repository: https://github.com/pgtitov/qa-migration-sandbox

## Overview

QA-Migration-Sandbox is a Playwright page-object model for exercising DemoQA pages, not a standalone application. The principal workflow is a test consumer using the DemoQA façade and page objects to navigate or interact with a page, then check page-specific or control-level expectations. The models cover elements, forms, widgets, alerts/dialogs, interactions, and the bookstore. Configuration supplies page URLs; shared controls and step decorators provide internal layers. The README gives little product detail, so feature coverage follows the page-model tree and exports; some links are left unverified where only names or imports are known.

Main entry points: [`page-model/demoQA.ts`](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/demoQA.ts) (DemoQA façade), [`utils/decorators.ts`](https://github.com/pgtitov/qa-migration-sandbox/blob/main/utils/decorators.ts) (Step reporting), [`page-model/forms/practice-form-page.ts`](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/forms/practice-form-page.ts) (Practice form), [`page-model/controls`](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/controls) (UI controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Test entry"]
  node_consumer(("Test consumer"))
  node_facade["DemoQA façade<br/>[demoQA.ts]"]
end

subgraph group_shared["Shared model layers"]
  node_config["URL configuration<br/>[config.ts]"]
  node_decorators["Step reporting<br/>[decorators.ts]"]
  node_controls["UI controls"]
  node_control_verify["Control checks"]
  node_sidebar["Sidebar navigation<br/>[left-sidebar.ts]"]
end

subgraph group_elements["Element pages"]
  node_element_pages["Element pages"]
  node_element_checks["Element page checks"]
end

subgraph group_forms_widgets["Forms and widgets"]
  node_practice_form["Practice form"]
  node_form_checks["Form checks"]
  node_widget_pages["Widget pages"]
  node_widget_checks["Widget checks"]
end

subgraph group_other_pages["Other page areas"]
  node_alerts["Alerts page<br/>[alerts-page.ts]"]
  node_alert_checks["Alert checks"]
  node_dialogs["Dialog page<br/>[dialog-page.ts]"]
  node_interactions["Interaction pages"]
  node_bookstore["Bookstore pages"]
end

node_consumer -.->|"uses"| node_facade
node_facade -.->|"exposes"| node_element_pages
node_facade -.->|"exposes"| node_sidebar
node_facade -.->|"exposes"| node_practice_form
node_facade -.->|"exposes"| node_widget_pages
node_facade -.->|"exposes"| node_alerts
node_facade -.->|"exposes"| node_dialogs
node_facade -.->|"exposes"| node_interactions
node_facade -.->|"exposes"| node_bookstore
node_element_pages -.->|"verifies with"| node_element_checks
node_element_pages -->|"uses"| node_controls
node_practice_form -->|"gets URL"| node_config
node_practice_form -->|"uses"| node_controls
node_practice_form -->|"creates"| node_form_checks
node_practice_form -->|"annotates steps"| node_decorators
node_widget_pages -.->|"verifies with"| node_widget_checks
node_alerts -->|"gets URL"| node_config
node_alerts -->|"creates"| node_alert_checks
node_sidebar -->|"uses"| node_controls
node_controls -->|"creates checks"| node_control_verify
node_controls -->|"annotates steps"| node_decorators
node_sidebar -->|"annotates steps"| node_decorators
node_dialogs -.->|"annotates steps"| node_decorators
node_interactions -.->|"annotates steps"| node_decorators
node_bookstore -.->|"annotates steps"| node_decorators

click node_facade "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/demoQA.ts"
click node_config "https://github.com/pgtitov/qa-migration-sandbox/blob/main/config.ts"
click node_decorators "https://github.com/pgtitov/qa-migration-sandbox/blob/main/utils/decorators.ts"
click node_controls "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/controls"
click node_control_verify "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/controls/common-control-verify.ts"
click node_sidebar "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/common/left-sidebar.ts"
click node_element_pages "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/elements"
click node_element_checks "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/elements"
click node_practice_form "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/forms/practice-form-page.ts"
click node_form_checks "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/forms/practice-form-page-verify.ts"
click node_widget_pages "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/widgets"
click node_widget_checks "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/widgets"
click node_alerts "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/alerts/alerts-page.ts"
click node_alert_checks "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/alerts/alerts-page-verify.ts"
click node_dialogs "https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/dialogs/dialog-page.ts"
click node_interactions "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/interactions"
click node_bookstore "https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/book-store"

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_consumer,node_facade toneBlue
class node_config,node_decorators,node_controls,node_control_verify,node_sidebar toneAmber
class node_element_pages,node_element_checks toneMint
class node_practice_form,node_form_checks,node_widget_pages,node_widget_checks toneRose
class node_alerts,node_alert_checks,node_dialogs,node_interactions,node_bookstore toneIndigo
```

## Components

### Test entry

- **Test consumer**
- [DemoQA façade](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/demoQA.ts): `page-model/demoQA.ts`

### Shared model layers

- [URL configuration](https://github.com/pgtitov/qa-migration-sandbox/blob/main/config.ts): `config.ts`
- [Step reporting](https://github.com/pgtitov/qa-migration-sandbox/blob/main/utils/decorators.ts): `utils/decorators.ts`
- [UI controls](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/controls): `page-model/controls`
- [Control checks](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/controls/common-control-verify.ts): `page-model/controls/common-control-verify.ts`
- [Sidebar navigation](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/common/left-sidebar.ts): `page-model/common/left-sidebar.ts`

### Element pages

- [Element pages](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/elements): `page-model/elements`
- [Element page checks](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/elements): `page-model/elements`

### Forms and widgets

- [Practice form](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/forms/practice-form-page.ts): `page-model/forms/practice-form-page.ts`
- [Form checks](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/forms/practice-form-page-verify.ts): `page-model/forms/practice-form-page-verify.ts`
- [Widget pages](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/widgets): `page-model/widgets`
- [Widget checks](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/widgets): `page-model/widgets`

### Other page areas

- [Alerts page](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/alerts/alerts-page.ts): `page-model/alerts/alerts-page.ts`
- [Alert checks](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/alerts/alerts-page-verify.ts): `page-model/alerts/alerts-page-verify.ts`
- [Dialog page](https://github.com/pgtitov/qa-migration-sandbox/blob/main/page-model/dialogs/dialog-page.ts): `page-model/dialogs/dialog-page.ts`
- [Interaction pages](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/interactions): `page-model/interactions`
- [Bookstore pages](https://github.com/pgtitov/qa-migration-sandbox/tree/main/page-model/book-store): `page-model/book-store`

## Connections

- Test consumer → DemoQA façade: uses
- DemoQA façade → Element pages: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Sidebar navigation: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Practice form: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Widget pages: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Alerts page: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Dialog page: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Interaction pages: exposes (evidence: `page-model/demoQA.ts`)
- DemoQA façade → Bookstore pages: exposes (evidence: `page-model/demoQA.ts`)
- Element pages → Element page checks: verifies with
- Element pages → UI controls: uses (evidence: `page-model/elements/index.ts`)
- Practice form → URL configuration: gets URL (evidence: `page-model/forms/practice-form-page.ts`)
- Practice form → UI controls: uses (evidence: `page-model/forms/practice-form-page.ts`)
- Practice form → Form checks: creates (evidence: `page-model/forms/practice-form-page.ts`)
- Practice form → Step reporting: annotates steps (evidence: `page-model/forms/practice-form-page.ts`)
- Widget pages → Widget checks: verifies with
- Alerts page → URL configuration: gets URL (evidence: `page-model/alerts/alerts-page.ts`)
- Alerts page → Alert checks: creates (evidence: `page-model/alerts/alerts-page.ts`)
- Sidebar navigation → UI controls: uses (evidence: `page-model/common/left-sidebar.ts`)
- UI controls → Control checks: creates checks (evidence: `page-model/controls/button.ts`)
- UI controls → Step reporting: annotates steps (evidence: `page-model/controls/text-box.ts`)
- Sidebar navigation → Step reporting: annotates steps (evidence: `page-model/common/left-sidebar.ts`)
- Dialog page → Step reporting: annotates steps (evidence: `page-model/dialogs/dialog-page.ts`)
- Interaction pages → Step reporting: annotates steps (evidence: `page-model/interactions/droppable-page.ts`)
- Bookstore pages → Step reporting: annotates steps (evidence: `page-model/book-store/book-store-login-page.ts`)