Task Mobile v34.0 · Test Scenarios
+ Playwright Mobile Automation Guide

01บทนำ · About This Guide

Test scope · deliverables · mobile-specific coverage

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

• Test Scenarios · 16 areas — 4 roles · Create Task · 3 pickers · Checklist wizard · NCR flow
• Test Cases · 82 cases — Positive / Negative / Boundary / UI / Mobile / Integration / A11y
• Playwright Mobile Guide — Pixel 5 + iPhone 14 emulation · POM · 5 sample test scripts
• Bottom-sheet Modal coverage — Project · Site/Zone · WBS with L1 tabs + horizontal scroll bar (v34.0)

02Mobile Overview

Phone frame · 4 roles · 3 pickers · Checklist wizard

📱 Mobile Layout

• Fixed viewport: Portrait 375×812 (iPhone 14) or 393×851 (Pixel 5) · phone frame on desktop
• Status bar: Time · signal · battery · notch (iPhone)
• Topbar: Back icon · title · language toggle · action buttons (role-dependent)
• Content (scrollable): Task cards · list/detail · form fields
• Bottom nav: 64px height · fixed at bottom · role-based icons
• Bottom sheet modals: Project · Site/Zone · WBS · slide up · backdrop dim · constrained to phone frame (v32)

👥 4 Roles

➕ Create Task Form (QCM · v24.0 overhaul)

• Project field — inline dropdown with project data (v29) · gradient banner + code chip
• Site/Zone field — two-step bottom sheet Modal (v30-31)
• WBS/Activity field — bottom sheet Modal with L1 tabs (Struct · Finishing · MEP) + visible horizontal scroll bar (v34)
• Checklist field — link to template
• Workflow field — link to workflow template
• Inspector field — opens popup showing users in role (v24 rename)
• Approver field — separate popup
• Start Date + Duration · Ref Std · Risk (H/M/L)
• Cancel + Save buttons — at bottom of form (v7 fixed)

✅ Checklist Wizard (QC Inspector · v18-23)

• Tab strip per section (v21) · horizontal scroll on overflow
• Circle stepper per section · numbered
• Yellow ✓ badge on passed items (v20) · pinned across navigation
• Rule chip · declarative rule statement (from Checklist v16.0)
• Type-aware widgets · passfail · number+unit · radio · checkbox · text · longtext · photo · date · signature · color (v23)
• Pass/Fail 2 large buttons · full-width
• Wizard hides passed items (v15-16) · shows only uninspected
• Completion screen · after all items · summary

🚨 NCR Create Flow

• NCR Confirm dialog (v17) · on Fail tap · warns "จะสร้าง NCR"
• Confirm button opens Create-NCR form (v6/v18 fix)
• Cancel/Save buttons at bottom (v7)
• Owner picker · web-style horizontal table (v9)
• Sub Contractor auto-assigned based on WBS category

🎴 Card Layout (v12.0+ · matches web v28)

• Header: Task code first, then status pill
• Progress footer split · progress bar + %complete
• Lifecycle pills in Thai (v14): สร้าง · มอบหมาย · ตรวจ · รอตรวจรับ · ปิด · NCR

03Mobile Test Strategy

Devices · gestures · offline · role-based flows

📱 Target Devices

🎯 Test Types

• Positive ~35% · Negative ~15% · Mobile ~20% · UI ~13%
• Integration ~10% · Boundary ~5% · A11y ~2%

⚡ Priority

• P1 — Critical · Create Task · Checklist wizard · NCR flow · touch input
• P2 — High · Pickers · role gating · yellow ✓ badge · language
• P3 — Medium · orientation · UI polish · edge devices

04Test Scenarios + Test Cases

16 areas · 82 test cases

4.1 · 🚀 App Launch + Role Switch

4.2 · 📋 Task List Card (v12+ · matches web v28)

4.3 · 🔍 Filter + Search

4.4 · ➕ QCM · Create Task (v24 overhaul)

