Checklist Builder · Test Scenarios
+ Playwright Automation Guide

01บทนำ · About This Guide

Test scope · deliverables · references

เอกสารนี้เป็น Test Documentation สำหรับหน้าจอ Checklist Builder v16.0 ครอบคลุม:

• Test Scenarios · 15 areas — List · Designer · Sections · Questions · Types · Criteria · Preview · Simulator
• Test Cases · 76 cases — Positive / Negative / Boundary / UI / Integration / A11y
• Playwright Automation Guide — POM + 5 sample test scripts · question-type widgets · verdict simulator
• Industry standard coverage — 5 templates: มยผ. · วสท. · OSHA-TH · EIA · Concrete/MEP multi-section

02Screen Overview

Template list · designer · Mobile Preview · 10 question types

🗺️ Screen Map

❓ 10 Question Types

🌱 Seeded Templates (v8.0+)

Plus 5 industry-standard CK_TEMPLATES (v8.0): มยผ. 1101-64 · วสท. 3001-56 · วสท. 4001-59 · OSHA-TH · EIA/ASHRAE — pre-written as declarative rule statements (v10.0)

📋 Criteria + Operator UI (v7.0+)

• Operators: le (≤) · ge (≥) · between · manual (for passfail)
• onFail action: warn (show warning) · auto_ncr (auto-create NCR)
• severity: critical · major · minor
• warnAbove/warnBelow: intermediate zone (yellow warning before fail)

📱 Mobile Preview (v8.0+ · v16.0 · scroll bar)

• Tab strip: One tab per section · horizontal scroll bar when overflow (v16.0)
• Circle stepper: Numbered circles · yellow ✓ badge on answered (v12.0)
• Rule chip: Displays declarative rule (v10.0-11.0) · not "try to answer" widget
• Type-aware widget: Different UI per question type
• Only marks done if answered (v13.0)
• Pin ✓ badge across navigation (v14.0)

03Test Strategy

Test types · priority · environments

🎯 Test Types

⚡ Priority

• P1 — Critical · save · question types · criteria enforcement · Mobile Preview
• P2 — High · sections · verdict simulator · duplicate · reorder
• P3 — Medium · language toggle · UI polish · edge cases

04Test Scenarios + Test Cases

15 areas · 76 detailed test cases

4.1 · 📚 Landing + Template List

4.2 · ➕ Create Template

4.3 · ✏️ Edit Existing Template

4.4 · 📑 Sections Editor

4.5 · ❓ Questions Editor

4.6 · 🎨 10 Question Types

4.7 · ⚖️ Criteria + Operator UI (v7.0+)

4.8 · 📷 Required Comment + Photo (v2.0)

4.9 · 📱 Mobile Preview (v8.0+ · v16.0)

4.10 · 🎯 Verdict Simulator (v7.0+)

4.11 · 💾 Save + Delete Confirm (v5.0)

4.12 · ↕️ Expand/Collapse All (v5.0)

4.13 · 🌐 Language Toggle TH/EN

4.14 · 💾 Data Persistence

4.15 · ♿ Accessibility

05Playwright Automation Guide + 5 Sample Scripts

Setup · POM · sample tests for question types · criteria · Mobile Preview

🚀 Setup

1. Install: npm init playwright@latest
2. Fixture reset: seed CK_SEED + CK_TEMPLATES before each test
3. Widget testing: Query per-type widgets · use data-qtype, data-question-id
4. Verdict simulator: Verify text contains "ผ่าน" / "ไม่ผ่าน" / "auto NCR"

📁 Project Structure

treetests/checklist/
├── list.spec.ts                # TC-01 to TC-05
├── create.spec.ts              # TC-06 to TC-10
├── edit.spec.ts                # TC-11 to TC-13
├── sections.spec.ts            # TC-14 to TC-19
├── questions.spec.ts           # TC-20 to TC-26
├── question-types.spec.ts      # TC-27 to TC-37 (11 tests · 10 types)
├── criteria.spec.ts            # TC-38 to TC-44 (7 tests)
├── required-photo.spec.ts      # TC-45 to TC-47
├── mobile-preview.spec.ts      # TC-48 to TC-56 (9 tests)
├── verdict-simulator.spec.ts   # TC-57 to TC-61 (5 tests)
├── save-delete.spec.ts         # TC-62 to TC-65
├── expand-collapse.spec.ts     # TC-66 to TC-68
├── language.spec.ts            # TC-69, TC-70
├── persistence.spec.ts         # TC-71 to TC-73
├── a11y.spec.ts                # TC-74 to TC-76
└── e2e-full-flow.spec.ts       # Composite smoke
pages/
├── ChecklistListPage.ts
├── ChecklistDesignerPage.ts
├── SectionsEditor.ts
├── QuestionsEditor.ts
└── MobilePreviewPanel.ts
fixtures/
├── ck-seed.json
└── ck-templates.json
playwright.config.ts

