สร้าง Automated Test ที่ปรับแก้ได้ไว ไม่ต้องเขียนโค้ด แถมยกระดับด้วย Puppeteer

สวัสดีครับเพื่อนๆ โปรแกรมเมอร์ทุกคน วันนี้ผมมีเทคนิคดีๆ มาฝาก เพื่อช่วยให้การสร้าง Automated Test ของเรา ง่ายขึ้นเยอะเลยครับ แถมยังช่วยให้ Test ของเรามีความ Optimization และ Resilience สูงขึ้นอีกด้วยนะครับ

เรามาเริ่มกันที่ Chrome DevTools Recorder กันครับ นี่แหละตัวช่วยชั้นเยี่ยมเลย ไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียวเลยนะครับ

ขั้นตอนง่ายๆ เริ่ม Automated Test ของคุณเลย!

1. เปิด Chrome DevTools: ไปที่หน้าเว็บที่เราอยากจะ Test นะครับ จากนั้นกด F12 หรือจะคลิกขวาที่หน้าเว็บแล้วเลือก Inspect หรือ ตรวจสอบ ก็ได้ครับ
2. หาเมนู Recorder: พอ DevTools เปิดขึ้นมาแล้ว ให้เพื่อนๆ ลองมองหาเมนูที่ชื่อว่า Recorder ดูนะครับ ปกติจะอยู่ตรงแถบเมนูด้านบน หรืออาจจะต้องกดลูกศรเล็กๆ เพื่อหาเพิ่มก็ได้ครับ
3. สร้าง Recorder ใหม่: เจอแล้วก็คลิกเลยครับ แล้วก็กด Create a new recorder เพื่อเริ่มสร้าง Test Flow ใหม่ของเรานะครับ จากนั้นตั้งชื่อให้มันสักหน่อยครับ เช่น “ทดสอบส่งแบบฟอร์ม จองโรงแรม” หรือ “เช็ค Flow การลงทะเบียนผู้ใช้เพื่อความ Resilience” ก็ได้นะครับ แบบนี้จะช่วยให้เราจำได้ง่ายๆ เลยครับ
4. เริ่มบันทึกการกระทำ: พอตั้งชื่อเสร็จแล้ว ก็กดปุ่ม บันทึก (สีแดงๆ) ได้เลยครับ จากนั้นทำการ Test เว็บไซต์ของเราตามปกติเลยนะครับ เหมือนที่เราใช้งานจริงๆ นั่นแหละครับ เช่น กรอกชื่อ, กรอกเบอร์โทรศัพท์, คลิกปุ่มต่างๆ, หรือดำเนินการอื่นๆ จนจบขั้นตอนที่เราอยากจะ Test นะครับ
5. หยุดบันทึก: เมื่อทำจนจบขั้นตอนแล้ว ก็กดปุ่ม หยุดการบันทึก ได้เลยครับ เป็นอันจบขั้นตอนการบันทึกง่ายๆ ของเราแล้วนะครับ

เพิ่ม Optimization: ปรับแก้ข้อมูลเพื่อ Test ที่ยืดหยุ่น!

นี่แหละครับคือจุดเด่นอีกอย่างที่ช่วยให้ Test ของเรามี Optimization สูงขึ้น เราสามารถปรับแก้ข้อมูลที่เคยกรอกไปได้เลย ไม่ต้องมานั่งบันทึกใหม่ทั้งหมดนะครับ

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

ยกระดับด้วย Puppeteer: สู่ Automated Test ระดับโปร!

สุดท้ายนี้นะครับ เพื่อนๆ สามารถนำเทคนิคนี้ไปต่อยอด เพื่อสร้าง Automated Test ที่แกร่งขึ้นได้ด้วยนะครับ

• ส่งออกเป็นโค้ด Puppeteer: ไปที่รายการที่เราบันทึกไว้ครับ แล้วมองหารูป ดาวโหลด นะครับ คลิกเลย จากนั้นเลือก Puppeteer ครับ แค่นี้เราก็ได้โค้ด Puppeteer ที่พร้อมนำไปใช้ต่อยอด เขียนโค้ดเพิ่มเติมในโปรเจกต์ของเราแล้วครับ อาจจะเอาไปรวมกับ Python CLI ของเราเพื่อสร้างชุด Test ที่ซับซ้อนขึ้นก็ได้นะครับ

อยากลองเลยใช่ไหมครับ? เพื่อนๆ คนไหนอยากจะลองทดสอบจากไฟล์ที่ผมได้ลองทำไว้ให้ดูในบทความนี้ ก็สามารถ ดาวน์โหลดไฟล์ แล้วนำไป Import เข้า Chrome ของเพื่อนๆ ดูได้เลยนะครับ (สมมติว่ามีไฟล์ให้ดาวน์โหลดนะครับ) จากนั้นลองไปที่หน้า แบบฟอร์มสำหรับทดสอบ Automated Test เพื่อลองทดสอบดูกันนะครับ

ลองเอาเทคนิคนี้ไปปรับใช้กับการทำงานของเพื่อนๆ ดูนะครับ รับรองว่าช่วยประหยัดเวลาและทำให้งาน Test ง่ายขึ้นเยอะเลยครับ!