Workshop Booking Capstone#

Capstone นี้ไม่วัดว่าคุณเขียน locator ได้กี่แบบ แต่ให้ส่งมอบ test system ที่ทีมอื่นรัน, อ่าน report และเปลี่ยนต่อได้ โจทย์คือ Workshop Hub ซึ่งมี Organizer, Learner, Admin, REST API, reminder dependency และ browser UI คุณต้องเลือก evidence ที่พอดีกับ risk แทนการทำทุก scenario ผ่าน E2E

Product Contract#

ระบบตัวอย่างมี requirements:

1. Organizer สร้างและเปิด workshop ที่ capacity 1–500
2. Learner จองได้ 1 ครั้งต่อ workshop; ที่นั่งเต็มแล้วเข้า waitlist
3. Learner ยกเลิกก่อน cutoff ที่ server กำหนด
4. Organizer เห็น attendee count แต่ไม่เห็นข้อมูลเกิน role scope
5. Admin ปิด workshop และระบบแจ้งผู้ได้รับผลกระทบ
6. Reminder failure ไม่ rollback reservation แต่ UI ต้องบอกสถานะที่ถูกต้อง
7. Browser support และ locale/timezone matrix มาจาก product policy ที่แนบกับ submission

ค่าขอบเขต 1–500 เป็น contract ของโจทย์เท่านั้น ระบบจริงต้องให้ product/domain owner กำหนดและ version

Evidence Architecture#

System map

Diagram แสดงว่า risk map เป็น input ไม่ใช่ tests ที่มีอยู่แล้ว Data/auth เป็น dependencies ที่แชร์ pattern ได้ แต่ state ต้อง isolate Report/CI เป็น consumer ของ API/UI evidence

Target Repository Layout#

playwright.config.ts
playwright/.auth/                 ignored credentials
src/
  api/
    workshop-routes.ts
    reservation-routes.ts
    schemas.ts
  fixtures/
    test.ts
    recorded-api.ts
  pom/
    workshop-catalog-pom.ts
    workshop-form-pom.ts
    reservation-pom.ts
  test-data/
    builders.ts
tests/
  auth/
    learner.setup.ts
    organizer.setup.ts
  api/
    workshops/create.spec.ts
    reservations/reserve.spec.ts
    authorization/roles.spec.ts
  ui/
    learner/reserve.spec.ts
    learner/cancel.spec.ts
    organizer/create.spec.ts
    accessibility/catalog.spec.ts
    visual/workshop-card.spec.ts

Layout เป็น course convention ปรับตาม repo ได้ แต่ route modules คืน raw response, POM แยก elements/actions/assertions, fixtures เป็นเจ้าของ lifecycle และ specs เป็นเจ้าของ behavior assertions

Minimum Test Matrix#

Concurrency ของ last seat ต้องมี service/database integration evidence เพิ่มนอก browser suite เพราะ Playwright API requests อย่างเดียวควบคุม transaction interleaving ไม่แม่นพอ Capstone ต้องระบุ gap และ owner ไม่เคลมเกินหลักฐาน

Tracer Bullet แรก#

เริ่มจาก behavior เดียวทะลุ architecture:

test(
  'BOOK-RESERVE-001 - reserves an available seat and shows it in My workshops',
  { tag: ['@smoke', '@reservations'] },
  async ({ learnerPage, workshop }) => {
    const catalog = createWorkshopCatalog({ page: learnerPage })

    await test.step('Reserve the seeded workshop', async () => {
      await catalog.actions.navigate()
      await catalog.actions.reserve(workshop.title)
    })

    await test.step('Show one confirmed reservation', async () => {
      await expect(
        learnerPage.getByRole('heading', { name: 'Reservation confirmed' }),
      ).toBeVisible()
      await learnerPage.goto('/my-workshops')
      await expect(
        learnerPage.getByRole('article').filter({ hasText: workshop.title }),
      ).toContainText('Confirmed')
    })
  },
)

ให้ tracer ผ่าน local/CI พร้อม trace/report/cleanup ก่อนขยาย negative cases จะเปิดปัญหา config, auth, data และ selectors เร็วกว่าการเขียน 40 specs แล้วค่อย integrate

Implementation Increments#

1. Foundation — pin 1.62.1, config Chromium, web server/base URL, scripts และ first tracer
2. Data/Auth — builders, exact cleanup, learner/organizer setup projects และ ignored auth states
3. API Contracts — route modules, Zod schemas, error/security assertions, recorded/redacted exchanges
4. UI Interfaces — page/component objects เฉพาะ reuse ที่เกิดแล้ว, semantic locators, behavior steps
5. Rare States — reminder error route, full/waitlist data, clock-controlled countdown
6. Quality Axes — keyboard, axe, ARIA snapshot, focused visual and mobile project
7. CI Scale — all browser policy, fail-on-flaky, artifacts, repeat/parallel audit แล้วจึง shard

ทุก increment ต้องรันได้และให้ evidence บางส่วน ไม่สร้าง framework หลายสัปดาห์ก่อนมี test จริง

Required Failure Drills#

จงทำให้ test fail โดยตั้งใจและพิสูจน์ว่า artifact เพียงพอ:

• เปลี่ยน accessible name เพื่อดู strict locator/trace
• ให้ API คืน 422 แทน 201 แล้วดู redacted exchange
• ทำให้ 2 tests ใช้ reference เดียวเพื่อสังเกต parallel collision จากนั้นแก้ด้วย builder
• เปลี่ยน font/width เพื่อ review visual diff
• ให้ reminder route คืน 503 และตรวจ visible degraded state
• หมดอายุ auth state และตรวจ regeneration/401 diagnosis

Drill สำคัญเพราะ suite ถูกใช้ตอนสีแดง ถ้าทดสอบแต่ report สีเขียวเราไม่รู้ว่ามันช่วยแก้ defect ได้จริง

Submission Artifacts#

• risk/behavior map พร้อม test seam และสิ่งที่ test ไม่พิสูจน์
• source tree และ README runbook local/CI
• config พร้อมเหตุผลของ browsers, retries, timeouts, workers และ tags
• tests ตาม minimum matrix โดยรันเดี่ยว/parallel/repeat ได้
• HTML report/trace จาก failure drill และตัวอย่าง redacted attachment
• CI workflow + merged report plan หากใช้ shards
• known gaps, issue owner และ review date
• upgrade note ที่อ้าง Playwright 1.62.1/release date และจุด re-check

Definition of Done#

• ไม่มี CSS/XPath/positional selector เป็น primary strategy โดยไม่มีเหตุผล
• ทุก test มี unique data และไม่พึ่ง execution order
• POM shape เป็น elements, actions, assertions
• API errors ตรวจ status, code, schema/details และ no leakage
• Auth state ไม่ถูก commit; artifacts redact secret/data สำคัญ
• Rare dependency states deterministic แต่มี unmocked contract coverage
• Accessibility/visual/emulation claims ระบุขอบเขตตรง
• Retry-passed ทำ CI fail หรือเข้า triage policy ไม่ถูก normalize
• Build report บอก failing behavior/step และมี artifact พอวิเคราะห์
• Version/package/browser/image ถูก pin และ upgrade runbook ทำซ้ำได้

อ่านเพิ่มเติม#

• Playwright documentation
• Playwright best practices
• Playwright 1.62 release notes
• Playwright v1.62.1 release