🎯 Page Object Model · ChecklistDesignerPage

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

export type QType =
  'number' | 'text' | 'longtext' | 'passfail' | 'radio'
  | 'checkbox' | 'photo' | 'date' | 'signature' | 'color';

export type Operator = 'le' | 'ge' | 'between' | 'manual';
export type OnFail  = 'warn' | 'auto_ncr';
export type Severity= 'critical' | 'major' | 'minor';

export class ChecklistDesignerPage {
  readonly page: Page;
  readonly nameTh: Locator;
  readonly nameEn: Locator;
  readonly btnAddSection: Locator;
  readonly btnSave: Locator;
  readonly btnDelete: Locator;
  readonly btnExpandAll: Locator;
  readonly btnCollapseAll: Locator;
  readonly sections: Locator;

  constructor(page: Page) {
    this.page = page;
    this.nameTh = page.locator('#ckNameTh');
    this.nameEn = page.locator('#ckNameEn');
    this.btnAddSection = page.getByRole('button', { name: /\+ Section/ });
    this.btnSave = page.getByRole('button', { name: /บันทึก|Save/ });
    this.btnDelete = page.getByRole('button', { name: /ลบ|Delete/ });
    this.btnExpandAll = page.getByRole('button', { name: /Expand All|กางทั้งหมด/ });
    this.btnCollapseAll = page.getByRole('button', { name: /Collapse All|ยุบทั้งหมด/ });
    this.sections = page.locator('.ck-section');
  }

  async addSection(nameTh: string, nameEn: string) {
    await this.btnAddSection.click();
    const last = this.sections.last();
    await last.locator('.ck-section-nameTh').fill(nameTh);
    await last.locator('.ck-section-nameEn').fill(nameEn);
    return last;
  }

  async addQuestion(sectionIdx: number, opts: {
    type: QType; labelTh: string; labelEn: string;
    required?: boolean; requirePhoto?: boolean; requireComment?: boolean;
    unit?: string; minPhotos?: number;
    criteria?: { operator: Operator; min?: number; max?: number;
                 warnBelow?: number; warnAbove?: number;
                 onFail: OnFail; severity: Severity };
  }) {
    const section = this.sections.nth(sectionIdx);
    await section.getByRole('button', { name: /\+ Question/ }).click();
    const last = section.locator('.ck-question').last();
    await last.locator('.ck-qtype-select').selectOption(opts.type);
    await last.locator('.ck-qlabel-th').fill(opts.labelTh);
    await last.locator('.ck-qlabel-en').fill(opts.labelEn);
    if (opts.required)       await last.locator('.ck-required').check();
    if (opts.requirePhoto)   await last.locator('.ck-req-photo').check();
    if (opts.requireComment) await last.locator('.ck-req-comment').check();
    if (opts.unit)           await last.locator('.ck-unit').fill(opts.unit);
    if (opts.minPhotos)      await last.locator('.ck-min-photos').fill(String(opts.minPhotos));

    if (opts.criteria) {
      await last.locator('.ck-criteria-op').selectOption(opts.criteria.operator);
      if (opts.criteria.min !== undefined) await last.locator('.ck-criteria-min').fill(String(opts.criteria.min));
      if (opts.criteria.max !== undefined) await last.locator('.ck-criteria-max').fill(String(opts.criteria.max));
      await last.locator('.ck-criteria-onfail').selectOption(opts.criteria.onFail);
      await last.locator('.ck-criteria-severity').selectOption(opts.criteria.severity);
    }
    return last;
  }

  // Mobile Preview helpers
  preview() { return this.page.locator('.ck-mobile-preview'); }

  async tapPreviewTab(sectionIdx: number) {
    await this.preview().locator('.tab-strip [role="tab"]').nth(sectionIdx).click();
  }

  async answerNumber(questionId: string, value: number) {
    await this.preview()
      .locator(`[data-question-id="${questionId}"] input[type="number"]`)
      .fill(String(value));
  }

  async answerPassFail(questionId: string, choice: 'pass' | 'fail') {
    await this.preview()
      .locator(`[data-question-id="${questionId}"] .ck-pf-${choice}`).click();
  }

  async getVerdict(questionId: string): Promise<string> {
    const verdict = this.preview().locator(`[data-question-id="${questionId}"] .ck-verdict`);
    return (await verdict.textContent()) ?? '';
  }
}

✅ Sample Test 1 · Add All 10 Question Types

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

