# githubmaster07/playwright-typescript-quality-framework architecture

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

- Interactive diagram: https://gitdiagram.com/githubmaster07/playwright-typescript-quality-framework
- Repository: https://github.com/githubmaster07/playwright-typescript-quality-framework

## Overview

This is a Playwright/TypeScript test-automation framework. Its main workflow is test suites using injected fixtures to exercise page objects and API clients, then validate UI, API, hybrid UI/API, or visual behavior. Environment configuration supplies service endpoints; API clients check HTTP status and validate response contracts. The README documents cross-browser execution and visual baselines. Some test, fixture, and visual wiring is inferred from the README and tree; their source was not sampled, so uncertain connections are omitted.

Main entry points: [`src/fixtures/testFixtures.ts`](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/fixtures/testFixtures.ts) (Custom fixtures), [`src/pages/LoginPage.ts`](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/LoginPage.ts) (Login page), [`src/pages/RoomsPage.ts`](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/RoomsPage.ts) (Rooms page), [`src/config/environment.ts`](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/config/environment.ts) (Environment config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_suite["Test suites"]
  node_login_test["Login tests<br/>[login.spec.ts]"]
  node_users_test["Users API tests<br/>[users-api.spec.ts]"]
  node_hybrid_test["Hybrid validation"]
  node_visual_test["Visual tests<br/>[visual.spec.ts]"]
end

subgraph group_runtime["Test runtime"]
  node_fixtures["Custom fixtures<br/>[testFixtures.ts]"]
  node_environment["Environment config<br/>[environment.ts]"]
  node_test_data["Test data<br/>[testData.ts]"]
end

subgraph group_ui["UI automation"]
  node_base_page["Base page<br/>[BasePage.ts]"]
  node_login_page["Login page<br/>[LoginPage.ts]"]
  node_rooms_page["Rooms page<br/>[RoomsPage.ts]"]
end

subgraph group_api["API validation"]
  node_user_client["User API client<br/>[UserApiClient.ts]"]
  node_room_client["Room API client<br/>[RoomApiClient.ts]"]
end

node_engineer(("Test author"))
node_pw_engine["Playwright engine"]
node_browser_app["Demo web apps"]
node_users_service["Users API"]
node_rooms_service["Rooms API"]
node_visual_baselines[("Visual baselines")]

node_engineer -->|"authors"| node_login_test
node_engineer -->|"authors"| node_users_test
node_engineer -->|"authors"| node_hybrid_test
node_engineer -->|"authors"| node_visual_test
node_login_test -->|"uses fixtures"| node_fixtures
node_users_test -->|"uses fixtures"| node_fixtures
node_hybrid_test -->|"uses fixtures"| node_fixtures
node_visual_test -->|"uses fixtures"| node_fixtures
node_fixtures -->|"provides page"| node_login_page
node_fixtures -->|"provides page"| node_rooms_page
node_fixtures -->|"provides client"| node_user_client
node_fixtures -->|"provides client"| node_room_client
node_login_test -->|"reads credentials"| node_test_data
node_login_test -->|"drives login"| node_login_page
node_users_test -->|"requests user"| node_user_client
node_hybrid_test -->|"fetches rooms"| node_room_client
node_hybrid_test -->|"reads room UI"| node_rooms_page
node_visual_test -->|"compares screenshots"| node_visual_baselines
node_login_page -->|"extends"| node_base_page
node_rooms_page -->|"extends"| node_base_page
node_login_page -->|"uses browser"| node_pw_engine
node_rooms_page -->|"uses browser"| node_pw_engine
node_user_client -->|"sends request"| node_pw_engine
node_room_client -->|"sends request"| node_pw_engine
node_environment -->|"supplies URL"| node_login_page
node_environment -->|"supplies URL"| node_rooms_page
node_environment -->|"supplies endpoint"| node_user_client
node_environment -->|"supplies endpoint"| node_room_client
node_pw_engine -->|"drives browser"| node_browser_app
node_pw_engine -->|"sends API request"| node_users_service
node_pw_engine -->|"sends API request"| node_rooms_service

click node_login_test "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/login.spec.ts"
click node_users_test "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/users-api.spec.ts"
click node_hybrid_test "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/hybrid-room-validation.spec.ts"
click node_visual_test "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/visual.spec.ts"
click node_fixtures "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/fixtures/testFixtures.ts"
click node_environment "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/config/environment.ts"
click node_test_data "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/data/testData.ts"
click node_base_page "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/BasePage.ts"
click node_login_page "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/LoginPage.ts"
click node_rooms_page "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/RoomsPage.ts"
click node_user_client "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/api/UserApiClient.ts"
click node_room_client "https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/api/RoomApiClient.ts"
click node_visual_baselines "https://github.com/githubmaster07/playwright-typescript-quality-framework/tree/main/tests/visual.spec.ts-snapshots"

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_test,node_users_test,node_hybrid_test,node_visual_test,node_users_service toneBlue
class node_fixtures,node_environment,node_test_data,node_visual_baselines toneAmber
class node_base_page,node_login_page,node_rooms_page,node_rooms_service toneMint
class node_user_client,node_room_client toneRose
class node_engineer,node_pw_engine,node_browser_app toneIndigo
```

## Components

### Test suites

- [Login tests](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/login.spec.ts): `tests/login.spec.ts`
- [Users API tests](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/users-api.spec.ts): `tests/users-api.spec.ts`
- [Hybrid validation](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/hybrid-room-validation.spec.ts): `tests/hybrid-room-validation.spec.ts`
- [Visual tests](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/tests/visual.spec.ts): `tests/visual.spec.ts`

### Test runtime

- [Custom fixtures](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/fixtures/testFixtures.ts): `src/fixtures/testFixtures.ts`
- [Environment config](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/config/environment.ts): `src/config/environment.ts`
- [Test data](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/data/testData.ts): `src/data/testData.ts`

### UI automation

- [Base page](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/BasePage.ts): `src/pages/BasePage.ts`
- [Login page](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/LoginPage.ts): `src/pages/LoginPage.ts`
- [Rooms page](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/pages/RoomsPage.ts): `src/pages/RoomsPage.ts`

### API validation

- [User API client](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/api/UserApiClient.ts): `src/api/UserApiClient.ts`
- [Room API client](https://github.com/githubmaster07/playwright-typescript-quality-framework/blob/main/src/api/RoomApiClient.ts): `src/api/RoomApiClient.ts`

### Other components

- **Test author**
- **Playwright engine**
- **Demo web apps**
- **Users API**
- **Rooms API**
- [Visual baselines](https://github.com/githubmaster07/playwright-typescript-quality-framework/tree/main/tests/visual.spec.ts-snapshots): `tests/visual.spec.ts-snapshots`

## Connections

- Test author → Login tests: authors
- Test author → Users API tests: authors
- Test author → Hybrid validation: authors
- Test author → Visual tests: authors
- Login tests → Custom fixtures: uses fixtures
- Users API tests → Custom fixtures: uses fixtures
- Hybrid validation → Custom fixtures: uses fixtures
- Visual tests → Custom fixtures: uses fixtures
- Custom fixtures → Login page: provides page
- Custom fixtures → Rooms page: provides page
- Custom fixtures → User API client: provides client
- Custom fixtures → Room API client: provides client
- Login tests → Test data: reads credentials
- Login tests → Login page: drives login
- Users API tests → User API client: requests user
- Hybrid validation → Room API client: fetches rooms
- Hybrid validation → Rooms page: reads room UI
- Visual tests → Visual baselines: compares screenshots
- Login page → Base page: extends
- Rooms page → Base page: extends
- Login page → Playwright engine: uses browser
- Rooms page → Playwright engine: uses browser
- User API client → Playwright engine: sends request
- Room API client → Playwright engine: sends request
- Environment config → Login page: supplies URL
- Environment config → Rooms page: supplies URL
- Environment config → User API client: supplies endpoint
- Environment config → Room API client: supplies endpoint
- Playwright engine → Demo web apps: drives browser
- Playwright engine → Users API: sends API request
- Playwright engine → Rooms API: sends API request