E2E Tests ด้วย Playwright

เกริ่นนำ: E2E Test คืออะไร ทำไมต้องทำ?

ลองจินตนาการว่าเรากำลังจะเปิดร้านขายของออนไลน์ ก่อนจะเปิดร้านจริง ๆ เราคงอยากมั่นใจว่าลูกค้าจะเข้ามาเลือกสินค้า หยิบใส่ตะกร้า และชำระเงินได้ครบทุกขั้นตอนใช่ไหมครับ? นี่แหละครับคือหัวใจของ E2E Test หรือ End-to-End Test (การทดสอบแบบครบวงจร) มันคือการจำลองการใช้งานจริงของลูกค้าตั้งแต่ต้นจนจบ เพื่อให้แน่ใจว่าระบบของเราทำงานได้ถูกต้องสมบูรณ์แบบ

แล้วทำไมเราต้องทำ E2E Test ด้วยล่ะ? ก็เพื่อความมั่นใจไงครับ! ถ้าเราทดสอบแค่บางส่วน แต่ไม่ได้ลองใช้จริง ๆ ทั้งระบบ เราก็ไม่มีทางรู้ได้เลยว่าเมื่อลูกค้าเข้ามาใช้งานจริง ๆ จะติดขัดตรงไหนไหม การทำ E2E Test จึงช่วยให้เราจับข้อผิดพลาดที่อาจเกิดขึ้นเมื่อระบบส่วนต่าง ๆ ทำงานร่วมกันได้ก่อนที่ลูกค้าจะเจอ

E2E Test ต่างจาก Unit Test ยังไงนะ? (เหมือนเช็คเครื่องยนต์กับเช็คทั้งคัน)

ในการเขียนโปรแกรม เรามีการทดสอบหลายแบบครับ ที่คุณอาจเคยได้ยินคือ Unit Test (ยูนิต เทสต์) ซึ่งเปรียบเหมือนกับการที่เราทดสอบชิ้นส่วนเล็ก ๆ ของรถยนต์ทีละชิ้น เช่น ทดสอบว่าเครื่องยนต์ทำงานได้ดีไหม ล้อหมุนได้ปกติหรือเปล่า คือเน้นไปที่การทำงานของฟังก์ชันเล็ก ๆ แต่ละตัวแยกกัน

ส่วน E2E Test จะต่างออกไปครับ มันเหมือนกับการที่เราขับรถออกไปทดลองวิ่งบนถนนจริง ๆ เพื่อดูว่าทุกชิ้นส่วนทำงานร่วมกันได้ดีไหม ขับแล้วเลี้ยวได้ไหม เบรกอยู่หรือเปล่า ในโลกของเว็บไซต์ E2E Test ก็คือการจำลองผู้ใช้จริง ๆ เข้ามาใช้งานผ่านเว็บเบราว์เซอร์ (เช่น Chrome, Firefox) ตั้งแต่เปิดหน้าเว็บไปจนถึงทำภารกิจสำเร็จ เช่น 'ผู้ใช้เข้าสู่ระบบ → เพิ่มสินค้าลงตะกร้า → ชำระเงินสำเร็จ' เพื่อดูว่าขั้นตอนทั้งหมดนี้ทำงานได้ราบรื่นหรือไม่

Playwright คืออะไร? และทำไมเราถึงใช้มัน?

เมื่อเราเข้าใจแล้วว่า E2E Test สำคัญแค่ไหน คำถามต่อไปคือแล้วเราจะ 'จำลอง' การใช้งานของผู้ใช้ยังไงล่ะ? นี่แหละครับคือบทบาทของ Playwright (เพลย์ไรต์) Playwright คือเครื่องมือยอดนิยมที่ช่วยให้นักพัฒนาโปรแกรมสามารถเขียนโค้ดเพื่อ 'สั่ง' ให้เว็บเบราว์เซอร์ (อย่าง Chrome, Firefox, Safari) ทำงานต่าง ๆ ได้เองแบบอัตโนมัติ

นึกภาพว่า Playwright เป็นเหมือนหุ่นยนต์ที่สามารถเปิดเบราว์เซอร์ของคุณ กรอกข้อมูลในช่องต่าง ๆ คลิกปุ่ม หรือแม้แต่ถ่ายรูปหน้าจอเก็บไว้ได้เองโดยที่เราไม่ต้องไปนั่งกดเองเลยครับ มันจึงเป็นเครื่องมือที่ทรงพลังมากในการสร้าง E2E Test เพราะมันสามารถจำลองพฤติกรรมของผู้ใช้ได้อย่างแม่นยำและรวดเร็ว

ให้ Claude ช่วยเขียน E2E Test ด้วย Playwright ยังไง? (เหมือนบอกผู้ช่วยให้ทำงาน)