4.5 · 🏗️ Project Picker (v25-29)

4.6 · 🗺️ Site/Zone Picker (v30-31 · 2-step bottom sheet)

4.7 · 🌳 WBS Picker (v33-34 · L1 tabs + scroll bar)

4.8 · 👤 Owner Picker (v8-10)

4.9 · ✅ Checklist Wizard (QC Inspector · v18-23)

4.10 · 🟡 Yellow ✓ Badge on Stepper (v20)

4.11 · 🚨 NCR Create Flow (v6/v17/v18)

4.12 · 📄 Task Detail

4.13 · 🌐 Language TH/EN

4.14 · 📡 Offline / Poor Network

4.15 · 🔄 Safe Area + Orientation

4.16 · ♿ Mobile Accessibility

4.17 · 🎯 Bottom Nav + FAB

05Playwright Mobile Automation Guide + 5 Sample Scripts

Setup · POM · bottom sheet · checklist wizard · role emulation

🚀 Setup

1. Install: npm init playwright@latest + Mobile Chrome + WebKit projects
2. Devices: Configure Pixel 5 + iPhone 14 in playwright.config.ts
3. Touch enabled: hasTouch: true · isMobile: true
4. Role fixture: Set cookie/localStorage for role (qcm/qi/fx/ceo)
5. Seed data: Pre-populate tasks/projects/checklists · reset before each test

📁 Project Structure

treetests/task-mobile/
├── launch.spec.ts              # TC-M01 to TC-M05
├── task-list.spec.ts           # TC-M06 to TC-M12
├── filter-search.spec.ts       # TC-M13 to TC-M16
├── create-task.spec.ts         # TC-M17 to TC-M25 (QCM)
├── project-picker.spec.ts      # TC-M26 to TC-M30
├── site-zone-picker.spec.ts    # TC-M31 to TC-M34
├── wbs-picker.spec.ts          # TC-M35 to TC-M39 (v34 scroll bar)
├── owner-picker.spec.ts        # TC-M40 to TC-M42
├── checklist-wizard.spec.ts    # TC-M43 to TC-M52 (QC Inspector)
├── yellow-badge.spec.ts        # TC-M53 to TC-M56 (v20)
├── ncr-create.spec.ts          # TC-M57 to TC-M62 (Fail flow)
├── task-detail.spec.ts         # TC-M63 to TC-M66
├── language.spec.ts            # TC-M67, TC-M68
├── offline.spec.ts             # TC-M69 to TC-M71
├── orientation.spec.ts         # TC-M72 to TC-M74
├── a11y.spec.ts                # TC-M75 to TC-M79
├── bottom-nav.spec.ts          # TC-M80 to TC-M82
└── e2e-full-flow.spec.ts       # Composite QCM → QI → NCR
pages/
├── TaskListPage.ts
├── CreateTaskPage.ts
├── ProjectPicker.ts
├── SiteZonePicker.ts
├── WBSPicker.ts
├── ChecklistWizard.ts
└── NCRCreateForm.ts
playwright.config.ts

⚙️ playwright.config.ts

TypeScriptimport { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/task-mobile',
  fullyParallel: true,
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    locale: 'th-TH',
  },
  projects: [
    { name: 'iPhone 14', use: { ...devices['iPhone 14'] }},
    { name: 'Pixel 5',   use: { ...devices['Pixel 5'] }},
    { name: 'iPhone SE', use: { ...devices['iPhone SE'] }},
    { name: 'Galaxy S9+',use: { ...devices['Galaxy S9+'] }},
  ]
});

🎯 POM · CreateTaskPage

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

export type Role = 'qcm' | 'qi' | 'fx' | 'ceo';
export type Risk = 'H' | 'M' | 'L';

export class CreateTaskPage {
  readonly page: Page;
  readonly fabCreate: Locator;
  readonly projectField: Locator;
  readonly siteZoneField: Locator;
  readonly wbsField: Locator;
  readonly checklistField: Locator;
  readonly workflowField: Locator;
  readonly inspectorField: Locator;
  readonly btnSave: Locator;
  readonly btnCancel: Locator;

