เจาะลึก Chrome DevTools Recorder สร้าง Test Script ยืดหยุ่น ต่อยอด Puppeteer

สวัสดีครับ เพื่อนๆ โปรแกรมเมอร์ทุกคน

วันนี้ผมจะมาคุยเรื่อง Automated Test แบบไม่ต้องเขียนโค้ดกันนะครับ หลายคนคงเคยเจอว่าต้องทดสอบอะไรซ้ำๆ เดิมๆ บนหน้าเว็บใช่ไหมครับ เสียเวลามากๆ เลยนะ บางทีก็เบื่อด้วย วันนี้ผมมีทริคดีๆ มาบอกครับ ที่ Chrome DevTools ของเรานี่แหละ มีของดีซ่อนอยู่!

# ทำ Automated Test ด้วย Chrome DevTools Recorder แบบไม่ต้องเขียนโค้ดเลย!

การทำ Automated Test ด้วย Chrome DevTools Recorder นี่ง่ายมากๆ ครับ ไม่ว่าเพื่อนๆ จะเขียนโค้ดไม่เป็น หรืออยากทำ Test แบบเร็วๆ ก็ทำได้เลยนะ มาลองดูขั้นตอนกันครับ

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

# ลองเล่นการทดสอบซ้ำอีกครั้ง (Replay) แล้วมาแก้ไขข้อมูลกัน!

หลังจากที่เราบันทึกไปแล้ว ทีนี้เรามาลองเล่นซ้ำดูครับ

1. เล่นซ้ำแบบเดิม:
   • เพื่อนๆ ลองกดปุ่ม Replay ที่อยู่มุมขวาบนดูครับ จะเห็นว่ามันจะรันขั้นตอนที่เราบันทึกไว้ซ้ำอีกครั้งเลย ง่ายไหมครับ?
2. แก้ไขข้อมูลในขั้นตอนที่บันทึกไว้:
   • ทีนี้เรามาลองเปลี่ยนข้อมูลดูบ้างครับ ให้ไปที่รายการที่เราบันทึกไว้ใน Recorder นั่นแหละครับ
   • ลองหาขั้นตอนที่เรากรอก “ชื่อผู้จองห้องพัก” หรือข้อมูลอื่นๆ ก็ได้ครับ
   • จากนั้นคลิกที่ข้อมูลนั้นแล้ว แก้ไขค่า ที่เคยพิมพ์ไปให้เป็นอย่างอื่นดูนะครับ
3. เล่นซ้ำด้วยข้อมูลใหม่:
   • พอแก้ไขเสร็จแล้ว ลองกดปุ่ม Replay อีกครั้งดูครับ
   • จะเห็นว่าคราวนี้ระบบจะกรอกข้อมูลใหม่ที่เราเพิ่งแก้ไขไปเลย! เจ๋งไหมครับ? ทำให้เราทดสอบได้หลากหลายสถานการณ์ โดยไม่ต้องบันทึกใหม่เลยนะ

# ต่อ ยอดไป Puppeteer สำหรับโปรแกรมเมอร์!

สำหรับเพื่อนๆ ที่เป็นโปรแกรมเมอร์นะครับ พอเราได้ Test Script ที่บันทึกไว้แบบนี้แล้ว เราสามารถนำไปต่อยอดได้อีกนะ!

1. ส่งออกเป็น Puppeteer Code:
   • ให้ไปที่รายการที่เราบันทึกไว้ใน Recorder ครับ
   • จากนั้นมองหารูป ดาวน์โหลด (Export) กดเลยครับ
   • แล้วเลือก Puppeteer เพียงเท่านี้ เราก็จะได้โค้ด Puppeteer ที่เป็น JavaScript มาแล้วครับ เอาไปใช้ในโปรเจกต์ของเราได้เลย!
2. ทำไมต้องใช้ Puppeteer?
   • การส่งออกไป Puppeteer นี่ดีตรงที่เราสามารถเขียนโค้ดเพิ่มได้ครับ เช่น การทำ assertion ที่ซับซ้อนขึ้น, การวนลูปเพื่อทดสอบข้อมูลหลายๆ ชุด, หรือการรวม Test เข้ากับ CI/CD pipeline ได้เลย ทำให้ Test ของเรายืดหยุ่นและมีประสิทธิภาพมากขึ้นครับ

# มาลองทดสอบด้วยตัวเองกัน!

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

แล้วไปที่หน้านี้เพื่อลองทดสอบดูกันได้เลยครับ: แบบฟอร์มสำหรับทดสอบ Automated Test

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

ขอบคุณครับ

ผู้เขียน: cii3.net ",