ตรวจสอบคุณภาพและทดสอบระบบ (Quality Assurance)
  • By Admin
  • 312
  • 25 ก.พ. 2569

ตรวจสอบคุณภาพและทดสอบระบบ (Quality Assurance)

ตรวจสอบความเรียบร้อยของเว็บไซต์ในโหมด Preview ทดสอบการแสดงผลบนอุปกรณ์ต่างๆ (Responsive) และหาจุดบกพร่องก่อนเผยแพร่

✅ Module 8: ตรวจสอบคุณภาพและทดสอบระบบ (QA)

สวมวิญญาณนักสืบ จับผิดจุดบกพร่อง ก่อนปล่อยเว็บไซต์สู่สายตาชาวโลก

1. ทำไมต้อง QA (Quality Assurance)?

ลองจินตนาการว่าเราสร้างบ้านเสร็จแล้ว แต่ลืมตรวจสอบว่าล็อกประตูได้ไหม หรือน้ำประปาไหลหรือเปล่า... เว็บไซต์ก็เหมือนกันครับ! ก่อนจะเปิดให้คนอื่นเข้าชม เราต้องมั่นใจว่าทุกอย่างทำงานได้ถูกต้อง ไม่มีคำผิด และไม่มีลิงก์เสีย เพราะสิ่งเหล่านี้ส่งผลต่อ "ความน่าเชื่อถือ" ของโครงงานเราครับ

2. พลังแห่งปุ่ม "แสดงตัวอย่าง (Preview)"

สิ่งที่เราเห็นในหน้าจอแก้ไข (Editor) อาจจะไม่เหมือนกับสิ่งที่ผู้ใช้เห็นจริง 100% ครับ ดังนั้น Google Sites จึงมีปุ่ม "ไอคอนรูปดวงตา (Preview)" ที่แถบด้านบน เพื่อจำลองมุมมองจริง

3. เช็คความเป๊ะบนทุกอุปกรณ์ (Responsive Design Check)

สมัยนี้คนดูเว็บผ่านมือถือมากกว่าคอมพิวเตอร์แล้วนะครับ! โชคดีที่ Google Sites ปรับหน้าจอให้เป็น Responsive (ย่อ-ขยายตามขนาดจอ) โดยอัตโนมัติ แต่เราก็ต้องตรวจสอบอยู่ดี

เมื่ออยู่ในโหมด Preview ให้มองหา แถบเมนูด้านล่างขวา แล้วลองคลิกเปลี่ยนไอคอนไปมาเพื่อดูผลลัพธ์:

  • 📱 โทรศัพท์ (Mobile): เช็คว่าตัวหนังสือเล็กไปไหม? เมนูเปลี่ยนเป็นขีด 3 ขีด (Hamburger menu) หรือยัง?
  • 📟 แท็บเล็ต (Tablet): การจัดเรียงรูปภาพยังสวยงามอยู่ไหม?
  • 💻 หน้าจอขนาดใหญ่ (Desktop): ภาพรวมดูโล่งเกินไปหรือเปล่า?

4. เช็กลิสต์จับผิด (The QA Checklist)

ก่อนจะกด Publish ลองไล่เช็คตามรายการนี้ดูนะครับ:

  • 🔍 คำผิด/การสะกด: อ่านทวนทุกบรรทัด อย่าให้มีเด็ดขาด!
  • 🔗 ลิงก์ตาย (Broken Links): ลองกดทุกปุ่ม ทุกข้อความที่เป็นลิงก์ ว่ามันพาไปถูกหน้าหรือไม่
  • 🖼️ รูปภาพ/วิดีโอ: โหลดขึ้นครบทุกรูปไหม? วิดีโอ YouTube เล่นได้ปกติหรือเปล่า?
  • 🔐 สิทธิ์การเข้าถึง: ไฟล์จาก Drive ที่ฝังไว้ (Module 6) เปิดสิทธิ์เป็นสาธารณะหรือยัง? (ลองใช้โหมด Incognito เช็คดู)

🚩 ภารกิจ: ปฏิบัติการล่าบัก (Bug Hunt)

ให้สมาชิกทุกคนในทีม สวมบทบาทเป็น Tester ช่วยกันหาข้อผิดพลาดในเว็บไซต์ของตัวเองครับ

🛠 สเต็ปการทำงาน:

  1. เปิด Google Sites ของกลุ่ม แล้วกดปุ่ม Preview (รูปดวงตา)
  2. แบ่งหน้าที่กันทดสอบ:
    • คนทึ่ 1: เช็คโหมดมือถือ 📱
    • คนที่ 2: เช็คโหมดแท็บเล็ต 📟
    • คนที่ 3: เช็คโหมดเดสก์ท็อป และไล่กดທุกลิงก์ 💻🔗
  3. จดบันทึกจุดที่ต้องแก้ไข (เช่น "หน้าเกี่ยวกับเรา: ลิงก์ Facebook กดไม่ได้")
  4. กดปิดโหมด Preview แล้วกลับไปช่วยกันแก้ไขให้เรียบร้อย!

✍️ แบบทดสอบประเมินตนเอง (Module 8)

ทดสอบความละเอียดรอบคอบก่อนปล่อยงาน

ข้อที่ 1: ประโยชน์ที่สำคัญที่สุดของการกดปุ่ม "แสดงตัวอย่าง (Preview)" รูปดวงตา คืออะไร?

ข้อที่ 2: คำว่า "Responsive Design" ในการสร้างเว็บไซต์ หมายถึงอะไร?

ข้อที่ 3: ในขั้นตอน QA สิ่งใดต่อไปนี้ที่ไม่จำเป็นต้องตรวจสอบ?


แชร์ :

บทเรียนอื่น ๆ