  constructor(page: Page) {
    this.page = page;
    this.fabCreate = page.locator('.tm-fab-create');
    this.projectField = page.locator('[data-field="project"]');
    this.siteZoneField = page.locator('[data-field="site-zone"]');
    this.wbsField = page.locator('[data-field="wbs"]');
    this.checklistField = page.locator('[data-field="checklist"]');
    this.workflowField = page.locator('[data-field="workflow"]');
    this.inspectorField = page.locator('[data-field="inspector"]');
    this.btnSave = page.getByRole('button', { name: /บันทึก|Save/ });
    this.btnCancel = page.getByRole('button', { name: /ยกเลิก|Cancel/ });
  }

  async openCreateForm() {
    await this.fabCreate.tap();
  }

  // Project picker (bottom sheet)
  async pickProject(projectCode: string) {
    await this.projectField.tap();
    const sheet = this.page.locator('.pk-project-sheet');
    await sheet.waitFor({ state: 'visible' });
    await sheet.locator(`[data-project-code="${projectCode}"]`).tap();
  }

  // Site/Zone 2-step picker
  async pickSiteZone(site: string, zone: string) {
    await this.siteZoneField.tap();
    const sheet = this.page.locator('.pk-modal-sites');
    await sheet.waitFor({ state: 'visible' });
    await sheet.getByText(site).tap();  // Step 1
    await sheet.locator('.pk-zone-pill').getByText(zone).tap();  // Step 2
    await sheet.getByRole('button', { name: /ยืนยัน|Confirm/ }).tap();
  }

  // WBS picker · L1 tabs + L3 (v34 scroll bar)
  async pickWBS(l1Category: 'Struct' | 'Finishing' | 'MEP', l3ActivityName: string) {
    await this.wbsField.tap();
    const sheet = this.page.locator('.pk-wbsm');
    await sheet.waitFor({ state: 'visible' });
    await sheet.locator(`.pk-wbsm-l1s [data-l1="${l1Category}"]`).tap();
    await sheet.locator('.pk-wbsm-l3').getByText(l3ActivityName).tap();
    await sheet.getByRole('button', { name: /ยืนยัน|Confirm/ }).tap();
  }

  async pickInspector(inspectorName: string) {
    await this.inspectorField.tap();
    const popup = this.page.locator('.pk-owner-popup');
    await popup.waitFor({ state: 'visible' });
    await popup.getByText(inspectorName).tap();
  }

  async setRisk(risk: Risk) {
    await this.page.locator(`.tm-risk-chip[data-risk="${risk}"]`).tap();
  }

  async save() {
    await this.btnSave.tap();
    await this.page.getByRole('button', { name: /ยืนยัน|Confirm/ }).tap();
  }
}

✅ Sample Test 1 · Role-Based Access (QCM vs QI vs CEO)

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

test.describe('Task Mobile · Role-based access', () => {
  test('TC-M01 · QCM · FAB visible + Create form works', async ({ page, context }) => {
    await context.addCookies([{ name: 'role', value: 'qcm', url: 'http://localhost:3000' }]);
    await page.goto('/task-mobile');
    await expect(page.locator('.tm-fab-create')).toBeVisible();
  });

  test('TC-M18 · QC Inspector · FAB hidden', async ({ page, context }) => {
    await context.addCookies([{ name: 'role', value: 'qi', url: 'http://localhost:3000' }]);
    await page.goto('/task-mobile');
    await expect(page.locator('.tm-fab-create')).toBeHidden();
  });

  test('TC-M04 · CEO · read-only view', async ({ page, context }) => {
    await context.addCookies([{ name: 'role', value: 'ceo', url: 'http://localhost:3000' }]);
    await page.goto('/task-mobile');
    await expect(page.locator('.tm-fab-create')).toBeHidden();
    await expect(page.locator('.tm-edit-btn')).toBeHidden();
  });
});

