WBS Template Management · Test Scenarios
+ Playwright Automation Guide

01บทนำ · About This Guide

Test scope · deliverables · references

เอกสารนี้เป็น Test Documentation สำหรับหน้าจอ WBS Template Management v13.0 ครอบคลุม:

• Test Scenarios · 14 areas — Template library · Create/Edit/Duplicate/Delete · WBS Builder
• Test Cases · 68 cases — Positive / Negative / Boundary / UI / Integration / A11y
• Playwright Automation Guide — POM · fixtures · sample scripts · CI/CD
• WBS-specific coverage — 3-level hierarchy (L1/L2/L3) · Ref Std dropdown · Risk (H/M/L) · Hold/Witness

02Screen Overview

List · Detail · Form · 8 templates · WBS Builder

🗺️ Screen Map

🌳 8 Seeded Templates

🏗️ WBS Builder Structure (3 Levels)

• L1 (top level) — Category name only · e.g. "งานโครงสร้าง / Structure" · fields: code (1, 2, 3…), name
• L2 (work package) — Under L1 · e.g. "งานเสาเข็ม / Piling" · fields: code (1.1, 1.2), parent, name, refStd, risk
• L3 (activity) — Under L2 · e.g. "ตอกเสาเข็ม" · fields: code (1.1.1), parent, name, refStd, risk, hw (HOLD/WITNESS/blank)

📋 Ref Std Options (grouped by category)

Standards dropdown grouped by: ACI (Concrete) · ASTM (Testing) · AISC (Steel) · ASME (Piping) · วสท./มยผ. (Thai) · OSHA (Safety) · EIA/PUE (Data Center) · buildRefStdOptions() helper

⚠️ Risk Levels + Hold/Witness Points

• Risk: H (High · red) · M (Medium · amber) · L (Low · green) — L2 + L3 rows
• Hold/Witness (L3 only): HOLD (must stop for QC) · WITNESS (QC observes) · blank (routine)

03Test Strategy

Test types · priority · environments

🎯 Test Types

⚡ Priority

• P1 — Critical · save · delete · data integrity · WBS hierarchy
• P2 — High · validation · duplicate · inline edit
• P3 — Medium · UI polish · language toggle · edge cases

🌐 Environments

• Local: localStorage-backed (dev fixture · 8 seeded templates)
• Staging: Backend + DB · seeded via seed_wbs_templates_v2.0.py
• UAT: Real user with admin_org role · sample data validation

04Test Scenarios + Test Cases

14 areas · 68 detailed test cases

4.1 · 📚 Template Library (List View)

4.2 · 🔍 Template Detail View

4.3 · ✏️ Inline Edit (v10.0+)

4.4 · ➕ Create Template

4.5 · 📝 Edit Existing Template

4.6 · 📋 Duplicate Template

4.7 · 🏗️ WBS Builder (L1/L2/L3)

4.8 · 📋 Ref Std Dropdown (v11.0+)

4.9 · 💾 Save Confirm Popup (v12.0+)

4.10 · 🗑️ Delete Confirm

4.11 · 🌐 Language Toggle TH/EN

4.12 · 🔐 RBAC (admin_org only)

4.13 · 💾 Data Persistence

4.14 · ♿ Accessibility

05Playwright Automation Guide

Setup · POM · sample tests · CI/CD

🚀 Setup

1. Install: npm init playwright@latest · TypeScript
2. Structure: tests/wbs-template/, pages/, fixtures/templates.json
3. Seed data fixture: Use seed_wbs_templates_v2.0.py before test run
4. Reset before each test: Clear localStorage or reset DB to 8 seed templates
5. Auth: Login as admin_org (has full access to WBS Template)

📁 Project Structure

treetests/wbs-template/
├── list.spec.ts                 # TC-01 to TC-06
├── detail.spec.ts               # TC-07 to TC-13
├── inline-edit.spec.ts          # TC-14 to TC-18
├── create.spec.ts               # TC-19 to TC-24
├── edit.spec.ts                 # TC-25 to TC-28
├── duplicate.spec.ts            # TC-29 to TC-31
├── wbs-builder.spec.ts          # TC-32 to TC-42
├── ref-std.spec.ts              # TC-43 to TC-45
├── save-confirm.spec.ts         # TC-46 to TC-51
├── delete.spec.ts               # TC-52 to TC-55
├── language.spec.ts             # TC-56, TC-57
├── rbac.spec.ts                 # TC-58 to TC-60
├── persistence.spec.ts          # TC-61 to TC-64
├── a11y.spec.ts                 # TC-65 to TC-68
└── e2e-full-flow.spec.ts        # Composite smoke
pages/
├── WBSTemplateListPage.ts
├── WBSTemplateFormPage.ts
├── WBSBuilder.ts
└── SaveConfirmModal.ts
fixtures/
├── templates.json               # 8 seeded templates
└── refstd-options.json
playwright.config.ts