test('TC-37 · All 10 question types render correctly', async ({ page }) => {
  await page.goto('/master-data/checklist');
  await page.getByRole('button', { name: /สร้าง Checklist ใหม่/ }).click();
  const designer = new ChecklistDesignerPage(page);
  await designer.nameTh.fill('ทดสอบทุก type');
  await designer.nameEn.fill('All Types Test');
  await designer.addSection('ครบทุก type', 'All Types');

  const types: QType[] = [
    'number', 'text', 'longtext', 'passfail', 'radio',
    'checkbox', 'photo', 'date', 'signature', 'color'
  ];
  for (const [i, t] of types.entries()) {
    await designer.addQuestion(0, {
      type: t,
      labelTh: `ข้อ ${i+1} (${t})`,
      labelEn: `Q${i+1} (${t})`,
    });
  }

  // Verify preview renders all 10 widgets
  for (const t of types) {
    await expect(designer.preview().locator(`[data-qtype="${t}"]`)).toBeVisible();
  }
});

✅ Sample Test 2 · Criteria + Verdict Simulator (Pass/Warn/Fail)

TypeScripttest.describe('Verdict Simulator', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/master-data/checklist');
    await page.getByRole('button', { name: /สร้าง Checklist ใหม่/ }).click();
    const designer = new ChecklistDesignerPage(page);
    await designer.nameTh.fill('Ground resistance test');
    await designer.addSection('ไฟฟ้า', 'Electrical');
    await designer.addQuestion(0, {
      type: 'number',
      labelTh: 'ค่าความต้านทานสายดิน ≤ 5 Ω',
      labelEn: 'Ground resistance ≤ 5 Ω',
      unit: 'Ω',
      required: true,
      criteria: { operator: 'le', max: 5, warnAbove: 4, onFail: 'auto_ncr', severity: 'critical' }
    });
  });

  test('TC-38 · Pass verdict (value=3 ≤ 5)', async ({ page }) => {
    const designer = new ChecklistDesignerPage(page);
    await designer.answerNumber('q1', 3);
    const verdict = await designer.getVerdict('q1');
    expect(verdict).toContain('ผ่าน');
    await expect(designer.preview().locator('[data-question-id="q1"] .ck-verdict.pass')).toBeVisible();
  });

  test('TC-41 · Warn verdict (value=4.5 · in warn zone)', async ({ page }) => {
    const designer = new ChecklistDesignerPage(page);
    await designer.answerNumber('q1', 4.5);
    const verdict = await designer.getVerdict('q1');
    expect(verdict).toContain('ใกล้เกณฑ์');
    await expect(designer.preview().locator('[data-question-id="q1"] .ck-verdict.warn')).toBeVisible();
  });

  test('TC-42 · Fail verdict + auto_ncr note (value=8 > 5)', async ({ page }) => {
    const designer = new ChecklistDesignerPage(page);
    await designer.answerNumber('q1', 8);
    const verdict = await designer.getVerdict('q1');
    expect(verdict).toContain('ไม่ผ่าน');
    expect(verdict).toContain('สร้าง NCR อัตโนมัติ');
    await expect(designer.preview().locator('[data-question-id="q1"] .ck-verdict.fail')).toBeVisible();
  });
});

✅ Sample Test 3 · Mobile Preview · Circle Stepper Yellow ✓ Badge (v12.0)

TypeScripttest('TC-52 · Yellow ✓ badge shows on answered questions', async ({ page }) => {
  await page.goto('/master-data/checklist');
  await page.getByText('ตรวจงานสี').click();
  const designer = new ChecklistDesignerPage(page);

  // Initial: no badges on stepper
  const stepper = designer.preview().locator('.ck-stepper');
  await expect(stepper.locator('.ck-stepper-check')).toHaveCount(0);

  // Answer q1 (number) with a passing value
  await designer.answerNumber('q1', 1.5);

  // Yellow ✓ badge should appear on circle 1
  const circle1 = stepper.locator('.ck-stepper-circle').first();
  await expect(circle1.locator('.ck-stepper-check')).toBeVisible();
  await expect(circle1.locator('.ck-stepper-check')).toHaveCSS('color', 'rgb(255, 210, 63)'); // yellow

  // Navigate away and back · badge should persist (TC-53 · v14.0)
  const circle2 = stepper.locator('.ck-stepper-circle').nth(1);
  await circle2.click();
  await circle1.click();  // back to q1
  await expect(circle1.locator('.ck-stepper-check')).toBeVisible();  // still there
});

✅ Sample Test 4 · Multi-Section Tab Strip Scroll (v16.0)