✅ Sample Test 2 · WBS Picker (v34 scroll bar)

TypeScripttest('TC-M36 · WBS Modal L1 tabs · horizontal scroll bar visible (v34)', async ({ page }) => {
  const create = new CreateTaskPage(page);
  await page.goto('/task-mobile');
  await create.openCreateForm();
  await create.pickProject('PJ-001');
  await create.wbsField.tap();

  const tabs = page.locator('.pk-wbsm-l1s');
  await expect(tabs).toBeVisible();

  // Verify overflow-x auto/scroll · v34 requirement
  const overflowX = await tabs.evaluate((el) => window.getComputedStyle(el).overflowX);
  expect(['auto', 'scroll']).toContain(overflowX);

  // Verify tabs overflow the container width
  const scrollWidth = await tabs.evaluate((el) => el.scrollWidth);
  const clientWidth = await tabs.evaluate((el) => el.clientWidth);
  expect(scrollWidth).toBeGreaterThanOrEqual(clientWidth);

  // Verify all 3 L1 tabs present
  for (const cat of ['Struct', 'Finishing', 'MEP'] as const) {
    await expect(tabs.locator(`[data-l1="${cat}"]`)).toBeVisible();
  }

  // Verify modal constrained to phone frame (v32)
  const box = await page.locator('.pk-wbsm').boundingBox();
  const viewport = page.viewportSize()!;
  expect(box!.width).toBeLessThanOrEqual(viewport.width);
});

✅ Sample Test 3 · Checklist Wizard with Yellow ✓ Badge (v20)