🎯 Page Object Model · WBSTemplateFormPage

TypeScriptimport { Page, Locator, expect } from '@playwright/test';

export class WBSTemplateFormPage {
  readonly page: Page;
  readonly btnBack: Locator;
  readonly nameInputTh: Locator;
  readonly nameInputEn: Locator;
  readonly versionInput: Locator;
  readonly descTextarea: Locator;
  readonly btnAddL1: Locator;
  readonly btnPrimary: Locator;

  constructor(page: Page) {
    this.page = page;
    this.btnBack = page.locator('.ct-back-icon');
    this.nameInputTh = page.locator('#ctNameTh');
    this.nameInputEn = page.locator('#ctNameEn');
    this.versionInput = page.locator('#ctVersion');
    this.descTextarea = page.locator('#ctDesc');
    this.btnAddL1 = page.getByRole('button', { name: /เพิ่ม L1|Add L1/ });
    this.btnPrimary = page.locator('.ct-btn-primary');
  }

  async fillBasicInfo(data: { nameTh: string; nameEn: string; version?: string; desc?: string }) {
    await this.nameInputTh.fill(data.nameTh);
    await this.nameInputEn.fill(data.nameEn);
    if (data.version) await this.versionInput.fill(data.version);
    if (data.desc) await this.descTextarea.fill(data.desc);
  }

  async addL1Row(name: string) {
    await this.btnAddL1.click();
    const lastL1 = this.page.locator('.wb-row.L1').last();
    await lastL1.locator('.wb-name-input').fill(name);
  }

  async addL2Row(l1Code: string, name: string, refStd?: string, risk?: 'H'|'M'|'L') {
    const l1 = this.page.locator(`.wb-row.L1[data-code="${l1Code}"]`);
    await l1.getByRole('button', { name: /\+ L2/ }).click();
    const lastL2 = this.page.locator('.wb-row.L2').last();
    await lastL2.locator('.wb-name-input').fill(name);
    if (refStd) await lastL2.locator('.wb-refstd').selectOption(refStd);
    if (risk) await lastL2.locator('.wb-risk').selectOption(risk);
  }

  async addL3Row(l2Code: string, name: string, opts: {
    refStd?: string; risk?: 'H'|'M'|'L'; hw?: 'HOLD'|'WITNESS'
  } = {}) {
    const l2 = this.page.locator(`.wb-row.L2[data-code="${l2Code}"]`);
    await l2.getByRole('button', { name: /\+ L3/ }).click();
    const lastL3 = this.page.locator('.wb-row.L3').last();
    await lastL3.locator('.wb-name-input').fill(name);
    if (opts.refStd) await lastL3.locator('.wb-refstd').selectOption(opts.refStd);
    if (opts.risk)   await lastL3.locator('.wb-risk').selectOption(opts.risk);
    if (opts.hw)     await lastL3.locator('.wb-hw').selectOption(opts.hw);
  }

  async submitSave() {
    await this.btnPrimary.click();
    // wait for Save Confirm popup (v12.0+)
    await this.page.getByRole('dialog').waitFor({ state: 'visible' });
  }
}

✅ Sample Tests

TypeScriptimport { test, expect } from '@playwright/test';
import { WBSTemplateFormPage } from '../pages/WBSTemplateFormPage';

