English
testover · เริ่มต้นที่นี่

เว็บพังตอนไม่มีใครดู
เราก็ยังรู้ก่อนใคร

testover คือชุดเทสอัตโนมัติสำหรับเว็บ Task Board ที่ทำงานเองทุกเสาร์-อาทิตย์ แล้วส่งผล ✅ ผ่าน หรือ ❌ พัง เข้าแชตของทีม โดยไม่ต้องมีใครกดอะไร

คืออะไร

เว็บตัวอย่าง (Task Board) + เทส Playwright 127 เคส + ตัวรันและแจ้งผลอัตโนมัติบน GitHub Actions

ทำอะไรได้

ทดสอบสมัคร/login, จัดการงาน, โปรไฟล์ และเส้นทางใช้งานเต็ม แล้วรายงานผลเข้า Discord หรือ Slack

เป้าหมาย

รู้ทันทีว่าฟีเจอร์หลักยังใช้ได้ไหม ไม่ต้องรอผู้ใช้มาแจ้ง และเป็นโปรเจกต์ตัวอย่างให้ฝึกทำ QA อัตโนมัติครบวงจร

เส้นทางของโปรเจกต์ใน 6 ขั้น

ลองตามไปทีละขั้น จะเห็นว่าของแต่ละชิ้นในโปรเจกต์มีไว้ทำอะไร และต่อกันอย่างไร

  1. ปัญหาที่เริ่มต้น

    ไม่มีใครเปิดเว็บเช็กทุกสัปดาห์

    ฟีเจอร์พื้นฐานอย่าง login หรือเพิ่มงานอาจพังเงียบๆ ตอนวันหยุด กว่าจะรู้ก็เมื่อผู้ใช้บ่น การเช็กด้วยมือก็ช้าและลืมง่าย

    ทางออก: ให้เครื่องเช็กแทนตามเวลา แล้วบอกผลทางแชต
  2. สิ่งที่ถูกทดสอบ

    เว็บ Task Board ที่สร้างไว้ในโปรเจกต์

    ผู้ใช้สมัคร/login → เพิ่มงานพร้อมระดับความสำคัญ → ติ๊กเสร็จ แก้ ลบ ค้นหา กรอง → ตั้งค่าโปรไฟล์ เปลี่ยนรหัสผ่าน เปิด dark mode หรือลบบัญชี

    ข้อมูลเก็บใน localStorage ของเบราว์เซอร์ ไม่ต้องมี backend จึงรันง่ายและผลคงที่

    ไฟล์: app/index.html, app/server.mjs · ผู้ใช้ทดลอง demo / demo1234
  3. ตัวตรวจสอบ

    Playwright เปิดเบราว์เซอร์จริงแล้วลองใช้แทนคน

    เทส 127 เคสคลิกปุ่ม กรอกฟอร์ม แล้วเช็กว่าผลตรงตามคาด ทั้งกรณีปกติ กรอกผิด/ว่าง ข้อมูลหลัง reload จอมือถือ และข้อมูลใน storage ที่เสีย แต่ละเคสเริ่มด้วยเบราว์เซอร์ใหม่ ไม่มีข้อมูลค้างข้ามเคส

    ดูว่าครอบคลุมอะไรบ้าง
    • login.spec — สมัคร, login/logout, route guard, 404
    • tasks.spec — เพิ่ม/แก้/ลบ/ติ๊ก, ค้นหา, กรอง
    • profile.spec — ชื่อ, รหัสผ่าน, dark mode, ลบบัญชี
    • journey.spec — เส้นทางเต็มตั้งแต่สมัครจนลบบัญชี, ผู้ใช้ 2 คนข้อมูลไม่ปนกัน
    • contracts/ และ characterization/ — ข้อตกลงรูปข้อมูลและพฤติกรรมที่จดไว้ (ดู โครงสร้างการเทส)
    • a11y.spec — สแกน accessibility ด้วย axe ตาม WCAG 2.1 A/AA
    ไฟล์: tests/*.spec.ts, tests/support/pages.ts (Page Object)
  4. คุณลองเองในเครื่อง

    รันได้ใน 3 คำสั่ง

    ต้องมี Node.js 22 ขึ้นไป ระบบเปิดเว็บให้เองอัตโนมัติ (เครื่องใหม่: git clone https://github.com/mongoemon/testover.git ก่อน ดูขั้นตอนเต็มใน README หัวข้อ 2)

    npm ci
    npx playwright install chromium   # ครั้งแรกครั้งเดียว
    npm test                          # รันทั้ง 127 เคส

    อยากดูเร็วๆ ใช้ npm run test:smoke (5 เคสหลัก) หรืออยากเห็นเบราว์เซอร์ทำงานใช้ npm run test:headed แล้วเปิดรายงานด้วย npm run report

    ได้: ผ่าน/พังรายเคส พร้อม screenshot, video, trace ของเคสที่พัง
  5. ทำงานเอง ไม่ต้องมีคนกด

    GitHub Actions รันทุกเสาร์-อาทิตย์

    Workflow weekend-e2e.yml ตั้งเวลาเริ่มทุกเสาร์และอาทิตย์ 09:00 (เวลาไทย) ตั้งเวลาหมดไว้ 20 นาทีกันค้าง และกดรันเองได้จากแท็บ Actions เมื่ออยากเช็กนอกรอบ

    ข้อควรรู้: cron ของ GitHub ใช้เวลา UTC และอาจเริ่มช้าได้หลายนาที
  6. ผลลัพธ์ที่คุณได้รับ

    ข้อความสรุปเด้งเข้า Discord / Slack

    สคริปต์ scripts/notify.mjs อ่านผลเทสแล้วส่งเข้า webhook ถ้าพัง จะบอกชื่อเคสที่พังและลิงก์ไปดู run พร้อมรายงานละเอียดใน Artifacts

    ✅ PASS — weekend QA runpassed: 127 | failed: 0
    flaky: 0 | skipped: 0
    ❌ FAIL — weekend QA runpassed: 126 | failed: 1
    • Task board › deletes only the targeted task
    เป้าหมายสุดท้าย: เช้าวันหยุด เปิดแชตมาเห็น ✅ ก็สบายใจ เห็น ❌ ก็รู้ทันทีว่าต้องแก้อะไร

สรุปสิ่งที่โปรเจกต์ทำได้

ตัวเลขด้านล่างอ้างจาก README ของโปรเจกต์

127

เคสทดสอบ

E2E, contract, characterization และ accessibility (ยังมี unit test อีก 42)

5

Smoke test

ชุดเร็วเช็กเส้นทางหลัก ใช้ npm run test:smoke

10

Tag แยกชนิดเคส

เลือกรันเฉพาะ @security, @validation ฯลฯ ด้วย --grep

2

ช่องทางแจ้งผล

Discord และ Slack ใช้ webhook เดียวกัน ไม่ต้องแก้โค้ด

ไฟล์สำคัญที่ควรรู้จัก

ถ้าจะเริ่มแก้หรือเพิ่มอะไร ให้ดูตรงนี้ก่อน

ไฟล์/โฟลเดอร์ทำหน้าที่
app/เว็บ Task Board และเซิร์ฟเวอร์ static เล็กๆ ที่ใช้เป็นเป้าหมายการเทส
tests/เทส Playwright ทั้งหมด แยกตามพื้นที่ของแอป
unit/unit test ของตัวเซิร์ฟเวอร์และสคริปต์แจ้งผล
scripts/notify.mjsอ่านผลเทสแล้วส่งเข้า webhook
.github/workflows/weekend-e2e.ymlตั้งเวลาให้ทุกอย่างรันอัตโนมัติบน GitHub
playwright.config.tsตั้งค่า Playwright (เปิดเว็บ, reporter, retry)
ข้อควรระวัง: แอปนี้เก็บรหัสผ่านเป็นข้อความธรรมดาใน localStorage โดยตั้งใจ เพื่อให้เทสได้โดยไม่ต้องมี backend ห้ามนำแบบนี้ไปใช้กับงานจริง และ Webhook URL คือรหัสลับ ให้เก็บใน GitHub Secrets เท่านั้น

ไปต่อที่ไหนดี