agents-cli-automation 1.0.7 → 1.0.9

package/src/templates/playwright-agent-ts.md

@@ -1,1419 +1,736 @@
-name: Create Playwright Framework - UI Testing
-description: Creates a production-ready Playwright UI automation framework with all dependencies, fixtures, and test configurations properly set up.
-argument-hint: "framework requirements, e.g., 'JavaScript with UI tests'"
-
 ---
-
-# Playwright UI Testing Framework Setup
-
-This agent creates a production-ready Playwright framework optimized for UI automation.
-
-## Capabilities
-- Playwright setup (JS / TS) - Chromium only with latest module syntax
-- TypeScript support with strictest config
-- UI, component, and end-to-end testing
-- **Playwright BDD** - Gherkin format with step definitions
-- **Page Object Model (POM)** - Reusable page classes
-- **Fixtures** - Pre-built browser & page fixtures
-- **Parallel execution** - Tests run simultaneously for speed
-- Sample tests (headless & headed modes)
-- Scalable folder structure with best practices
-- WebServer configuration for running tests against local servers
-- Complete package.json with all required scripts
-- Modern ES modules with latest imports
-- Full TypeScript integration with types
-- Minimal setup - Developers only write test steps & scenarios
-
-## Prerequisites
-- Node.js 18+ installed
-- npm or yarn
-
-## Setup Instructions
-
-### 1. Install Dependencies (Chromium Only + TypeScript)
-```bash
-npm install
-npm install --save-dev typescript @types/node @playwright/test
-npx playwright install chromium
-```
-
-### 2. Install BDD & Data Handling Dependencies
-For Playwright BDD support and test data files:
-```bash
-npm install --save-dev @cucumber/cucumber csv-parser js-yaml @types/js-yaml
-```
-
-### 3. Required package.json Scripts
-Ensure your `package.json` includes these scripts:
-```json
+name: automation.md
+description: Describe what this custom agent does and when to use it.
+argument-hint: The inputs this agent expects, e.g., "a task to implement" or "a question to answer".
+tools:
+  - read
+  - create_file
+  - apply_patch
+  - run_in_terminal
+  - file_search
+  - grep_search
+  - manage_todo_list
+---
+This agent documents and automates reproducing the repository layout, creating a minimal, scalable Playwright-based UI test framework (targeting https://www.saucedemo.com/ by default), and providing recommended developer commands so a new contributor can recreate the workspace and run tests. When to use - When a new contributor needs to scaffold a local copy of this project structure, generate minimal UI test scaffolding (Playwright + page objects + sample tests), and install tooling to run tests and Playwright flows against Saucedemo. Inputs (argument-hint) - task (required): one of scaffold, verify, describe, create-sample-tests. - targetPath (optional): filesystem path where scaffolding should be created. Defaults to repository root. - installDeps (optional boolean): when true, agent will install Node dependencies and Playwright browsers. - force (optional boolean): when true, allow overwriting placeholder files (use with caution). - uiTarget (optional): URL to target for UI tests; defaults to https://www.saucedemo.com/. Capabilities / Behavior - Read the repo layout and create any missing directories listed in the standard layout. - Create placeholder files for missing source files (short header + file path + TODO notes). - Create Playwright scaffolding when requested, including: - a playwright.config.ts sample if missing, - a tests/ui/saucedemo.spec.ts sample test that logs in and asserts inventory load, - a ui/page page-object for the login and inventory pages, - package.json script recommendations for test, test:ui, and install:browsers. - Optionally install Node dependencies and Playwright browsers when installDeps=true. - Run verification commands (npm test, npx playwright test --list, npx playwright test) and return concise logs. Prerequisites - Node.js (v16+) and npm (or pnpm) installed. - Internet access for package installation and Playwright browser download. Representative scaffolded layout
+package.json (sample scripts)
+playwright.config.ts (generated if missing)
+tests/
+  ui/
+	saucedemo.spec.ts  # sample UI test
+  api/
+	schd-group-create.api.spec.ts
+core/
+  api/
+  auth/
+  db/
+ui/
+  page/
+	LoginPage.ts
+	InventoryPage.ts
+  features/
+  steps/
+utils/
+  readJson.ts
+playwright-report/
+screenshots/
+test-results/
+Scaffold steps (task: scaffold) 1. Validate targetPath exists or create it. 2. Create the repository directory tree (only new directories created). 3. For each file present in the source repo, preserve content. For missing, create placeholders containing a header, responsibilities, and TODO notes. 4. When createSample=true or task=create-sample-tests, add Playwright scaffolding: - playwright.config.ts (simple config using chromium and testDir tests/ui). - tests/ui/saucedemo.spec.ts (sample test: navigate to uiTarget, perform login using standard Saucedemo credentials from sample data, assert inventory list visible). - ui/page/LoginPage.ts and ui/page/InventoryPage.ts page objects. - Update or create package.json scripts: test, test:ui, install:browsers. 5. If installDeps=true, run npm ci (or npm install) then npx playwright install (use --with-deps where appropriate). 6. Run verification: npm run test:ui -- --list or npx playwright test --list and optionally execute the sample test. Suggested commands (PowerShell / cross-platform)
+powershell
+# install dependencies
+npm ci
+# install Playwright browsers
+npx playwright install
+# run unit/api tests
+npm test
+# run Playwright E2E tests
+npm run test:ui
+Sample tests/ui/saucedemo.spec.ts behavior (generated when requested) - Open uiTarget (defaults to https://www.saucedemo.com/). - Use LoginPage to enter standard_user / secret_sauce and submit. - Wait for InventoryPage to display and assert at least one product is visible. Outputs - Created directories and placeholder files in targetPath. - Generated Playwright UI scaffolding and a runnable sample test when requested. - Verification logs for dependency install and sample test runs. - A summary list of placeholders and recommended edits (e.g., secrets, environment overrides). Safety & constraints - The agent will not overwrite existing non-placeholder files unless force=true is set. - The agent will not embed secrets into scaffolded files; secrets must be provided separately or via env vars. Example usages - Scaffold without installing deps: { "task": "scaffold", "installDeps": false } - Scaffold + install deps + create samples: { "task": "scaffold", "installDeps": true, "createSample": true } - Create only sample UI tests: { "task": "create-sample-tests", "targetPath": ".", "uiTarget": "https://www.saucedemo.com/" } - Describe repo: { "task": "describe" } Maintainer notes - Keep the generated playwright.config.ts and sample tests minimal — encourage contributors to migrate tests into the repository's existing structure and page objects. - When adding real credentials, instruct users to use environment variables or a secure secrets store. --- Automation agent specification end. Included file templates (drop-in ready) Below are copy-paste-ready templates for the key files you can generate from this agent to produce a runnable Playwright UI framework targeting https://www.saucedemo.com/. 1) package.json (merge with your existing package.json or use as a template)
+json
 {
+  "name": "poc_bbc",
+  "version": "1.0.0",
+  "type": "commonjs",
   "scripts": {
-    "start": "node server.js",
-    "test": "playwright test",
-    "test:headed": "playwright test --headed",
-    "test:debug": "playwright test --debug",
-    "test:ui": "playwright test --ui",
-    "test:bdd": "npx @cucumber/cucumber-js",
-    "test:bdd:report": "npx @cucumber/cucumber-js --format json:cucumber-report.json"
-  }
-}
-```
-
-### 4. TypeScript Configuration (`tsconfig.json`)
-```json
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020"],
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "paths": {
-      "@pages/*": ["tests/pages/*"],
-      "@utils/*": ["tests/utils/*"],
-      "@fixtures/*": ["tests/fixtures/*"],
-      "@data/*": ["tests/data/*"]
-    }
-  },
-  "include": ["tests/**/*"],
-  "exclude": ["node_modules"]
-}
-```
-
-### 5. Project Structure (Scalable with BDD & TypeScript)
-```
-project/
-├── tests/
-│   ├── fixtures/
-│   │   └── base.fixture.ts          # Shared fixtures (TypeScript)
-│   ├── pages/
-│   │   ├── BasePage.ts              # Base page object (TypeScript)
-│   │   ├── LoginPage.ts             # Login page object (TypeScript)
-│   │   ├── InventoryPage.ts         # Inventory page object (TypeScript)
-│   │   └── FormPage.ts              # Form page object (TypeScript)
-│   ├── utils/                       # Utility functions (TypeScript)
-│   │   ├── dataReader.ts
-│   │   ├── formHelper.ts
-│   │   └── testData.ts
-│   ├── data/                        # Test data files
-│   │   ├── users.json
-│   │   ├── formData.csv
-│   │   └── config.yaml
-│   ├── features/                    # BDD Gherkin scenarios
-│   │   ├── login.feature
-│   │   └── shopping.feature
-│   ├── steps/                       # BDD Step definitions (TypeScript)
-│   │   ├── loginSteps.ts
-│   │   └── shoppingSteps.ts
-│   └── specs/
-│       ├── saucedemo.spec.ts         # Traditional tests (TypeScript)
-│       └── formTest.spec.ts
-├── cucumber.js                      # Cucumber config
-├── playwright.config.ts             # Playwright config (TypeScript)
-├── tsconfig.json                    # TypeScript config
-└── package.json
-```
-
-### 6. Cucumber Configuration (`cucumber.js` - for BDD)
-```javascript
-module.exports = {
-  default: {
-    paths: ['tests/features/**/*.feature'],
-    require: ['tests/steps/**/*.ts'],
-    requireModule: ['ts-node/register'],
-    format: ['progress', 'html:cucumber-report.html'],
-    parallel: 4,
-    worldParameters: {
-      appUrl: 'https://www.saucedemo.com/',
-    }
-  }
-};
-```
-
-### 7. Playwright Configuration (`playwright.config.ts`)
-```typescript
-import { defineConfig, devices, type PlaywrightTestOptions } from '@playwright/test';
-
-export default defineConfig<PlaywrightTestOptions>({
-  testDir: './tests/specs',
-  fullyParallel: true,
-  workers: process.env.CI ? 1 : 4,
-  retries: 1,
-  timeout: 30000,
-  expect: {
-    timeout: 5000,
+    "dbtest": "npx playwright test --project=db",
+    "uitest": "npx bddgen & npx playwright test --project=ui --headed",
+    "test": "npx playwright test",
+    "test:ui": "npx playwright test --project=ui-plain",
+    "install:browsers": "npx playwright install"
   },
-  use: {
-    browserName: 'chromium',
-    headless: true,
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure',
-    trace: 'on-first-retry',
-  },
-  webServer: {
-    command: 'npm start',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "playwright-bdd": "^8.4.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
   },
-  reporter: [
-    ['html'],
-    ['json', { outputFile: 'test-results/results.json' }],
+  "dependencies": {
+    "dotenv": "^17.2.3",
+    "mssql": "^12.2.0"
+  }
+}
+2) playwright.config.ts (the repo already has a BDD config; this snippet adds a plain UI project)
+typescript
+import 'dotenv/config';
+import { defineConfig, devices } from '@playwright/test';
+import { defineBddConfig } from 'playwright-bdd';
+
+export const bddConfig = defineBddConfig({
+  features: ['tests/ui/features/**/*.feature'],
+  steps: ['tests/ui/steps/**/*.steps.ts','tests/fixtures/pages.fixture.ts'],
+});
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 20 * 1000,
+  expect: { timeout: 10 * 1000 },
+  retries: process.env.CI ? 1 : 0,
+  reporter: [['html', { open: 'never' }], ['list']],
+  use: { trace: 'retain-on-failure', screenshot: 'only-on-failure', video: 'retain-on-failure' },
+  projects: [
+    {
+      name: 'ui',
+      testDir: './.features-gen',
+      testMatch: '**/*.feature.spec.*',
+      use: { ...devices['Desktop Chrome'], headless: true, baseURL: process.env.UI_BASE_URL },
+    },
+    {
+      name: 'api',
+      testMatch: /.*\.api\.spec\.ts/,
+      use: { browserName: undefined, baseURL: process.env.API_BASE_URL, extraHTTPHeaders: { 'Content-Type': 'application/json' } },
+    },
+    {
+      name: 'db',
+      testMatch: /.*\.db\.spec\.ts/,
+      use: { browserName: undefined },
+    },
+    // Plain UI tests (non-BDD)
+    {
+      name: 'ui-plain',
+      testDir: './tests/ui',
+      use: { ...devices['Desktop Chrome'], headless: true, baseURL: process.env.UI_BASE_URL || 'https://www.saucedemo.com/' },
+    },
   ],
 });
-```
-
-### 8. Data Reader Utility (`tests/utils/dataReader.ts`) - TypeScript
-```typescript
-import fs from 'fs';
-import path from 'path';
-import csv from 'csv-parser';
-import yaml from 'js-yaml';
-
-const DATA_DIR = path.join(process.cwd(), 'tests', 'data');
-
-interface DataRecord {
-  [key: string]: string | number | boolean;
-}
-
-export class DataReader {
-  // Read JSON file
-  static readJSON<T = DataRecord>(filename: string): T {
-    const filePath = path.join(DATA_DIR, filename);
-    const data = fs.readFileSync(filePath, 'utf-8');
-    return JSON.parse(data) as T;
-  }
-
-  // Read YAML file
-  static readYAML<T = DataRecord>(filename: string): T {
-    const filePath = path.join(DATA_DIR, filename);
-    const data = fs.readFileSync(filePath, 'utf-8');
-    return yaml.load(data) as T;
-  }
-
-  // Read CSV file (returns array of objects)
-  static async readCSV(filename: string): Promise<DataRecord[]> {
-    const filePath = path.join(DATA_DIR, filename);
-    return new Promise<DataRecord[]>((resolve, reject) => {
-      const records: DataRecord[] = [];
-      fs.createReadStream(filePath)
-        .pipe(csv())
-        .on('data', (data: DataRecord) => records.push(data))
-        .on('end', () => resolve(records))
-        .on('error', reject);
-    });
-  }
+3) ui/page/LoginPage.ts (page object)
+typescript
+import { Page } from '@playwright/test';
 
-  // Get single record by ID or key
-  static getRecordByKey<T extends DataRecord>(
-    data: T[],
-    key: keyof T,
-    value: string | number
-  ): T | undefined {
-    if (Array.isArray(data)) {
-      return data.find((record) => record[key] === value);
-    }
-    return undefined;
+export class LoginPage {
+  readonly page: Page;
+  constructor(page: Page) { this.page = page; }
+  async goto() { await this.page.goto('/'); }
+  async login(username: string, password: string) {
+    await this.page.fill('#user-name', username);
+    await this.page.fill('#password', password);
+    await this.page.click('#login-button');
   }
 }
-```
-
-### 9. Form Helper Utility (`tests/utils/formHelper.ts`) - TypeScript
-```typescript
+4) ui/page/InventoryPage.ts (page object)
+typescript
 import { Page, Locator } from '@playwright/test';
 
-interface FormFieldConfig {
-  type: 'text' | 'textarea' | 'dropdown' | 'radio' | 'checkbox';
-  selector?: string;
-  value: string | string[] | boolean;
+export class InventoryPage {
+  readonly page: Page;
+  readonly items: Locator;
+  constructor(page: Page) { this.page = page; this.items = page.locator('.inventory_item'); }
+  async isLoaded(): Promise<boolean> { return await this.items.first().isVisible(); }
+  getItems(): Locator { return this.items; }
 }
+5) tests/ui/saucedemo.spec.ts (plain Playwright test)
+typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../../ui/page/LoginPage';
+import { InventoryPage } from '../../ui/page/InventoryPage';
+
+test.describe('Saucedemo smoke', () => {
+  test('login and inventory visible', async ({ page, baseURL }) => {
+    const login = new LoginPage(page);
+    const inventory = new InventoryPage(page);
+    await page.goto(baseURL || 'https://www.saucedemo.com/');
+    await login.login('standard_user', 'secret_sauce');
+    await expect(page.locator('.inventory_list')).toBeVisible();
+    await expect(inventory.getItems().first()).toBeVisible();
+  });
+});
+6) .env.example (environment variables sample)
+text
+UI_BASE_URL=https://www.saucedemo.com/
+API_BASE_URL=http://localhost:3000
+Usage notes - The templates above are ready to paste into files. The agent's scaffold task may create them automatically when createSample=true. - To run locally after creating files:
+powershell
+npm ci
+npm run install:browsers
+npm run test:ui
+- The test uses Saucedemo public credentials: standard_user / secret_sauce. If you want, I can now: (choose one) - Generate these files automatically in the repo (I will create the files listed above). - Or leave this agent file as the canonical template and not modify the filesystem. Repository file list and embedded key file contents Below is a repository file list (captured from the workspace) followed by the full contents of selected key files (UI, tests, core helpers). Use these as drop-in references when running the agent's create/scaffold actions. File list (workspace snapshot):
+c:\poc_bbc\workflows\schd-group\api\schd-group.api.ts
+c:\poc_bbc\workflows\schd-group\invariants\db.invariants.ts
+c:\poc_bbc\workflows\schd-group\invariants\api.invariants.ts
+c:\poc_bbc\workflows\schd-group\invariants\permission.invariants.ts
+c:\poc_bbc\core\permission\permission.types.ts
+c:\poc_bbc\core\permission\permission.schd-group.ts
+c:\poc_bbc\workflows\schd-group\db\schd-group.queries.ts
+c:\poc_bbc\core\auth\roles.ts
+c:\poc_bbc\core\db\queries.ts
+c:\poc_bbc\core\db\connection.ts
+c:\poc_bbc\tsconfig.json
+c:\poc_bbc\core\api\apiClient.ts
+c:\poc_bbc\playwright.config.ts
+c:\poc_bbc\package.json
+c:\poc_bbc\package-lock.json
+c:\poc_bbc\bitbucket-pipelines.yml
+c:\poc_bbc\.gitignore
+c:\poc_bbc\.github\agents\automation.md.agent.md
+c:\poc_bbc\tests\utils\readJson.ts
+c:\poc_bbc\tests\utils\formFiller.ts
+c:\poc_bbc\tests\fixtures\test.fixture.ts
+c:\poc_bbc\tests\fixtures\pages.fixture.ts
+c:\poc_bbc\tests\types\formField.ts
+c:\poc_bbc\tests\ui\steps\scheduling-groups.steps.ts
+c:\poc_bbc\tests\ui\steps\booking.steps.ts
+c:\poc_bbc\tests\ui\features\scheduling-groups.feature
+c:\poc_bbc\tests\ui\features\booking.feature
+c:\poc_bbc\tests\ui\page\HomePage.ts
+c:\poc_bbc\tests\db\01-connection.db.spec.ts
+c:\poc_bbc\tests\api\schd-group-create.api.spec.ts
+c:\poc_bbc\.bitbucket\README.md
+c:\poc_bbc\.bitbucket\pull_request_template.md
+c:\poc_bbc\tests\data\facilityFormData.json
+Embedded key file contents 1) package.json
+json
+{
+  "name": "poc_bbc",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dbtest": "npx playwright test --project=db",
+    "uitest": "npx bddgen & npx playwright test --project=ui --headed"
 
-export class FormHelper {
-  constructor(private page: Page) {}
-
-  // Fill text input
-  async fillInput(selector: string, value: string): Promise<void> {
-    await this.page.fill(selector, value);
-  }
-
-  // Fill textarea
-  async fillTextArea(selector: string, value: string): Promise<void> {
-    await this.page.locator(selector).clear();
-    await this.page.locator(selector).type(value, { delay: 50 });
-  }
-
-  // Select option from dropdown (not select element)
-  async selectDropdown(dropdownSelector: string, optionText: string): Promise<void> {
-    await this.page.click(dropdownSelector);
-    await this.page.click(`text="${optionText}"`);
-  }
-
-  // Select radio button by label text
-  async selectRadioButton(labelText: string): Promise<void> {
-    const label = this.page.locator(`label:has-text("${labelText}")`);
-    const radioId = await label.getAttribute('for');
-    if (radioId) {
-      await this.page.locator(`#${radioId}`).click();
-    }
-  }
-
-  // Check checkbox by label text
-  async checkCheckbox(labelText: string): Promise<void> {
-    const label = this.page.locator(`label:has-text("${labelText}")`);
-    const checkboxId = await label.getAttribute('for');
-    if (checkboxId) {
-      const checkbox = this.page.locator(`#${checkboxId}`);
-      const isChecked = await checkbox.isChecked();
-      if (!isChecked) {
-        await checkbox.click();
-      }
-    }
-  }
-
-  // Uncheck checkbox by label text
-  async uncheckCheckbox(labelText: string): Promise<void> {
-    const label = this.page.locator(`label:has-text("${labelText}")`);
-    const checkboxId = await label.getAttribute('for');
-    if (checkboxId) {
-      const checkbox = this.page.locator(`#${checkboxId}`);
-      const isChecked = await checkbox.isChecked();
-      if (isChecked) {
-        await checkbox.click();
-      }
-    }
-  }
-
-  // Select multiple checkboxes
-  async checkMultiple(labels: string[]): Promise<void> {
-    for (const label of labels) {
-      await this.checkCheckbox(label);
-    }
-  }
-
-  // Fill form with object data
-  async fillForm(formData: Record<string, FormFieldConfig>): Promise<void> {
-    for (const field of Object.values(formData)) {
-      if (field.type === 'text' && field.selector && typeof field.value === 'string') {
-        await this.fillInput(field.selector, field.value);
-      } else if (field.type === 'textarea' && field.selector && typeof field.value === 'string') {
-        await this.fillTextArea(field.selector, field.value);
-      } else if (field.type === 'dropdown' && field.selector && typeof field.value === 'string') {
-        await this.selectDropdown(field.selector, field.value);
-      } else if (field.type === 'radio' && typeof field.value === 'string') {
-        await this.selectRadioButton(field.value);
-      } else if (field.type === 'checkbox' && field.value) {
-        if (Array.isArray(field.value)) {
-          await this.checkMultiple(field.value);
-        } else if (typeof field.value === 'string') {
-          await this.checkCheckbox(field.value);
-        }
-      }
-    }
-  }
-
-  // Verify form value
-  async getInputValue(selector: string): Promise<string | null> {
-    return await this.page.inputValue(selector);
-  }
-
-  // Verify radio button is selected
-  async isRadioSelected(labelText: string): Promise<boolean> {
-    const label = this.page.locator(`label:has-text("${labelText}")`);
-    const radioId = await label.getAttribute('for');
-    return radioId ? await this.page.locator(`#${radioId}`).isChecked() : false;
-  }
-
-  // Verify checkbox is checked
-  async isCheckboxChecked(labelText: string): Promise<boolean> {
-    const label = this.page.locator(`label:has-text("${labelText}")`);
-    const checkboxId = await label.getAttribute('for');
-    return checkboxId ? await this.page.locator(`#${checkboxId}`).isChecked() : false;
+    
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@types/mssql": "^9.1.9",
+    "@types/node": "^25.2.3",
+    "playwright-bdd": "^8.4.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "dotenv": "^17.2.3",
+    "mssql": "^12.2.0"
   }
 }
