สร้าง Script อัตโนมัติง่ายๆ ใน Chrome DevTools: จากคลิก สู่โค้ด Puppeteer

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

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

ขั้นตอนการสร้าง Automated Script แบบง่ายๆ นะครับ

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

ลองเล่นซ้ำและแก้ไขสคริปต์

ทีนี้ลองเล่นการทดสอบซ้ำอีกครั้งดูครับ แต่ครั้งนี้ ให้ลองเปลี่ยนข้อความที่เราเคยพิมไปในขั้นตอนก่อนหน้าดูนะ

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

ส่งออกเป็นโค้ด Puppeteer

สุดท้ายนี้ เพื่อนๆ สามารถนำ เทคนิคนี้ ไปใช้กับการทดสอบ กับระบบของเพื่อนๆ ได้เลยนะครับ

วิธีการส่งออกเป็นรูปแบบอื่นๆ เพื่อเอาไปใช้เขียนโค๊ดเพิ่มเติมต่อ เช่น Puppeteer ก็ทำได้ง่ายๆ แบบนี้นะครับ

• ไปที่รายการที่เราบันทึกไว้
• กดที่ รูป ดาวโหลด
• เลือก puppeteer

เพียงเท่านี้เราก็สามารถนำไปใช้เขียนโค๊ดเพิ่มเติมต่อได้แล้วครับ

เอาไปใช้กับงาน Compliance และเก็บ Log

เรื่องนี้ถ้าเรานำไปใช้กับการทดสอบ Flow ที่สำคัญๆ ที่ต้องทำตามกฏระเบียบต่างๆ อย่าง PDPA หรือ Compliance นะครับ การบันทึกแบบนี้ก็ช่วยให้เรามีหลักฐานได้ว่า Flow การใช้งานมันถูกต้องตามที่เราออกแบบไว้นะครับ และยังสามารถนำไปต่อยอดเขียนโค้ดเพื่อเก็บ Log การทำงานได้อีกด้วยครับ เป็นประโยชน์มากๆ เลยนะ

ดาวโหลดไฟล์ตัวอย่างไปลองเล่นกันดู!

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

หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ โปรแกรมเมอร์ทุกคนนะครับ!