สร้างต้นแบบ Automated Test ใน Chrome DevTools ไม่ต้องเขียนโค้ด

สวัสดีครับ

โปรแกรมเมอร์แบบเราเนี่ย บางทีก็อยากจะทำ Automated Test แบบเร็วๆ ใช่ไหมครับ ไม่ต้องมานั่งเขียนโค้ดเยอะๆ ให้เสียเวลา

วันนี้ผมจะมาบอกเทคนิคเจ๋งๆ ที่จะช่วยให้เพื่อนๆ สร้าง Test Flow ได้เลยจาก Chrome DevTools ครับ มันเป็นการ optimization ขั้นแรกเลยนะครับ ที่จะทำให้เราเริ่มทำ Automated Test ได้เร็วขึ้นมากๆ แถมยังเอาไปต่อยอดกับ Puppeteer ได้ง่ายๆ ด้วย

เริ่มต้นทำ Automated Test ด้วย Chrome DevTools Recorder

มาดูกันเลยครับว่าทำยังไง ไม่ยากเลย:

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

ลองเล่นซ้ำ และแก้ไข Test Flow

หลังจากบันทึกเสร็จแล้ว เรามาลองเล่นซ้ำดูนะครับ แล้วก็ลองแก้ไขข้อมูลใน Test Flow กัน:

1. เล่นซ้ำครั้งแรก: ลองกด Replay ตรงมุมขวาบนดูครับ ว่า Test Flow ที่เราบันทึกไว้ทำงานได้ถูกต้องไหม
2. แก้ไขข้อมูล: ทีนี้ให้ไปที่รายการที่เราบันทึกไว้ครับ จากนั้นทำการแก้ไข ชื่อผู้จองห้องพักดูครับ (ดังภาพตัวอย่างที่เพื่อนๆ อาจจะมีในใจนะครับ)
3. เล่นซ้ำด้วยข้อมูลใหม่: พอแก้เสร็จแล้ว ก็ลองกด Replay อีกครั้งครับ คราวนี้จะเห็นว่า Test Flow ของเราจะใช้ข้อมูลที่เราแก้ไขไปแล้วครับ เจ๋งเลยใช่ไหมครับ

นำไปต่อยอดเป็นโค้ดด้วย Puppeteer

เทคนิคนี้ไม่ได้จบแค่นี้นะครับ เราสามารถเอา Test Flow ที่เราสร้างแบบไม่ต้องเขียนโค้ดเลยเนี่ย ไปต่อยอดเป็นโค้ดจริงๆ ได้ด้วย Puppeteer:

1. ส่งออกเป็น Puppeteer: ให้ไปที่รายการที่เราบันทึกไว้ครับ จากนั้นให้กดที่ รูปดาวน์โหลด แล้วก็เลือก Puppeteer ได้เลยครับ
2. ได้โค้ดไปใช้งาน: เพียงเท่านี้ เราก็จะได้โค้ด Puppeteer ที่พร้อมเอาไปใช้เขียนโค้ดเพิ่มเติมต่อได้แล้วครับ พอเราได้โค้ด Puppeteer ไปต่อยอดเนี่ย เราก็สามารถเพิ่มเรื่อง resilience ของ Test เราได้อีกนะครับ ทำให้มันทนทานต่อการเปลี่ยนแปลงมากขึ้น และจัดการกับ Error ต่างๆ ได้ดีขึ้นด้วย

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

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