-```
-
-### 10. Test Data Manager (`tests/utils/testData.ts`) - TypeScript
-```typescript
-import { DataReader } from './dataReader';
-
-interface User {
-  id: string;
-  username: string;
-  password: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-}
-
-interface FormData {
-  scenario: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  country: string;
-  acceptTerms: string;
-  newsletter: string;
-}
-
-interface Config {
-  app: {
-    url: string;
-    timeout: number;
-  };
-  users: {
-    [key: string]: {
-      username: string;
-      password: string;
-    };
-  };
-  forms: {
-    [key: string]: {
-      [field: string]: string;
-    };
-  };
-}
-
-export class TestDataManager {
-  // Load user data from JSON
-  static loadUsers(): { users: User[] } {
-    return DataReader.readJSON<{ users: User[] }>('users.json');
-  }
-
-  // Load form data from CSV
-  static async loadFormData(): Promise<FormData[]> {
-    return await DataReader.readCSV('formData.csv') as unknown as FormData[];
-  }
-
-  // Load config from YAML
-  static loadConfig(): Config {
-    return DataReader.readYAML<Config>('config.yaml');
-  }
+2) playwright.config.ts
+typescript
+import 'dotenv/config';
+import { defineConfig, devices } from '@playwright/test';
+import { defineBddConfig } from 'playwright-bdd';
+
+// BDD config for UI tests
+export const bddConfig = defineBddConfig({
+  features: ['tests/ui/features/**/*.feature'],
+  steps: [
+    'tests/ui/steps/**/*.steps.ts',
+    'tests/fixtures/pages.fixture.ts',
+  ],
+});
 
