# victorcur/reto-front architecture

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

- Interactive diagram: https://gitdiagram.com/victorcur/reto-front
- Repository: https://github.com/victorcur/reto-front

## Overview

This repository is a Playwright/Cucumber UI automation suite for Sauce Demo, not the store application itself. Its principal workflow covers login, adding and verifying products in the cart, completing checkout, and checking purchase confirmation; separate login scenarios cover invalid credentials and a locked user. Gherkin features describe scenarios, step definitions coordinate page objects, and a Cucumber world supplies the browser page. The README documents these capabilities; some page-object implementations and feature-to-step bindings were not sampled, so their internal wiring is shown only where supported.

Main entry points: [`src/steps/checkout.steps.ts`](https://github.com/victorcur/reto-front/blob/main/src/steps/checkout.steps.ts) (Checkout steps), [`src/pages/BasePage.ts`](https://github.com/victorcur/reto-front/blob/main/src/pages/BasePage.ts) (Base page), [`src/pages/LoginPage.ts`](https://github.com/victorcur/reto-front/blob/main/src/pages/LoginPage.ts) (Login page), [`src/steps/login.steps.ts`](https://github.com/victorcur/reto-front/blob/main/src/steps/login.steps.ts) (Login steps)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_scenarios["Gherkin scenarios"]
  node_features_login["Login scenarios<br/>[login.feature]"]
  node_features_products["Product scenarios<br/>[products.feature]"]
  node_features_checkout["Checkout scenarios<br/>[checkout.feature]"]
  node_features_purchase["Purchase scenarios<br/>[purchase.feature]"]
end

subgraph group_steps["Step orchestration"]
  node_login_steps["Login steps<br/>[login.steps.ts]"]
  node_product_steps["Product steps<br/>[products.steps.ts]"]
  node_checkout_steps["Checkout steps<br/>[checkout.steps.ts]"]
end

subgraph group_pages["Page objects"]
  node_base_page["Base page<br/>[BasePage.ts]"]
  node_login_page["Login page<br/>[LoginPage.ts]"]
  node_inventory_page["Inventory page<br/>[InventoryPage.ts]"]
  node_cart_page["Cart page<br/>[CartPage.ts]"]
  node_checkout_page["Checkout page<br/>[CheckoutPage.ts]"]
  node_overview_page["Checkout overview"]
  node_confirmation_page["Confirmation page"]
end

subgraph group_runtime["Test runtime"]
  node_config["Test data<br/>[testData.ts]"]
  node_world["Browser world<br/>[world.ts]"]
  node_hooks["Scenario hooks<br/>[hooks.ts]"]
end

node_qa(("QA runner"))
node_sauce["Sauce Demo"]

node_qa -->|"starts scenarios"| node_features_login
node_qa -->|"starts scenarios"| node_features_products
node_qa -->|"starts scenarios"| node_features_checkout
node_qa -->|"starts scenarios"| node_features_purchase
node_features_login -->|"binds steps"| node_login_steps
node_features_products -->|"binds steps"| node_product_steps
node_features_checkout -->|"binds steps"| node_checkout_steps
node_features_purchase -->|"binds steps"| node_checkout_steps
node_login_steps -->|"calls"| node_login_page
node_login_steps -->|"reads credentials"| node_config
node_product_steps -->|"calls"| node_inventory_page
node_product_steps -->|"checks cart"| node_cart_page
node_checkout_steps -->|"starts checkout"| node_cart_page
node_checkout_steps -->|"fills details"| node_checkout_page
node_checkout_steps -->|"finishes purchase"| node_overview_page
node_checkout_steps -->|"checks confirmation"| node_confirmation_page
node_login_page -->|"extends"| node_base_page
node_inventory_page -->|"extends"| node_base_page
node_cart_page -->|"extends"| node_base_page
node_checkout_page -->|"extends"| node_base_page
node_overview_page -->|"extends"| node_base_page
node_confirmation_page -->|"extends"| node_base_page
node_login_page -->|"reads base URL"| node_config
node_hooks -->|"initializes and closes"| node_world
node_world -->|"opens browser page"| node_sauce
node_login_page -->|"navigates and interacts"| node_sauce
node_inventory_page -->|"interacts"| node_sauce

click node_features_login "https://github.com/victorcur/reto-front/blob/main/features/login.feature"
click node_features_products "https://github.com/victorcur/reto-front/blob/main/features/products.feature"
click node_features_checkout "https://github.com/victorcur/reto-front/blob/main/features/checkout.feature"
click node_features_purchase "https://github.com/victorcur/reto-front/blob/main/features/purchase.feature"
click node_login_steps "https://github.com/victorcur/reto-front/blob/main/src/steps/login.steps.ts"
click node_product_steps "https://github.com/victorcur/reto-front/blob/main/src/steps/products.steps.ts"
click node_checkout_steps "https://github.com/victorcur/reto-front/blob/main/src/steps/checkout.steps.ts"
click node_config "https://github.com/victorcur/reto-front/blob/main/src/config/testData.ts"
click node_world "https://github.com/victorcur/reto-front/blob/main/src/support/world.ts"
click node_hooks "https://github.com/victorcur/reto-front/blob/main/src/support/hooks.ts"
click node_base_page "https://github.com/victorcur/reto-front/blob/main/src/pages/BasePage.ts"
click node_login_page "https://github.com/victorcur/reto-front/blob/main/src/pages/LoginPage.ts"
click node_inventory_page "https://github.com/victorcur/reto-front/blob/main/src/pages/InventoryPage.ts"
click node_cart_page "https://github.com/victorcur/reto-front/blob/main/src/pages/CartPage.ts"
click node_checkout_page "https://github.com/victorcur/reto-front/blob/main/src/pages/CheckoutPage.ts"
click node_overview_page "https://github.com/victorcur/reto-front/blob/main/src/pages/CheckoutOverviewPage.ts"
click node_confirmation_page "https://github.com/victorcur/reto-front/blob/main/src/pages/ConfirmationPage.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_features_login,node_features_products,node_features_checkout,node_features_purchase toneBlue
class node_login_steps,node_product_steps,node_checkout_steps toneAmber
class node_base_page,node_login_page,node_inventory_page,node_cart_page,node_checkout_page,node_overview_page,node_confirmation_page toneMint
class node_config,node_world,node_hooks toneRose
class node_qa,node_sauce toneIndigo
```

## Components

### Gherkin scenarios

- [Login scenarios](https://github.com/victorcur/reto-front/blob/main/features/login.feature): `features/login.feature`
- [Product scenarios](https://github.com/victorcur/reto-front/blob/main/features/products.feature): `features/products.feature`
- [Checkout scenarios](https://github.com/victorcur/reto-front/blob/main/features/checkout.feature): `features/checkout.feature`
- [Purchase scenarios](https://github.com/victorcur/reto-front/blob/main/features/purchase.feature): `features/purchase.feature`

### Step orchestration

- [Login steps](https://github.com/victorcur/reto-front/blob/main/src/steps/login.steps.ts): `src/steps/login.steps.ts`
- [Product steps](https://github.com/victorcur/reto-front/blob/main/src/steps/products.steps.ts): `src/steps/products.steps.ts`
- [Checkout steps](https://github.com/victorcur/reto-front/blob/main/src/steps/checkout.steps.ts): `src/steps/checkout.steps.ts`

### Page objects

- [Base page](https://github.com/victorcur/reto-front/blob/main/src/pages/BasePage.ts): `src/pages/BasePage.ts`
- [Login page](https://github.com/victorcur/reto-front/blob/main/src/pages/LoginPage.ts): `src/pages/LoginPage.ts`
- [Inventory page](https://github.com/victorcur/reto-front/blob/main/src/pages/InventoryPage.ts): `src/pages/InventoryPage.ts`
- [Cart page](https://github.com/victorcur/reto-front/blob/main/src/pages/CartPage.ts): `src/pages/CartPage.ts`
- [Checkout page](https://github.com/victorcur/reto-front/blob/main/src/pages/CheckoutPage.ts): `src/pages/CheckoutPage.ts`
- [Checkout overview](https://github.com/victorcur/reto-front/blob/main/src/pages/CheckoutOverviewPage.ts): `src/pages/CheckoutOverviewPage.ts`
- [Confirmation page](https://github.com/victorcur/reto-front/blob/main/src/pages/ConfirmationPage.ts): `src/pages/ConfirmationPage.ts`

### Test runtime

- [Test data](https://github.com/victorcur/reto-front/blob/main/src/config/testData.ts): `src/config/testData.ts`
- [Browser world](https://github.com/victorcur/reto-front/blob/main/src/support/world.ts): `src/support/world.ts`
- [Scenario hooks](https://github.com/victorcur/reto-front/blob/main/src/support/hooks.ts): `src/support/hooks.ts`

### Other components

- **QA runner**
- **Sauce Demo**

## Connections

- QA runner → Login scenarios: starts scenarios
- QA runner → Product scenarios: starts scenarios
- QA runner → Checkout scenarios: starts scenarios
- QA runner → Purchase scenarios: starts scenarios
- Login scenarios → Login steps: binds steps
- Product scenarios → Product steps: binds steps
- Checkout scenarios → Checkout steps: binds steps
- Purchase scenarios → Checkout steps: binds steps
- Login steps → Login page: calls
- Login steps → Test data: reads credentials
- Product steps → Inventory page: calls
- Product steps → Cart page: checks cart
- Checkout steps → Cart page: starts checkout
- Checkout steps → Checkout page: fills details
- Checkout steps → Checkout overview: finishes purchase
- Checkout steps → Confirmation page: checks confirmation
- Login page → Base page: extends
- Inventory page → Base page: extends
- Cart page → Base page: extends
- Checkout page → Base page: extends
- Checkout overview → Base page: extends
- Confirmation page → Base page: extends
- Login page → Test data: reads base URL
- Scenario hooks → Browser world: initializes and closes
- Browser world → Sauce Demo: opens browser page
- Login page → Sauce Demo: navigates and interacts
- Inventory page → Sauce Demo: interacts