English
testover · เส้นทางผู้ใช้

ผู้ใช้ทำอะไรบนเว็บได้บ้าง

Task Board คือเว็บจดงานเล็กๆ หน้านี้พาตามดูทีละขั้นว่าผู้ใช้เข้ามาแล้วทำอะไรได้ จะไปหน้าไหนต่อ และเจออะไรเมื่อกรอกผิด พร้อมผังที่ไล่ตามด้วยตาได้ทันที

วิธีรันแอป รันในเครื่องด้วย npm start แล้ว login ด้วย demo / demo1234

ผู้ใช้ทำอะไรได้บ้าง

6 อย่างหลักที่เว็บเปิดให้ทำ ส่วนหัวข้อถัดไปอธิบายแต่ละอย่างเป็นผังและข้อความ

1

สมัครสมาชิก

ตั้ง username 3–20 ตัว, ชื่อที่แสดง และรหัสผ่านอย่างน้อย 8 ตัว

2

เข้า/ออกจากระบบ

ลองเร็วๆ ด้วยบัญชี demo / demo1234 กด Logout ได้จากแถบบนทุกหน้า

3

จัดการงาน

เพิ่ม ติ๊กเสร็จ แก้ชื่อ ลบ พร้อมระดับ Low / Medium / High

4

ค้นหาและกรอง

พิมพ์เพื่อค้นหา, กรอง All / Active / Completed และดูว่าเหลือกี่งาน

5

ดูแลโปรไฟล์

เปลี่ยนชื่อที่แสดงและเปลี่ยนรหัสผ่าน

6

ปรับแต่งและลบบัญชี

เปิด dark mode หรือลบบัญชีพร้อมงานทั้งหมด (มีกล่องยืนยัน)

แผนที่หน้าเว็บ

เว็บมี 4 หน้า ผู้ใช้เดินไปมาระหว่างกันตามลูกศร หน้าที่ต้อง login ก่อนคือ Tasks และ Profile

แผนที่หน้าเว็บLogin กับ Register ไปมาหากันได้ ทั้งคู่พาไปหน้า Tasks, Tasks กับ Profile ไปมาหากันได้ และ Logout หรือลบบัญชีพากลับ LoginLogout (ทุกหน้า) · ลบบัญชีLogin#/loginสมัครสมาชิก#/registerสมัคร / กลับ loginTasks#/tasksProfile#/profileโปรไฟล์กลับ
ลูกศรคือทางที่ผู้ใช้ไปได้ · ทุกหน้าหลัง login มีปุ่ม Logout บนแถบบน

1 · เข้าเว็บและยืนยันตัวตน

ทุกคนเริ่มที่นี่ ระบบตัดสินใจให้ว่าจะไป Tasks หรือ Sign in ตามว่ายังมี session ค้างอยู่ไหม

เข้าเว็บและยืนยันตัวตนเปิดเว็บ ถ้ายังมี session ไปหน้า Tasks เลย ไม่งั้นไปหน้า Sign in กรอกถูกเข้า Tasks กรอกผิดเห็นข้อความแดงแล้วลองใหม่ หรือกดสมัครสมาชิก กรอกถูกกติกาเข้า Tasksเปิดเว็บเคย login ค้างไว้?ใช่Tasksไม่หน้า Sign indemo / demo1234สมัครสมัครสมาชิกกรอก 4 ช่องusername และpassword ตรงกัน?ไม่ขึ้นข้อความสีแดงแล้วลองใหม่ใช่เข้าหน้า Tasksกรอกถูกกติกา?ใช่ไม่รายการข้อผิดพลาดแก้แล้วส่งใหม่
อ่านเป็นข้อความ
  1. เปิดเว็บ: ถ้ามี session ค้างอยู่ จะเข้า Tasks ทันที ไม่มีก็ไปหน้า Sign in
  2. กรอก username + password แล้วกด Login: ถูกต้อง → Tasks, ผิด → ข้อความสีแดง แล้วลองใหม่
  3. ยังไม่มีบัญชี: กด Create account → กรอก 4 ช่อง → ถ้าผ่านกติกาจะเข้า Tasks พร้อมข้อความต้อนรับ ถ้าไม่ผ่านจะเห็นรายการข้อผิดพลาดทั้งหมดพร้อมกัน

2 · จัดการงาน

หน้าหลักของเว็บ อยู่ที่ Tasks ผังนี้ตามชีวิตของงาน 1 ชิ้น ตั้งแต่พิมพ์ชื่อจนถูกลบ