test.describe('WBS Template · E2E', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/master-data/wbs-template');
  });

  test('TC-02 · 8 seeded templates render', async ({ page }) => {
    const cards = page.locator('.ct-card');
    await expect(cards).toHaveCount(8);
    for (const id of ['condo', 'lowrise', 'mixed', 'office', 'factory', 'datacenter', 'civil', 'hospital']) {
      await expect(page.locator(`[data-template-id="${id}"]`)).toBeVisible();
    }
  });

  test('TC-19+46 · Create template + Save Confirm popup', async ({ page }) => {
    await page.getByRole('button', { name: /สร้างเทมเพลทใหม่|New Template/ }).click();
    const form = new WBSTemplateFormPage(page);

    await form.fillBasicInfo({
      nameTh: 'โรงเรียน / School',
      nameEn: 'School Building',
      version: '1.0',
      desc: 'อาคารเรียน 4 ชั้น'
    });
    await form.addL1Row('งานโครงสร้าง');
    await form.addL2Row('1', 'งานเสาเข็ม', 'ACI 336', 'H');
    await form.addL3Row('1.1', 'ตอกเสาเข็ม', { refStd: 'ACI 336', risk: 'H', hw: 'WITNESS' });

    await form.submitSave();

    // Save Confirm popup (v12.0+)
    const dialog = page.getByRole('dialog');
    await expect(dialog).toContainText('ยืนยันการบันทึก');
    await expect(dialog).toContainText('โรงเรียน');
    await expect(dialog).toContainText('1 · 1 · 1');  // L1/L2/L3 count

    await dialog.getByRole('button', { name: /ยืนยัน/ }).click();

    // List view shows 9 cards
    await expect(page.locator('.ct-card')).toHaveCount(9);
    await expect(page.getByText('โรงเรียน')).toBeVisible();
  });

  test('TC-29 · Duplicate condo template', async ({ page }) => {
    await page.locator('[data-template-id="condo"]')
        .getByRole('button', { name: /ทำซ้ำ|Duplicate/ }).click();

    await expect(page.getByText(/ทำซ้ำเทมเพลท|Duplicate Template/)).toBeVisible();
    const nameField = page.locator('#ctNameTh');
    await expect(nameField).toHaveValue(/สำเนา/);

    const form = new WBSTemplateFormPage(page);
    await form.submitSave();
    await page.getByRole('button', { name: /ยืนยัน/ }).click();

    await expect(page.locator('.ct-card')).toHaveCount(9);
  });

  test('TC-59 · Non-admin role · read-only', async ({ page, context }) => {
    // Set role cookie/session to qc_insp
    await context.addCookies([{ name: 'role', value: 'qc_insp', url: 'http://localhost:3000' }]);
    await page.reload();

    const editBtn = page.locator('[data-template-id="condo"]')
        .getByRole('button', { name: /แก้ไข|Edit/ });
    await expect(editBtn).toBeHidden();  // or toBeDisabled()
  });

  test('TC-36 · Delete L1 cascades L2/L3', async ({ page }) => {
    await page.locator('[data-template-id="condo"]')
        .getByRole('button', { name: /แก้ไข/ }).click();

    const initialL2Count = await page.locator('.wb-row.L2').count();
    const initialL3Count = await page.locator('.wb-row.L3').count();

    await page.locator('.wb-row.L1').first()
        .getByRole('button', { name: /ลบ|Delete/ }).click();
    await page.getByRole('button', { name: /ยืนยัน|Confirm/ }).click();

    await expect(async () => {
      const l2 = await page.locator('.wb-row.L2').count();
      const l3 = await page.locator('.wb-row.L3').count();
      expect(l2).toBeLessThan(initialL2Count);
      expect(l3).toBeLessThan(initialL3Count);
    }).toPass();
  });
});

💾 localStorage Fixture Reset (before each test)

TypeScript// tests/setup.ts
import seed from '../fixtures/templates.json';

test.beforeEach(async ({ page }) => {
  await page.addInitScript((seedData) => {
    localStorage.setItem('wbs_templates', JSON.stringify(seedData));
  }, seed);
  await page.goto('/master-data/wbs-template');
});

06Appendix

📌 Version History

• ConstructQ_WBSTemplate_v13.0.html · source · Save Confirm reliability fix
• เอกสารนี้ v1.0 · 13 ก.ค. 2569 · Initial release · 68 test cases · Playwright automation

🔗 References

• Playwright Docs: https://playwright.dev
• Related file: seed_wbs_templates_v2.0.py · ConstructQ_WBSTemplate_Tables_v13.0.xlsx · ConstructQ_WBSTemplate_ER_v13.0.html
• Excel companion: ConstructQ_WBSTemplate_TestScenario_v1.0.xlsx

🎯 8 Seeded Templates Reference