การเขียน E2E Test ด้วย Playwright อาจดูซับซ้อนสำหรับมือใหม่ แต่โชคดีที่เรามี Claude ที่เป็นเหมือนผู้ช่วยอัจฉริยะครับ คุณสามารถ 'บอก' Claude ได้เลยว่าคุณอยากให้ทดสอบขั้นตอนอะไรบ้าง แล้ว Claude จะแปลงสิ่งที่คุณบอกให้เป็นโค้ด Playwright ที่พร้อมใช้งาน

สิ่งสำคัญคือการอธิบาย 'ขั้นตอนที่ผู้ใช้ทำ' ให้ละเอียดและชัดเจนที่สุดเท่าที่จะทำได้ครับ ยิ่งคุณให้รายละเอียดมากเท่าไหร่ Claude ก็จะยิ่งเข้าใจและเขียนโค้ดได้ตรงตามความต้องการของคุณมากขึ้นเท่านั้น เหมือนเรากำลังสอนผู้ช่วยให้ทำงานนั่นแหละครับ

1. เปิดหน้าเว็บ https://example.com/login
2. กรอกชื่อผู้ใช้ 'user123' ในช่องที่มีป้ายกำกับว่า 'Username'
3. กรอกรหัสผ่าน 'password123' ในช่องที่มีป้ายกำกับว่า 'Password'
4. คลิกปุ่ม 'เข้าสู่ระบบ'
5. ตรวจสอบว่าเห็นข้อความ 'เข้าสู่ระบบสำเร็จ' บนหน้าจอ

ลองสั่ง Claude ให้รัน Test และดูผลลัพธ์กัน!

หลังจากที่ Claude เขียนโค้ด Playwright ให้เราแล้ว เราสามารถสั่งให้ Claude 'รัน' (run) การทดสอบนั้นได้ทันทีครับ Claude จะจำลองการเปิดเบราว์เซอร์ขึ้นมา (บางทีคุณอาจจะไม่เห็นหน้าต่างเบราว์เซอร์จริง ๆ โผล่ขึ้นมา แต่เบื้องหลังมันกำลังทำงานอยู่) และทำตามขั้นตอนที่เราได้บอกไปทีละขั้นอย่างรวดเร็ว

เมื่อการทดสอบเสร็จสิ้น Claude จะแจ้งให้เราทราบผลลัพธ์ว่าการทดสอบ 'ผ่าน' (Pass) หรือ 'ไม่ผ่าน' (Fail) ถ้าผ่านก็หมายความว่าทุกขั้นตอนทำงานได้ถูกต้องตามที่เราคาดหวัง แต่ถ้าไม่ผ่าน Claude ก็มักจะให้ข้อมูลเบื้องต้นว่าเกิดข้อผิดพลาดตรงไหน ซึ่งช่วยให้เรากลับไปแก้ไขปัญหาได้ง่ายขึ้น

1. พิมพ์ Prompt เช่น: 'ช่วยเขียน E2E test ด้วย Playwright สำหรับ flow นี้: [อธิบายขั้นตอนที่ผู้ใช้ทำ] แล้วรัน test ให้ผ่าน'
2. กดส่งคำสั่งให้ Claude (หรือใช้ปุ่ม 'รัน' หากมีในเครื่องมือที่คุณใช้)
3. ดูผลลัพธ์ที่ Claude แสดงให้เห็นว่า 'ผ่าน' หรือ 'ไม่ผ่าน'

เคล็ดลับมือใหม่: เริ่มจาก Flow สำคัญที่สุด!

ในโลกจริง ๆ แล้ว เว็บไซต์หรือแอปพลิเคชันของเรามี 'Flow' หรือขั้นตอนการใช้งานมากมายเต็มไปหมด เช่น การสมัครสมาชิก, การแก้ไขโปรไฟล์, การค้นหาสินค้า ฯลฯ การจะเขียน E2E Test ให้ครอบคลุมทุกอย่างในคราวเดียวอาจจะใช้เวลานานและน่าท้อแท้สำหรับมือใหม่ครับ

เคล็ดลับสำหรับผู้เริ่มต้นคือ ให้เริ่มจากการเขียน E2E Test สำหรับ 'Flow ที่สำคัญที่สุด' ก่อนครับ เช่น การเข้าสู่ระบบ (Login) หรือการสั่งซื้อสินค้า (Checkout) เพราะ Flow เหล่านี้เป็นหัวใจหลักของเว็บไซต์ ถ้า Flow เหล่านี้ทำงานผิดพลาด ก็จะส่งผลกระทบต่อผู้ใช้และธุรกิจโดยตรง การเริ่มจากจุดที่สำคัญที่สุดจะทำให้คุณเห็นประโยชน์ของการทำ E2E Test ได้อย่างรวดเร็วและคุ้มค่าที่สุดครับ