ชีวิตของงาน 1 ชิ้นพิมพ์ชื่องานและเลือก priority ถ้าชื่อถูกต้องงานเข้ารายการ จากนั้นติ๊กเสร็จ แก้ชื่อ ลบ หรือล้างงานที่เสร็จแล้วได้ ทุกอย่างบันทึกลงเบราว์เซอร์ทันทีหน้า Tasksพิมพ์ชื่องาน + เลือก Priorityแล้วกด Add taskชื่อยาว 1–80 ตัวอักษร?ไม่ขึ้นข้อความแดงแก้แล้วลองใหม่ใช่งานขึ้นในรายการบันทึกอัตโนมัติจัดการงานได้ 4 แบบติ๊กเสร็จขีดฆ่า · left ลดลงEditแก้ชื่อ → SaveDeleteลบแถวนั้นทันทีClear completedลบที่เสร็จทั้งหมดบันทึกลงเบราว์เซอร์ทันทีreload หน้าแล้วงานยังอยู่
อ่านเป็นข้อความ
  1. พิมพ์ชื่องาน เลือก Priority (Low / Medium / High ค่าเริ่มต้น Medium) แล้วกด Add task
  2. ชื่อว่างหรือเกิน 80 ตัว → ข้อความสีแดง งานยังไม่ถูกเพิ่ม
  3. ผ่าน → งานขึ้นท้ายรายการและบันทึกทันที
  4. แต่ละแถว: ติ๊กเสร็จ / Edit / Delete และปุ่ม Clear completed ลบทุกงานที่เสร็จแล้ว (ปุ่มกดไม่ได้ถ้ายังไม่มีงานที่เสร็จ)

ค้นหา

พิมพ์ในช่อง Search tasks รายการกรองตามไปทีละตัวอักษร ไม่สนตัวพิมพ์ใหญ่เล็ก ไม่เจอจะขึ้น No matching tasks

กรอง

ปุ่ม All / Active / Completed สลับมุมมอง ปุ่มที่เลือกอยู่จะถูกเน้น และใช้ร่วมกับการค้นหาได้

นับงานที่เหลือ

ท้ายรายการบอกว่า “N tasks left” คือจำนวนงานที่ยังไม่ติ๊กเสร็จ

3 · ดูแลโปรไฟล์

หน้า Profile แบ่งเป็นการ์ด 4 ใบ แต่ละใบทำงานแยกกัน ผิดที่ใบไหนก็แจ้งเตือนเฉพาะใบนั้น

สิ่งที่ทำได้ในหน้า Profileจากหน้า Profile แก้ชื่อที่แสดง เปลี่ยนรหัสผ่าน สลับ dark mode หรือลบบัญชี การลบบัญชีต้องกดยืนยัน ถ้ายืนยันจะกลับ Login และข้อมูลถูกลบหน้า Profileแก้ชื่อที่แสดงห้ามว่างProfile updatedเปลี่ยนรหัสผ่านต้องรู้รหัสเดิมใหม่ ≥ 8 ตัว ตรงกันDark modeสลับธีมทันทีจำไว้ครั้งหน้าลบบัญชีข้อมูลหายถาวรกด OKในกล่องยืนยัน?ไม่อยู่หน้าเดิมไม่มีอะไรเปลี่ยนใช่กลับหน้า LoginAccount deleted
อ่านเป็นข้อความ
  1. Details: แก้ชื่อที่แสดง ห้ามว่าง สำเร็จจะขึ้น Profile updated และชื่อบนแถบบนเปลี่ยนทันที
  2. Password: ต้องใส่รหัสเดิมให้ถูก รหัสใหม่อย่างน้อย 8 ตัวและยืนยันให้ตรงกัน สำเร็จจะขึ้น Password changed
  3. Appearance: ติ๊ก Dark mode สลับธีมทันทีและจำไว้
  4. Danger zone: Delete account ถามยืนยันก่อน ถ้ายืนยันจะลบบัญชีกับงานทั้งหมดแล้วกลับ Login

ข้อความที่ผู้ใช้จะเห็น

ตัวอย่างข้อความที่ผู้ใช้เห็นจริงในหน้าเว็บ (UI เป็นภาษาอังกฤษ)

ที่ไหนเกิดเมื่อข้อความ
Sign inช่องว่าง / ข้อมูลไม่ตรงUsername is required
Password is required
Username and password do not match
Create accountกรอกไม่ถูกกติกา (แสดงพร้อมกันทุกข้อ)Username must be 3-20 characters (letters, numbers, underscore)
Display name is required
Password must be at least 8 characters
Passwords do not match
Username is already taken
Tasksชื่องานว่าง / ยาวเกินTask title is required
Task title must be 80 characters or fewer
Tasksรายการว่างNo tasks yet. Add your first task above.
No matching tasks
Profileกรอกไม่ถูกDisplay name is required
Current password is incorrect
New password must be at least 8 characters
Passwords do not match
Profileสำเร็จProfile updated
Password changed
ทุกหน้าข้อความแจ้งสั้นๆ ตอนเปลี่ยนหน้าWelcome, <name>!
You have been signed out
Please sign in to continue
Account deleted

ข้อควรรู้

ข้อควรระวัง: นี่คือแอปตัวอย่างสำหรับฝึกทดสอบ ข้อมูลอยู่ในหน่วยความจำของ server และหายเมื่อ restart บัญชี demo ใช้ร่วมกัน ห้ามใช้รหัสผ่านจริงของคุณ

อ่านต่อ