-  // Get specific user by username
-  static getUserByUsername(username: string): User | undefined {
-    const data = this.loadUsers();
-    return DataReader.getRecordByKey(data.users, 'username' as keyof User, username);
-  }
+export default defineConfig({
+  testDir: './tests',
+  timeout: 20 * 1000,
+  expect: {
+    timeout: 10 * 1000,
+  },
+  retries: process.env.CI ? 1 : 0,
+  reporter: [
+    ['html', { open: 'never' }],
+    ['list'],
+  ],
+  use: {
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
 
-  // Get form data by scenario name
-  static async getFormDataByScenario(scenarioName: string): Promise<FormData | undefined> {
-    const data = await this.loadFormData();
-    return DataReader.getRecordByKey(data, 'scenario' as keyof FormData, scenarioName);
-  }
-}
-```
+  projects: [
+    // =======================
+    // UI BDD TESTS
+    // =======================
+    {
+      name: 'ui',
+      testDir: './.features-gen',       // folder where Playwright-BDD generates .feature.spec.ts
+      testMatch: '**/*.feature.spec.*', // match .ts or .js files
+      use: {
+        ...devices['Desktop Chrome'],
+        headless: true,
+        baseURL: process.env.UI_BASE_URL,
+      },
 
-### 9. Test Data Files
+    },
 
-**`tests/data/users.json`**
-```json
-{
-  "users": [
+    // =======================
+    // API TESTS
+    // =======================
     {
-      "id": "1",
-      "username": "standard_user",
-      "password": "secret_sauce",
-      "email": "user@example.com",
-      "firstName": "John",
-      "lastName": "Doe"
+      name: 'api',
+      testMatch: /.*\.api\.spec\.ts/,
+      use: {
+        browserName: undefined,
+        baseURL: process.env.API_BASE_URL,
+        extraHTTPHeaders: {
+          'Content-Type': 'application/json',
+        },
+      },
     },
-    {
-      "id": "2",
-      "username": "problem_user",
-      "password": "secret_sauce",
-      "email": "problem@example.com",
-      "firstName": "Jane",
-      "lastName": "Smith"
-    }
-  ]
-}
-```
-
-**`tests/data/formData.csv`**
-```csv
-scenario,firstName,lastName,email,country,acceptTerms,newsletter
-registration_valid,John,Doe,john@example.com,USA,true,true
-registration_minimal,Jane,Smith,jane@example.com,Canada,true,false
-registration_eu,Pierre,Martin,pierre@example.com,France,true,true
-```
-
-**`tests/data/config.yaml`**
-```yaml
-app:
-  url: https://www.saucedemo.com/
-  timeout: 30000
-  
-users:
-  standard:
-    username: standard_user
-    password: secret_sauce
-  admin:
-    username: admin
-    password: admin123
-
-forms:
-  registration:
-    firstName: '#firstName'
-    lastName: '#lastName'
-    email: '#email'
-    country: '.country-dropdown'
-    acceptTerms: '#terms'
-    newsletter: '#newsletter'
-
-```
-
-### 10. Enhanced Page Object with Form Helper (`tests/pages/FormPage.js`)
-```javascript
-import { BasePage } from './BasePage';
-import { FormHelper } from '../utils/formHelper.js';
-import { TestDataManager } from '../utils/testData.js';
-
-export class FormPage extends BasePage {
-  constructor(page) {
-    super(page);
-    this.formHelper = new FormHelper(page);
-    this.config = TestDataManager.loadConfig();
-  }
 
-  async fillRegistrationForm(testDataKey) {
-    const formData = await TestDataManager.getFormDataByScenario(testDataKey);
-    
-    const formConfig = {
-      firstName: {
-        type: 'text',
-        selector: this.config.forms.registration.firstName,
-        value: formData.firstName
-      },
-      lastName: {
-        type: 'text',
-        selector: this.config.forms.registration.lastName,
-        value: formData.lastName
-      },
-      email: {
-        type: 'text',
-        selector: this.config.forms.registration.email,
-        value: formData.email
-      },
-      country: {
-        type: 'dropdown',
-        selector: this.config.forms.registration.country,
-        value: formData.country
-      },
-      acceptTerms: {
-        type: 'checkbox',
-        value: 'I accept the terms'
+    // =======================
+    // DB TESTS (NO BROWSER)
+    // =======================
+    {
+      name: 'db',
+      testMatch: /.*\.db\.spec\.ts/,
+      use: {
+        browserName: undefined,
       },
-      newsletter: {
-        type: 'checkbox',
-        value: formData.newsletter === 'true' ? 'Subscribe to newsletter' : null
-      }
-    };
-
-    for (const field of Object.values(formConfig)) {
-      if (field.value === null) continue;
-      
-      if (field.type === 'text') {
-        await this.formHelper.fillInput(field.selector, field.value);
-      } else if (field.type === 'dropdown') {
-        await this.formHelper.selectDropdown(field.selector, field.value);
-      } else if (field.type === 'checkbox') {
-        await this.formHelper.checkCheckbox(field.value);
-      }
-    }
-  }
-}
-```
+    },
+  ],
+});
+3) core/api/apiClient.ts
+typescript
+import type { APIRequestContext, APIResponse } from "@playwright/test";
 
-### 11. Enhanced Page Object with Form Helper (`tests/pages/FormPage.ts`) - TypeScript
-```typescript
-import { Page } from '@playwright/test';
-import { BasePage } from './BasePage';
-import { FormHelper } from '@utils/formHelper';
-import { TestDataManager } from '@utils/testData';
-
-export class FormPage extends BasePage {
-  readonly formHelper: FormHelper;
-  private config: any;
-
-  constructor(page: Page) {
-    super(page);
-    this.formHelper = new FormHelper(page);
-    this.config = TestDataManager.loadConfig();
-  }
+export const apiGet = (
+  request: APIRequestContext,
+  url: string,
+): Promise<APIResponse> => {
+  return request.get(url);
+};
 
-  async fillRegistrationForm(testDataKey: string): Promise<void> {
-    const formData = await TestDataManager.getFormDataByScenario(testDataKey);
-    if (!formData) throw new Error(`Form data not found for: ${testDataKey}`);
+export const apiPost = <T>(
+  request: APIRequestContext,
+  url: string,
+  payload?: T,
+): Promise<APIResponse> => {
+  return request.post(url, { data: payload });
+};
 
-    const formConfig = {
-      firstName: {
-        type: 'text' as const,
-        selector: this.config.forms.registration.firstName,
-        value: formData.firstName
-      },
-      lastName: {
-        type: 'text' as const,
-        selector: this.config.forms.registration.lastName,
-        value: formData.lastName
-      },
-      email: {
-        type: 'text' as const,
-        selector: this.config.forms.registration.email,
-        value: formData.email
-      },
-      country: {
-        type: 'dropdown' as const,
-        selector: this.config.forms.registration.country,
-        value: formData.country
-      },
-      acceptTerms: {
-        type: 'checkbox' as const,
-        value: 'I accept the terms'
-      },
-      newsletter: {
-        type: 'checkbox' as const,
-        value: formData.newsletter === 'true' ? 'Subscribe to newsletter' : null
-      }
-    };
-
-    for (const field of Object.values(formConfig)) {
-      if (field.value === null) continue;
-
-      if (field.type === 'text') {
-        await this.formHelper.fillInput(field.selector!, field.value as string);
-      } else if (field.type === 'dropdown') {
-        await this.formHelper.selectDropdown(field.selector!, field.value as string);
-      } else if (field.type === 'checkbox') {
-        await this.formHelper.checkCheckbox(field.value as string);
-      }
-    }
-  }
-}
-```
-
-### 12. Fixtures Setup (`tests/fixtures/base.fixture.ts`) - TypeScript
-```typescript
-import { test as base, expect } from '@playwright/test';
-import { LoginPage } from '@pages/LoginPage';
-import { InventoryPage } from '@pages/InventoryPage';
-import { FormPage } from '@pages/FormPage';
-
-type AuthFixtures = {
-  loginPage: LoginPage;
-  inventoryPage: InventoryPage;
-  formPage: FormPage;
-  authenticatedUser: { page: any; loginPage: LoginPage };
+export const apiPut = <T>(
+  request: APIRequestContext,
+  url: string,
+  payload?: T,
+): Promise<APIResponse> => {
+  return request.put(url, { data: payload });
 };
 
-export const test = base.extend<AuthFixtures>({
-  loginPage: async ({ page }, use) => {
-    const loginPage = new LoginPage(page);
-    await use(loginPage);
+export const apiDelete = (
+  request: APIRequestContext,
+  url: string,
+): Promise<APIResponse> => {
+  return request.delete(url);
+};
+4) core/db/connection.ts
+typescript
+import sql from 'mssql';
+
+const config: sql.config = {
+  server: process.env.DB_HOST!,
+  database: process.env.DB_NAME!,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  options: {
+    trustServerCertificate: true,
   },
+};
 
-  inventoryPage: async ({ page }, use) => {
-    const inventoryPage = new InventoryPage(page);
-    await use(inventoryPage);
-  },
+export async function getDbPool(): Promise<sql.ConnectionPool> {
+  return sql.connect(config);
+}
+5) core/db/queries.ts
+typescript
+import type { ConnectionPool } from 'mssql';
+
+export async function listTables(db: ConnectionPool) {
+  const result = await db.request().query(`
+    SELECT TABLE_SCHEMA, TABLE_NAME
+    FROM INFORMATION_SCHEMA.TABLES
+    WHERE TABLE_TYPE = 'BASE TABLE'
+  `);
+
+  return result.recordset;
+}
+6) core/auth/roles.ts
+typescript
+export enum UserRole {
+  SYSTEM_ADMIN = 'SYSTEM_ADMIN',
+  AREA_ADMIN = 'AREA_ADMIN',
+  VIEW_ONLY = 'VIEW_ONLY',
+}
+7) core/permission/permission.types.ts
+typescript
+export enum Scope {
+  ANY = 'ANY',
+  OWN_AREA = 'OWN_AREA',
+  NONE = 'NONE',
+}
+8) core/permission/permission.schd-group.ts
+typescript
+import { UserRole } from '../auth/roles';
+import { Scope } from './permission.types';
+
+export type SchedulingGroupPermissions = {
+  view: Scope;
+  create: Scope;
+  edit: Scope;
+  delete: Scope;
+};
 
-  formPage: async ({ page }, use) => {
-    const formPage = new FormPage(page);
-    await use(formPage);
+export const schedulingGroupPermissions: Record<
+  UserRole,
+  SchedulingGroupPermissions
+> = {
+  [UserRole.SYSTEM_ADMIN]: {
+    view: Scope.ANY,
+    create: Scope.ANY,
+    edit: Scope.ANY,
+    delete: Scope.ANY,
   },
 
-  authenticatedUser: async ({ page, loginPage }, use) => {
-    await loginPage.goto();
-    await loginPage.login('standard_user', 'secret_sauce');
-    await use({ page, loginPage });
+  [UserRole.AREA_ADMIN]: {
+    view: Scope.OWN_AREA,
+    create: Scope.OWN_AREA,
+    edit: Scope.OWN_AREA,
+    delete: Scope.NONE,
   },
-});
-
-export { expect };
-```
 
-### 13. Base Page (`tests/pages/BasePage.ts`) - TypeScript
-```typescript
-import { Page, Locator } from '@playwright/test';
-
-export class BasePage {
-  protected readonly page: Page;
-
-  constructor(page: Page) {
-    this.page = page;
-  }
-
-  async navigateTo(url: string): Promise<void> {
-    await this.page.goto(url);
-  }
-
-  async click(selector: string): Promise<void> {
-    await this.page.click(selector);
-  }
-
-  async fill(selector: string, text: string): Promise<void> {
-    await this.page.fill(selector, text);
-  }
-
-  async getText(selector: string): Promise<string | null> {
-    return await this.page.textContent(selector);
-  }
-
-  async getLocator(selector: string): Locator {
-    return this.page.locator(selector);
-  }
-
-  async waitForElement(selector: string, timeout: number = 5000): Promise<void> {
-    await this.page.waitForSelector(selector, { timeout });
-  }
-
-  async isVisible(selector: string): Promise<boolean> {
-    return await this.page.locator(selector).isVisible();
-  }
+  [UserRole.VIEW_ONLY]: {
+    view: Scope.OWN_AREA,
+    create: Scope.NONE,
+    edit: Scope.NONE,
+    delete: Scope.NONE,
+  },
+};
+9) workflows/schd-group/api/schd-group.api.ts
+typescript
+import { APIRequestContext } from '@playwright/test';
+import {
+  apiGet,
+  apiPost,
+  apiPut,
+  apiDelete,
+} from '../../../core/api/apiClient';
+
+export function createSchedulingGroup(
+  api: APIRequestContext,
+  payload: {
+    area: string;
+    groupName: string;
+    allocationsMenu?: boolean;
+    notes?: string;
+  }
+) {
+  return apiPost(api, '/scheduling-groups', payload);
 }
-```
-
-### 14. Page Object Model (`tests/pages/LoginPage.ts`) - TypeScript
-```typescript
-import { BasePage } from './BasePage';
-
-export class LoginPage extends BasePage {
-  private readonly usernameField = '[data-test="username"]';
-  private readonly passwordField = '[data-test="password"]';
-  private readonly loginButton = '[data-test="login-button"]';
-  private readonly appUrl = 'https://www.saucedemo.com/';
 
-  async goto(): Promise<void> {
-    await this.page.goto(this.appUrl);
-  }
-
-  async login(username: string, password: string): Promise<void> {
-    await this.page.fill(this.usernameField, username);
-    await this.page.fill(this.passwordField, password);
-    await this.page.click(this.loginButton);
-    await this.page.waitForURL('**/inventory.html');
-  }
-
-  async isLoaded(): Promise<boolean> {
-    return await this.page.locator(this.usernameField).isVisible();
-  }
+export function editSchedulingGroup(
+  api: APIRequestContext,
+  id: number,
+  payload: {
+    area?: string;
+    groupName?: string;
+    allocationsMenu?: boolean;
+    notes?: string;
+  }
+) {
+  return apiPut(api, `/scheduling-groups/${id}`, payload);
 }
-```
-
-### 15. Inventory Page (`tests/pages/InventoryPage.ts`) - TypeScript
-```typescript
-import { BasePage } from './BasePage';
-
-export class InventoryPage extends BasePage {
-  private readonly cartBadge = '[data-test="shopping-cart-badge"]';
-  private readonly addToCartBtn = '[data-test="add-to-cart-sauce-labs-backpack"]';
-  private readonly menuButton = '[data-test="bm-menu-button"]';
-  private readonly logoutLink = '[data-test="logout-sidebar-link"]';
-
-  async addProductToCart(): Promise<void> {
-    await this.click(this.addToCartBtn);
-  }
 
-  async getCartCount(): Promise<string | null> {
-    return await this.getText(this.cartBadge);
-  }
-
-  async isProductAdded(): Promise<string | null> {
-    await this.waitForElement(this.cartBadge);
-    return await this.getText(this.cartBadge);
-  }
+export function deleteSchedulingGroup(
+  api: APIRequestContext,
+  id: number
+) {
+  return apiDelete(api, `/scheduling-groups/${id}`);
+}
 
-  async logout(): Promise<void> {
-    await this.click(this.menuButton);
-    await this.click(this.logoutLink);
-    await this.page.waitForURL('https://www.saucedemo.com/');
+export function listSchedulingGroups(
+  api: APIRequestContext
+) {
+  return apiGet(api, '/scheduling-groups');
+}
+10) workflows/schd-group/db/schd-group.queries.ts
+typescript
+import sql from 'mssql';
+
+export class SchedulingGroupQueries {
+  static async getByName(
+    db: sql.ConnectionPool,
+    name: string
+  ) {
+    const result = await db
+      .request()
+      .input('name', sql.VarChar, name)
+      .query(`
+        SELECT *
+        FROM scheduling_groups
+        WHERE scheduling_group_name = @name
+      `);
+
+    return result.recordset[0];
+  }
+
+  static async getById(
+    db: sql.ConnectionPool,
+    id: number
+  ) {
+    const result = await db
+      .request()
+      .input('id', sql.Int, id)
+      .query(`
+        SELECT *
+        FROM scheduling_groups
+        WHERE id = @id
+      `);
+
+    return result.recordset[0];
+  }
+
+  static async exists(
+    db: sql.ConnectionPool,
+    name: string
+  ): Promise<boolean> {
+    const record = await this.getByName(db, name);
+    return !!record;
+  }
+
+  static async listByArea(
+    db: sql.ConnectionPool,
+    area: string
+  ) {
+    const result = await db
+      .request()
+      .input('area', sql.VarChar, area)
+      .query(`
+        SELECT *
+        FROM scheduling_groups
+        WHERE area = @area
+      `);
+
+    return result.recordset;
+  }
+
+  static async getHistory(
+    db: sql.ConnectionPool,
+    groupId: number
+  ) {
+    const result = await db
+      .request()
+      .input('id', sql.Int, groupId)
+      .query(`
+        SELECT *
+        FROM scheduling_group_history
+        WHERE scheduling_group_id = @id
+        ORDER BY amended_date DESC
+      `);
+
+    return result.recordset;
   }
 }
-```
-
-### 16. Clean Test File with TypeScript (`tests/specs/saucedemo.spec.ts`)
-```typescript
-import { test, expect } from '@fixtures/base.fixture';
-
-test.describe('SauceDemo E2E Tests', () => {
-  test('Login with valid credentials', async ({ loginPage, page }) => {
-    await loginPage.goto();
-    await loginPage.login('standard_user', 'secret_sauce');
-    expect(page.url()).toContain('inventory.html');
-  });
-
-  test('Add product to cart', async ({ authenticatedUser, inventoryPage }) => {
-    await inventoryPage.addProductToCart();
-    const cartCount = await inventoryPage.getCartCount();
-    expect(cartCount).toBe('1');
-  });
-
-  test('Logout from inventory', async ({ authenticatedUser, inventoryPage, page }) => {
-    await inventoryPage.logout();
-    expect(page.url()).toBe('https://www.saucedemo.com/');
-  });
-});
-```
-
-### 17. Form Test with Data (`tests/specs/formTest.spec.ts`)
-```typescript
-import { test, expect } from '@fixtures/base.fixture';
-import { TestDataManager } from '@utils/testData';
-
-test.describe('Form Registration Tests with TypeScript', () => {
-  test('Register with JSON user data', async ({ formPage, page }) => {
-    const user = TestDataManager.getUserByUsername('standard_user');
-    expect(user).toBeDefined();
-
-    await page.goto('https://example.com/register');
-    await formPage.formHelper.fillInput('#firstName', user!.firstName);
-    await formPage.formHelper.fillInput('#lastName', user!.lastName);
-    await formPage.formHelper.fillInput('#email', user!.email);
-
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
-  });
-
-  test.describe.configure({ mode: 'parallel' });
-
-  test('Register with CSV test data - Valid', async ({ formPage, page }) => {
-    await page.goto('https://example.com/register');
-    await formPage.fillRegistrationForm('registration_valid');
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
-  });
-
-  test('Register with CSV test data - Minimal', async ({ formPage, page }) => {
-    await page.goto('https://example.com/register');
-    await formPage.fillRegistrationForm('registration_minimal');
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
-  });
-});
-```
-
-### 18. Run Tests
-```bash
-# Run all tests in parallel (4 workers)
-npm test
-
-# Run specific test file
-npm test tests/specs/saucedemo.spec.ts
-
-# Run tests with UI (single worker)
-npm run test:headed
-
-# Debug mode
-npm run test:debug
-
-# Run with custom worker count
-npm test -- --workers=2
-
-# Run BDD scenarios
-npm run test:bdd
-
-# Run BDD scenarios with JSON report
-npm run test:bdd:report
-
-# Run specific BDD feature
-npx @cucumber/cucumber-js tests/features/login.feature
-```
-
-### 19. BDD Feature File (`tests/features/login.feature`)
-```gherkin
-Feature: Login to SauceDemo
-  As a user
-  I want to login to the application
-  So that I can access the inventory
-
-  Background:
-    Given I navigate to the SauceDemo application
-
-  Scenario: User logs in with valid credentials
-    When I login with username "standard_user" and password "secret_sauce"
-    Then I should see the inventory page
-    And the page title should contain "Inventory"
-
-  Scenario: User logs in and adds product to cart
-    When I login with username "standard_user" and password "secret_sauce"
-    And I add "Sauce Labs Backpack" to cart
-    Then the cart count should show "1"
-    And the product should be in the cart
-
-  Scenario: User can logout
-    When I login with username "standard_user" and password "secret_sauce"
-    And I click the menu button
-    And I click logout
-    Then I should be back on the login page
-```
-
-### 20. BDD Step Definitions with TypeScript (`tests/steps/loginSteps.ts`)
-```typescript
-import { Given, When, Then, Before, After } from '@cucumber/cucumber';
-import { chromium, Browser, Page } from '@playwright/test';
-import { LoginPage } from '@pages/LoginPage';
-import { InventoryPage } from '@pages/InventoryPage';
-
-let browser: Browser;
-let page: Page;
-let loginPage: LoginPage;
-let inventoryPage: InventoryPage;
-
-Before(async function() {
-  browser = await chromium.launch();
-  page = await browser.newPage();
-  loginPage = new LoginPage(page);
-  inventoryPage = new InventoryPage(page);
-});
-
-After(async function() {
-  await page.close();
-  await browser.close();
-});
-
-Given('I navigate to the SauceDemo application', async function() {
-  await loginPage.goto();
-});
-
-When('I login with username {string} and password {string}', async function(username: string, password: string) {
-  await loginPage.login(username, password);
-});
+11) tests/fixtures/pages.fixture.ts
+typescript
+import { test as bddTest } from 'playwright-bdd';
+import { expect } from '@playwright/test';
+import { HomePage } from '../ui/page/HomePage'; 
+
+export type PageFixtures = {
+  homePage: HomePage;
+};
 
-Then('I should see the inventory page', async function() {
-  await page.waitForURL('**/inventory.html');
-});
 
-Then('the page title should contain {string}', async function(title: string) {
-  const pageTitle = await page.title();
-  if (!pageTitle.includes(title)) {
-    throw new Error(`Expected title to contain "${title}" but got "${pageTitle}"`);
-  }
+export const test = bddTest.extend<PageFixtures>({
+  homePage: async ({ page }, use) => {
+    const homePage = new HomePage(page);
+    await use(homePage);
+  },
 });
 
-When('I add {string} to cart', async function(productName: string) {
-  const addBtn = '[data-test="add-to-cart-sauce-labs-backpack"]';
-  await page.click(addBtn);
-});
+export { expect };
+12) tests/fixtures/test.fixture.ts
+typescript
+import {
+  test as base,
+  expect,
+  request,
+  APIRequestContext,
+} from '@playwright/test';
+import sql from 'mssql';
+import { getDbPool } from '../../core/db/connection';
+
+type TestFixtures = {
+  apiAsSystemAdmin: APIRequestContext;
+  apiAsAreaAdmin: APIRequestContext;
+  db: sql.ConnectionPool;
+};
 
-Then('the cart count should show {string}', async function(count: string) {
-  const cartCount = await inventoryPage.getCartCount();
-  if (cartCount !== count) {
-    throw new Error(`Expected cart count "${count}" but got "${cartCount}"`);
-  }
-});
+export const test = base.extend<TestFixtures>({
+  apiAsSystemAdmin: async ({}, use) => {
+    const api = await request.newContext({
+      baseURL: process.env.API_BASE_URL,
+      storageState: 'storage/system-admin.json',
+    });
 
-When('I click the menu button', async function() {
-  await page.click('[data-test="bm-menu-button"]');
-});
+    await use(api);
+    await api.dispose();
+  },
 
-When('I click logout', async function() {
-  await page.click('[data-test="logout-sidebar-link"]');
-});
+  apiAsAreaAdmin: async ({}, use) => {
+    const api = await request.newContext({
+      baseURL: process.env.API_BASE_URL,
+      storageState: 'storage/area-admin.json',
+    });
 
-Then('I should be back on the login page', async function() {
-  await page.waitForURL('https://www.saucedemo.com/');
-});
-```
-});
+    await use(api);
+    await api.dispose();
+  },
 
-test('Logout from inventory', async ({ authenticatedUser, page }) => {
-  await page.click('[data-test="bm-menu-button"]');
-  await page.click('[data-test="logout-sidebar-link"]');
-  await expect(page).toHaveURL('https://www.saucedemo.com/');
-});
-```
-
-### 17. BDD Feature File (`tests/features/login.feature`)
-```gherkin
-Feature: Login to SauceDemo
-  As a user
-  I want to login to the application
-  So that I can access the inventory
-
-  Background:
-    Given I navigate to the SauceDemo application
-
-  Scenario: User logs in with valid credentials
-    When I login with username "standard_user" and password "secret_sauce"
-    Then I should see the inventory page
-    And the page title should contain "Inventory"
-
-  Scenario: User logs in and adds product to cart
-    When I login with username "standard_user" and password "secret_sauce"
-    And I add "Sauce Labs Backpack" to cart
-    Then the cart count should show "1"
-    And the product should be in the cart
-
-  Scenario: User can logout
-    When I login with username "standard_user" and password "secret_sauce"
-    And I click the menu button
-    And I click logout
-    Then I should be back on the login page
-```
-
-### 18. BDD Shopping Feature (`tests/features/shopping.feature`)
-```gherkin
-Feature: Shopping Cart
-  As a user
-  I want to manage my shopping cart
-  So that I can purchase items
-
-  Background:
-    Given I am logged into the application
-
-  Scenario: Add single item to cart
-    When I add "Sauce Labs Backpack" to cart
-    Then the cart count should show "1"
-
-  Scenario: Add multiple items to cart
-    When I add "Sauce Labs Backpack" to cart
-    And I add "Sauce Labs Bike Light" to cart
-    Then the cart count should show "2"
-
-  Scenario: Remove item from cart
-    When I add "Sauce Labs Backpack" to cart
-    And I remove "Sauce Labs Backpack" from cart
-    Then the cart should be empty
-```
-
-### 19. BDD Step Definitions (`tests/steps/loginSteps.js`)
-```javascript
-import { Given, When, Then, Before, After } from '@cucumber/cucumber';
-import { chromium } from 'playwright';
-import { LoginPage } from '../pages/LoginPage';
-import { InventoryPage } from '../pages/InventoryPage';
-
-let browser;
-let page;
-let loginPage;
-let inventoryPage;
-
-Before(async function() {
-  browser = await chromium.launch();
-  page = await browser.newPage();
-  loginPage = new LoginPage(page);
-  inventoryPage = new InventoryPage(page);
+  db: async ({}, use) => {
+    const pool = await getDbPool();
+    await use(pool);
+    await pool.close();
+  },
 });
 
-After(async function() {
-  await page.close();
-  await browser.close();
-});
+export { expect };
+13) tests/ui/steps/booking.steps.ts
+typescript
+import { createBdd } from 'playwright-bdd';
+import {test} from '@fixtures/pages.fixture'
 
-Given('I navigate to the SauceDemo application', async function() {
-  await loginPage.goto();
-});
 
-When('I login with username {string} and password {string}', async function(username, password) {
-  await loginPage.login(username, password);
-});
+const { Given, When, Then } = createBdd(test);
 
-Then('I should see the inventory page', async function() {
-  await page.waitForURL('**/inventory.html');
-});
+Given('user opens the Allocate application', async ({ homePage }) => {
+  await homePage.open();
+  await homePage.isBbcMenuLoaded();
 
-Then('the page title should contain {string}', async function(title) {
-  const pageTitle = await page.title();
-  if (!pageTitle.includes(title)) {
-    throw new Error(`Expected title to contain "${title}" but got "${pageTitle}"`);
-  }
 });
+When('user create new facility', async ({homePage}) => {
 
-When('I add {string} to cart', async function(productName) {
-  const addBtn = '[data-test="add-to-cart-sauce-labs-backpack"]';
-  await page.click(addBtn);
-});
+  await homePage.createFacility()
 
-Then('the cart count should show {string}', async function(count) {
-  const cartCount = await inventoryPage.getCartCount();
-  if (cartCount !== count) {
-    throw new Error(`Expected cart count "${count}" but got "${cartCount}"`);
-  }
-});
+  await homePage.verifyFacilityAdded()
 
-When('I click the menu button', async function() {
-  await page.click('[data-test="bm-menu-button"]');
-});
+  await homePage.assertViewFacility()
 
-When('I click logout', async function() {
-  await page.click('[data-test="logout-sidebar-link"]');
+  await homePage.deleteFacility()
+  
 });
+14) tests/ui/steps/scheduling-groups.steps.ts
+typescript
+
+import { createBdd } from 'playwright-bdd';
+import { test,expect } from '@fixtures/pages.fixture';
+
+const { Given, When, Then } = createBdd(test);
+
+Given('user switches to System Admin role', async ({homePage}) => {
+ await homePage.open();
+  const isBbcMenuLoaded = await homePage.isBbcMenuLoaded();
+  expect(isBbcMenuLoaded).toBe(true);
+});
+
+// When('user navigates to Scheduling Groups page', async ({homePage}) => {
+//   // From: tests\ui\features\scheduling-groups.feature:16:5
+// });
+
+// When('user creates a scheduling group {string} in {string} with allocations menu {string}', async ({}, arg: string, arg1: string, arg2: string) => {
+//   // Step: And user creates a scheduling group "Auto_SystemAdmin_" in "Manchester" with allocations menu "Yes"
+//   // From: tests\ui\features\scheduling-groups.feature:17:5
+// });
+
+// Then('user can see the new scheduling group in the list', async ({}) => {
+//   // Step: Then user can see the new scheduling group in the list
+//   // From: tests\ui\features\scheduling-groups.feature:18:5
+// });
+15) tests/ui/features/booking.feature
+feature
+@smoke
+Feature: Booking navigation
+
+  Scenario: Navigate to Facility Catalogue
+    Given user opens the Allocate application
+    When user create new facility
+16) tests/ui/features/scheduling-groups.feature
+feature
+@smoke @scheduling-groups
+Feature: Scheduling Groups Management
+
+  @system-admin
+  Scenario: System Admin - Create a new Scheduling Group in any area
+    Given user opens the Allocate application
+    And user switches to System Admin role
+    When user navigates to Scheduling Groups page
+    And user creates a scheduling group "Auto_SystemAdmin_" in "Area" 
+    Then user can see the new scheduling group in the list
+17) tests/ui/page/HomePage.ts (already present in repo)
+typescript
+<content from existing file - see repo for full source>
+18) tests/api/schd-group-create.api.spec.ts
+typescript
+import { test, expect } from "../../tests/fixtures/test.fixture";
+import { createSchedulingGroup } from "../../workflows/schd-group/api/schd-group.api";
+import { SchedulingGroupQueries } from "../../workflows/schd-group/db/schd-group.queries";
+import { assertGroupExists } from "../../workflows/schd-group/invariants/db.invariants";
+
+test("System Admin can create Scheduling Group in any Area", async ({apiAsSystemAdmin,db}) => {
+  const payload = {
+    area: "Manchester",
+    groupName: `Auto_${Date.now()}`,
+  };
 
-Then('I should be back on the login page', async function() {
-  await page.waitForURL('https://www.saucedemo.com/');
-});
-```
-
-### 20. BDD Shopping Steps (`tests/steps/shoppingSteps.js`)
-```javascript
-import { Given, When, Then } from '@cucumber/cucumber';
-import { LoginPage } from '../pages/LoginPage';
-
-let page;
-let loginPage;
-
-Given('I am logged into the application', async function() {
-  const { page: gherkinPage } = this;
-  page = gherkinPage;
-  loginPage = new LoginPage(page);
-  await loginPage.goto();
-  await loginPage.login('standard_user', 'secret_sauce');
-});
 
-When('I remove {string} from cart', async function(productName) {
-  const removeBtn = '[data-test="remove-sauce-labs-backpack"]';
-  await page.click(removeBtn);
-});
+  //api
+  const res = await createSchedulingGroup(apiAsSystemAdmin, payload);
+  expect(res.status()).toBe(201);
 
-Then('the cart should be empty', async function() {
-  const cartBadge = page.locator('[data-test="shopping-cart-badge"]');
-  const isHidden = await cartBadge.isHidden().catch(() => true);
-  if (!isHidden) {
-    throw new Error('Cart is not empty');
-  }
-});
+  const record = await SchedulingGroupQueries.getByName(db, payload.groupName);
 
-Then('the product should be in the cart', async function() {
-  const badge = await page.locator('[data-test="shopping-cart-badge"]').isVisible();
-  if (!badge) {
-    throw new Error('Product not found in cart');
-  }
+  //db
+  assertGroupExists(record);
 });
-```
-
-### 21. Run Tests
-```bash
-# Run all tests in parallel (4 workers)
-npm test
-
-# Run specific test file
-npm test tests/specs/saucedemo.spec.js
-
-# Run tests with UI (single worker)
-npm run test:headed
-
-# Debug mode
-npm run test:debug
-
-# Run with custom worker count
-npm test -- --workers=2
-
-# Run BDD scenarios
-npm run test:bdd
-
-# Run BDD scenarios with JSON report
-npm run test:bdd:report
 
-# Run specific BDD feature
-npx @cucumber/cucumber-js tests/features/login.feature
-```
-
-### 22. Example Test Using Utilities (`tests/specs/formTest.spec.js`)
-```javascript
-import { test, expect } from '../fixtures/base.fixture';
-import { FormPage } from '../pages/FormPage';
-import { TestDataManager } from '../utils/testData';
-
-test.describe('Form Registration with Test Data', () => {
-  let formPage;
-
-  test.beforeEach(async ({ page }) => {
-    formPage = new FormPage(page);
-    await page.goto('https://example.com/register');
-  });
-
-  test('Register with JSON user data', async ({ page }) => {
-    const user = TestDataManager.getUserByUsername('standard_user');
-    
-    await formPage.formHelper.fillInput('#firstName', user.firstName);
-    await formPage.formHelper.fillInput('#lastName', user.lastName);
-    await formPage.formHelper.fillInput('#email', user.email);
-    
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
-  });
-
-  test('Register with CSV test scenarios', async ({ page }) => {
-    await formPage.fillRegistrationForm('registration_valid');
-    
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
+test("Scheduling Group Name is mandatory", async ({ apiAsSystemAdmin }) => {
+  const res = await apiAsSystemAdmin.post("/scheduling-groups", {
+    data: { area: "London" },
   });
 
-  test('Fill complex form with multiple field types', async ({ page }) => {
-    const formConfig = {
-      firstName: {
-        type: 'text',
-        selector: '#firstName',
-        value: 'John'
-      },
-      country: {
-        type: 'dropdown',
-        selector: '.country-select',
-        value: 'United States'
-      },
-      gender: {
-        type: 'radio',
-        value: 'Male'
-      },
-      interests: {
-        type: 'checkbox',
-        value: ['Sports', 'Gaming', 'Reading']
-      },
-      terms: {
-        type: 'checkbox',
-        value: 'I accept terms'
-      }
-    };
-
-    // Use helper to fill entire form
-    for (const field of Object.values(formConfig)) {
-      if (field.type === 'text') {
-        await formPage.formHelper.fillInput(field.selector, field.value);
-      } else if (field.type === 'dropdown') {
-        await formPage.formHelper.selectDropdown(field.selector, field.value);
-      } else if (field.type === 'radio') {
-        await formPage.formHelper.selectRadioButton(field.value);
-      } else if (field.type === 'checkbox') {
-        if (Array.isArray(field.value)) {
-          await formPage.formHelper.checkMultiple(field.value);
-        } else {
-          await formPage.formHelper.checkCheckbox(field.value);
-        }
-      }
-    }
-
-    await page.click('button[type="submit"]');
-    await expect(page).toHaveURL('**/success');
-  });
-
-  test('Verify form values after filling', async ({ page }) => {
-    await formPage.formHelper.fillInput('#firstName', 'John');
-    await formPage.formHelper.checkCheckbox('I accept terms');
-    
-    const firstName = await formPage.formHelper.getInputValue('#firstName');
-    const isTermsChecked = await formPage.formHelper.isCheckboxChecked('I accept terms');
-    
-    expect(firstName).toBe('John');
-    expect(isTermsChecked).toBe(true);
-  });
+  expect(res.status()).toBe(400);
 });
-```
-
-### 23. BDD Step with Test Data Integration
-```gherkin
-Feature: Registration with Test Data
-  As a new user
-  I want to register using predefined test data
-  So that I can access the application
-
-  Scenario: Register with JSON test data
-    Given I navigate to the registration page
-    When I fill the form with user data "standard_user"
-    And I accept the terms and conditions
-    And I submit the form
-    Then I should see the success message
-
-  Scenario Outline: Register with CSV test scenarios
-    Given I navigate to the registration page
-    When I fill first name with "<firstName>"
-    And I fill last name with "<lastName>"
-    And I fill email with "<email>"
-    And I select country "<country>"
-    And I check "<acceptTerms>"
-    And I submit the form
-    Then I should see the success message
-
-    Examples:
-      | firstName | lastName | email          | country | acceptTerms |
-      | John      | Doe      | john@test.com  | USA     | true        |
-      | Jane      | Smith    | jane@test.com  | Canada  | true        |
-      | Pierre    | Martin   | pierre@test.fr | France  | true        |
-```
-
-## Developer Quick Start
-
-### Using Test Data & Form Helpers
-**Step 1:** Create test data files in `tests/data/` (JSON, CSV, YAML)
-**Step 2:** Use `DataReader` to load test data:
-```javascript
-const users = DataReader.readJSON('users.json');
-const formData = await DataReader.readCSV('formData.csv');
-const config = DataReader.readYAML('config.yaml');
-```
-
-**Step 3:** Use `FormHelper` for complex form interactions:
-```javascript
-const formHelper = new FormHelper(page);
-await formHelper.fillInput('#name', 'John');
-await formHelper.selectDropdown('.country', 'USA');
-await formHelper.checkMultiple(['Option1', 'Option2']);
-```
-
-**Step 4:** Create page objects that combine both:
-```javascript
-const formPage = new FormPage(page);
-await formPage.fillRegistrationForm('registration_valid');
-```
-
-### Traditional Playwright Tests
-**Step 1:** Copy project structure from Section 4
-**Step 2:** Create page objects in `tests/pages/` (copy LoginPage & InventoryPage)
-**Step 3:** Import fixtures in your tests: `import { test, expect } from '../fixtures/base.fixture'`
-**Step 4:** Use fixtures in tests: `test('my test', async ({ loginPage, authenticatedUser }) => { ... })`
-**Step 5:** Run: `npm test`
-
-### BDD Scenarios
-**Step 1:** Create `.feature` files in `tests/features/` with Gherkin scenarios
-**Step 2:** Create step definitions in `tests/steps/` (copy loginSteps & shoppingSteps)
-**Step 3:** Map steps to page objects (reuse LoginPage, InventoryPage)
-**Step 4:** Configure `cucumber.js` for parallel execution
-**Step 5:** Run: `npm run test:bdd`
-
-## Verification Checklist
-✅ Chromium browser installed (`npx playwright install chromium`)
-✅ TypeScript configured (`typescript @types/node` installed + `tsconfig.json` created)
-✅ All dependencies installed (`npm install` + `@cucumber/cucumber` + `csv-parser`, `js-yaml`, `@types/js-yaml`)
-✅ TypeScript paths configured in `tsconfig.json` (@pages/*, @utils/*, @fixtures/*, @data/*)
-✅ Playwright config in TypeScript (`playwright.config.ts` with latest imports)
-✅ Folder structure created (all `.ts` files: `tests/pages/`, `tests/fixtures/`, `tests/specs/`, `tests/features/`, `tests/steps/`, `tests/utils/`, `tests/data/`)
-✅ Base fixtures created with TypeScript typing (`base.fixture.ts`)
-✅ Cucumber configuration created (`cucumber.js` with ts-node support)
-✅ Page Object Model classes in TypeScript with type safety
-✅ Step definitions in TypeScript with proper typing
-✅ Feature files created (login.feature, shopping.feature)
-✅ Utilities created in TypeScript (dataReader.ts, formHelper.ts, testData.ts with interfaces)
-✅ Test data files created (users.json, formData.csv, config.yaml)
-✅ Enhanced page objects in TypeScript (FormPage.ts with utilities integrated)
-✅ Modern ES module imports throughout (import/export)
-✅ Parallel execution enabled (`fullyParallel: true` & Cucumber parallel: 4)
-✅ Tests execute in parallel against single Chromium browser
-✅ Both Playwright & BDD tests configured with full TypeScript support
-
-## Best Practices for Scalability & TypeScript
-✅ **Use Fixtures** - Pre-set up authenticated users, page objects (base.fixture.ts with types)
-✅ **Page Object Model** - Encapsulate selectors & actions in TypeScript classes
-✅ **Type Safety** - Full TypeScript typing for all utilities, pages, and tests
-✅ **Test Data Management** - Use JSON, CSV, YAML with DataReader (fully typed)
-✅ **Form Helpers** - Reusable FormHelper for all form interactions (typed interfaces)
-✅ **BDD for Non-Technical Stakeholders** - Write scenarios in Gherkin (Feature files)
-✅ **Parallel Execution** - Tests & scenarios run simultaneously (4 workers by default)
-✅ **Minimal Developer Effort** - Write only test logic, reuse fixtures, pages, steps & utilities
-✅ **Chromium Only** - Single browser reduces flakiness & speeds up execution
-✅ **Retry Failed Tests** - Automatic retries improve reliability
-✅ **Capture Failures** - Screenshots & videos on failures for debugging
-✅ **Dual Approach** - Mix traditional tests & BDD scenarios based on needs
-✅ **Module Path Aliases** - Use @pages/, @utils/, @fixtures/, @data/ for clean imports
-✅ **Latest Playwright** - Uses latest Playwright APIs with modern module syntax
-✅ **Parameterized Tests** - Use CSV data for scenario outlines (data-driven testing)
-✅ **Form Helpers** - Reusable FormHelper for all form interactions (text, dropdown, radio, checkbox)
-✅ **BDD for Non-Technical Stakeholders** - Write scenarios in Gherkin (Feature files)
-✅ **Parallel Execution** - Tests & scenarios run simultaneously (4 workers by default)
-✅ **Minimal Developer Effort** - Write only test logic, reuse fixtures, pages, steps & utilities
-✅ **Chromium Only** - Single browser reduces flakiness & speeds up execution
-✅ **Retry Failed Tests** - Automatic retries improve reliability
-✅ **Capture Failures** - Screenshots & videos on failures for debugging
-✅ **Dual Approach** - Mix traditional tests & BDD scenarios based on needs
-✅ **Parameterized Tests** - Use CSV data for scenario outlines (data-driven testing)
-✅ **Full TypeScript Support** - All code written in TypeScript with strict mode enabled
-✅ **Path Aliases** - Clean imports using @pages/, @utils/, @fixtures/, @data/ prefixes
-
-## How to Use Test Data & Utilities (TypeScript)
-
-### 1. Loading Test Data
-```typescript
-import { TestDataManager } from '@utils/testData';
-
-// Get user by username (fully typed)
-const user = TestDataManager.getUserByUsername('standard_user');
-
-// Get form data by scenario
-const formData = await TestDataManager.getFormDataByScenario('registration_valid');
-
-// Load all config with type safety
-const config = TestDataManager.loadConfig();
-```
-
-### 2. Form Interactions with Type Safety
-```typescript
-import { FormHelper } from '@utils/formHelper';
-import { Page } from '@playwright/test';
-
-const formHelper = new FormHelper(page);
-
-// Text input
-await formHelper.fillInput('#firstName', 'John');
-
-// Dropdown (non-select)
-await formHelper.selectDropdown('.country-dropdown', 'USA');
-
-// Radio button
-await formHelper.selectRadioButton('Male');
-
-// Single checkbox
-await formHelper.checkCheckbox('I accept terms');
-
-// Multiple checkboxes
-await formHelper.checkMultiple(['Option1', 'Option2', 'Option3']);
-
-// Get and verify values (fully typed)
-const firstName = await formHelper.getInputValue('#firstName');
-const isChecked = await formHelper.isCheckboxChecked('I accept terms');
-```
+19) tests/db/01-connection.db.spec.ts
+typescript
+import { test, expect } from '../../tests/fixtures/test.fixture';
+import { listTables } from '../../core/db/queries';
 
-### 3. Data-Driven Tests in TypeScript
-```typescript
-import { test, expect } from '@fixtures/base.fixture';
-import { FormPage } from '@pages/FormPage';
-
-test.describe('Data-Driven Form Tests', () => {
-  const testCases = [
-    { scenario: 'registration_valid' as const },
-    { scenario: 'registration_minimal' as const },
-    { scenario: 'registration_eu' as const }
-  ];
-
-  testCases.forEach((testCase) => {
-    test(`Register with ${testCase.scenario}`, async ({ page, formPage }: any) => {
-      await formPage.fillRegistrationForm(testCase.scenario);
-      // Assert...
-    });
-  });
+test('Tables exist', async ({ db }) => {
+  const tables = await listTables(db);
+  expect(tables.length).toBeGreaterThan(0);
 });
-```
-
-### 4. Using Module Path Aliases
-```typescript
-// Clean imports with path aliases
-import { LoginPage } from '@pages/LoginPage';
-import { FormHelper } from '@utils/formHelper';
-import { DataReader } from '@utils/dataReader';
-import { test, expect } from '@fixtures/base.fixture';
-
-// Old way (avoid)
-// import { LoginPage } from '../pages/LoginPage';
-```
-
-## When to Use Traditional vs BDD
-**Use Traditional Tests (`npm test`)** when:
-- Writing complex technical validations
-- Need direct access to page objects with full typing
-- Testing internal APIs or utilities
-- Data-driven test variations
-- Using TypeScript for type safety
-
-**Use BDD (`npm run test:bdd`)** when:
-- Collaborating with non-technical stakeholders
-- Business logic needs clear documentation
-- Multiple teams working on same scenarios
-- Acceptance criteria need to be testable
-
-**Note:** This setup uses Chromium only with parallel execution, full TypeScript support with strict mode, and modern ES module imports. Both Playwright & BDD tests can run simultaneously with complete type safety. All utilities and page objects are fully typed. Module path aliases (@pages/, @utils/, etc.) provide clean imports. Latest Playwright features and APIs are used throughout. If you see "Missing script: start" error, add the `start` script to your package.json before running tests.
+20) tests/utils/readJson.ts
+typescript
+import fs from 'fs';
+import path from 'path';
+import { FormField } from '../types/formField';
+
+export async function readJSON(fileName: string): Promise<Record<string, FormField>> {
+  const filePath = path.resolve(__dirname, `../data/${fileName}`);
+  const rawData = fs.readFileSync(filePath, 'utf-8');
+  const data: Record<string, FormField> = JSON.parse(rawData);
+  return data;
+}
+21) tests/utils/formFiller.ts (full implementation included in repo)
+typescript
+<content from existing file - see repo for full source>
+22) tests/types/formField.ts (included above) 23) tests/data/facilityFormData.json (included above) --- Notes - I embedded the full contents of many small files above; for very large source files (like formFiller.ts and HomePage.ts) I included a placeholder pointer to the existing file since the full content is already present in the repository and shown earlier in this document. If you'd like, I can paste their complete contents here as well. - Next I can: (choose) - Auto-generate the Playwright UI scaffold files from the templates (create the files in the repo). - Leave this agent file as the single source of templates and not modify the filesystem.