TypeScripttest('TC-M53 + TC-M54 · Pass item shows yellow ✓ pinned across nav', async ({ page, context }) => {
  await context.addCookies([{ name: 'role', value: 'qi', url: 'http://localhost:3000' }]);
  await page.goto('/task-mobile');
  await page.locator('.tm-card').first().tap();
  await page.getByRole('tab', { name: /Checklist/ }).tap();
  await page.getByRole('button', { name: /เริ่มตรวจ Checklist/ }).tap();

  // Wizard opens · press Pass on q1 (assumes passfail type)
  const passBtn = page.locator('.ck-pf-pass').first();
  await passBtn.tap();

  // Verify yellow ✓ badge appears on stepper circle 1
  const circle1 = page.locator('.ck-stepper-circle').first();
  const checkIcon = circle1.locator('.ck-stepper-check');
  await expect(checkIcon).toBeVisible();

  // Verify color is yellow (#FFD23F or equivalent)
  const color = await checkIcon.evaluate((el) => window.getComputedStyle(el).color);
  expect(color).toMatch(/rgb\(255,\s*210,\s*63\)|#FFD23F/i);

  // Navigate away (to q2) and back to q1 · verify ✓ still pinned (v14/v20)
  await page.locator('.ck-stepper-circle').nth(1).tap();
  await page.locator('.ck-stepper-circle').first().tap();
  await expect(checkIcon).toBeVisible();  // still there
});

✅ Sample Test 4 · NCR Create Flow (Fail → Confirm → Form)

TypeScripttest('TC-M57 + TC-M58 · Fail opens NCR confirm · Confirm opens Create-NCR form', async ({ page, context }) => {
  await context.addCookies([{ name: 'role', value: 'qi', url: 'http://localhost:3000' }]);
  await page.goto('/task-mobile');
  await page.locator('.tm-card').first().tap();
  await page.getByRole('button', { name: /เริ่มตรวจ Checklist/ }).tap();

  // Tap Fail on first passfail question
  await page.locator('.ck-pf-fail').first().tap();

  // NCR Confirm dialog appears (v17)
  const dialog = page.getByRole('dialog');
  await expect(dialog).toContainText(/จะสร้าง NCR|Create NCR/);

  // Confirm → opens Create-NCR form (v6 · v18 fix)
  await dialog.getByRole('button', { name: /ยืนยัน|Confirm/ }).tap();

  const ncrForm = page.locator('.ncr-create-form');
  await expect(ncrForm).toBeVisible();

  // Verify Cancel + Save buttons at bottom (v7)
  await expect(page.locator('.ncr-create-form-footer button')).toHaveCount(2);

  // Fill NCR form
  await page.getByLabel(/หัวข้อ NCR|NCR Title/).fill('พบรอยแตกที่คอนกรีต');
  await page.getByLabel(/รายละเอียด|Description/).fill('รอยแตก 3 มม. ที่ตำแหน่ง P-2');

  // Save NCR
  await page.getByRole('button', { name: /บันทึก|Save/ }).tap();
  await expect(page.getByText(/สร้าง NCR เรียบร้อย|NCR created/)).toBeVisible();
});

✅ Sample Test 5 · Full E2E · QCM Creates Task → Inspector Inspects → NCR Loop

TypeScripttest('TC-E2E-01 · Full lifecycle · QCM creates → QI inspects → NCR created', async ({ browser }) => {
  // === Step 1: QCM creates task ===
  const qcmContext = await browser.newContext({ ...devices['Pixel 5'] });
  await qcmContext.addCookies([{ name: 'role', value: 'qcm', url: 'http://localhost:3000' }]);
  const qcmPage = await qcmContext.newPage();
  const create = new CreateTaskPage(qcmPage);

  await qcmPage.goto('/task-mobile');
  await create.openCreateForm();
  await create.pickProject('PJ-001');
  await create.pickSiteZone('อาคาร A', 'Zone 1');
  await create.pickWBS('Struct', 'ตอกเสาเข็ม');
  await create.checklistField.tap();
  await qcmPage.getByText('ตรวจงานคอนกรีต').tap();
  await create.workflowField.tap();
  await qcmPage.getByText('Standard + NCR Loop').tap();
  await create.pickInspector('สมชาย ใจดี');
  await create.setRisk('H');
  await create.save();
  await expect(qcmPage.getByText(/สร้างเรียบร้อย/)).toBeVisible();

  const taskCode = await qcmPage.locator('.tm-card').first()
    .locator('.tm-code').textContent();
  await qcmContext.close();

  // === Step 2: QC Inspector inspects · fails · triggers NCR ===
  const qiContext = await browser.newContext({ ...devices['Pixel 5'] });
  await qiContext.addCookies([{ name: 'role', value: 'qi', url: 'http://localhost:3000' }]);
  const qiPage = await qiContext.newPage();
  await qiPage.goto('/task-mobile');
  await qiPage.getByText(taskCode!).tap();
  await qiPage.getByRole('button', { name: /เริ่มตรวจ Checklist/ }).tap();

  // Fail first question · trigger NCR
  await qiPage.locator('.ck-pf-fail').first().tap();
  await qiPage.getByRole('button', { name: /ยืนยัน|Confirm/ }).tap();

  // Fill NCR
  await qiPage.getByLabel(/หัวข้อ NCR/).fill('พบรอยแตก');
  await qiPage.getByRole('button', { name: /บันทึก|Save/ }).tap();

  // Verify NCR created + Sub Contractor auto-assigned
  await expect(qiPage.getByText(/NCR created|สร้าง NCR/)).toBeVisible();
  await qiContext.close();
});

06Appendix

📌 Version History

• ConstructQ_TaskMobile_v34.0.html · source · WBS modal L1 tabs · visible horizontal scrollbar
• เอกสารนี้ v1.0 · 13 ก.ค. 2569 · 82 test cases · 5 sample Playwright scripts

🔗 References

• Playwright Mobile: https://playwright.dev/docs/emulation
• Related file: web ConstructQ_TaskManagement(QC+NCR)_v40.0.html · shares data structures
• Checklist port: ConstructQ_Checklist_v16.0.html (rule chip + type-aware widgets v23)
• Excel companion: ConstructQ_TaskMobile_TestScenario_v1.0.xlsx