TypeScripttest('TC-50 · Tab strip · horizontal scroll bar on overflow (v16.0)', async ({ page }) => {
  await page.goto('/master-data/checklist');
  await page.getByText('ตรวจระบบ MEP').click();  // ck-003 · 6 sections

  const designer = new ChecklistDesignerPage(page);
  const tabStrip = designer.preview().locator('.tab-strip');

  // Verify 6 tabs
  await expect(tabStrip.locator('[role="tab"]')).toHaveCount(6);

  // Verify scroll bar visible (overflow-x auto or scroll)
  const overflowX = await tabStrip.evaluate((el) => window.getComputedStyle(el).overflowX);
  expect(['auto', 'scroll']).toContain(overflowX);

  // Verify tabs actually overflow
  const scrollWidth = await tabStrip.evaluate((el) => el.scrollWidth);
  const clientWidth = await tabStrip.evaluate((el) => el.clientWidth);
  expect(scrollWidth).toBeGreaterThan(clientWidth);

  // Scroll to last tab and verify it's now visible
  await tabStrip.evaluate((el) => { el.scrollLeft = el.scrollWidth; });
  const lastTab = tabStrip.locator('[role="tab"]').last();
  await expect(lastTab).toBeInViewport();
});

✅ Sample Test 5 · Full E2E · Build Custom Concrete Checklist

TypeScripttest('TC-E2E-01 · Build custom concrete checklist end-to-end', async ({ page }) => {
  await page.goto('/master-data/checklist');
  await page.getByRole('button', { name: /สร้าง Checklist ใหม่/ }).click();

  const designer = new ChecklistDesignerPage(page);
  await designer.nameTh.fill('ตรวจงานคอนกรีต (Custom)');
  await designer.nameEn.fill('Concrete Custom');

  // Section A · Reference (text · date · longtext)
  await designer.addSection('A. ข้อมูลอ้างอิง', 'A. Reference');
  await designer.addQuestion(0, { type: 'text', labelTh: 'เลขที่ Drawing', labelEn: 'Drawing No.', required: true });
  await designer.addQuestion(0, { type: 'date', labelTh: 'วันที่เทคอนกรีต', labelEn: 'Pour date', required: true });

  // Section B · Delivery Check (number × 2 · radio)
  await designer.addSection('B. ตรวจรับคอนกรีต', 'B. Delivery');
  await designer.addQuestion(1, {
    type: 'number',
    labelTh: 'Slump ≤ 12 cm ตามมาตรฐาน',
    labelEn: 'Slump ≤ 12 cm per spec',
    unit: 'cm', required: true,
    criteria: { operator: 'le', max: 12, warnAbove: 10, onFail: 'auto_ncr', severity: 'major' }
  });

  // Section C · Quality Control (passfail · photo)
  await designer.addSection('C. คุณภาพงาน', 'C. Quality');
  await designer.addQuestion(2, {
    type: 'passfail',
    labelTh: 'การเทต่อเนื่อง ไม่มี Cold Joint',
    labelEn: 'Continuous pour · no cold joint',
    required: true, requirePhoto: true,
    criteria: { operator: 'manual', onFail: 'auto_ncr', severity: 'critical' }
  });

  // Verify structure in preview
  await expect(designer.preview().locator('.tab-strip [role="tab"]')).toHaveCount(3);

  // Test verdict on slump = 15 (fail · auto_ncr major)
  await designer.tapPreviewTab(1);  // Section B
  await designer.answerNumber('q1', 15);   // q1 in section B
  const verdict = await designer.getVerdict('q1');
  expect(verdict).toContain('ไม่ผ่าน');
  expect(verdict).toMatch(/NCR|auto/i);

  // Save with confirm popup
  await designer.btnSave.click();
  const dialog = page.getByRole('dialog');
  await expect(dialog).toContainText('3 sections');
  await expect(dialog).toContainText('ตรวจงานคอนกรีต');
  await dialog.getByRole('button', { name: /ยืนยัน|Confirm/ }).click();

  // Verify in list
  await expect(page.getByText('ตรวจงานคอนกรีต (Custom)')).toBeVisible();
});

06Appendix

📌 Version History

• ConstructQ_Checklist_v16.0.html · source · scroll bar on Mobile Preview Tab strip
• เอกสารนี้ v1.0 · 13 ก.ค. 2569 · 76 test cases · Playwright + 5 sample scripts

🔗 References

• Playwright Docs: https://playwright.dev
• Related file: ConstructQ_Checklist_ER_v16.0.html · Tables_v16.0.xlsx
• Industry standards: มยผ. 1101-64 · วสท. 3001-56 · วสท. 4001-59 · OSHA-TH · EIA · ASHRAE
• Excel companion: ConstructQ_Checklist_TestScenario_v1.0.xlsx