ร่างแรก Browser Automation ใน Chrome DevTools: จากคลิก สู่โค๊ต Puppeteer

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

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

ร่างแรก Browser Automation ใน Chrome DevTools: จากคลิก สู่โค๊ต Puppeteer

มาดูกันเลยครับว่าเราจะร่าง Script Automation ตัวแรกของเราได้ยังไง ผมจะใช้ Chrome DevTools Recorder นะครับ นี่เลยขั้นตอนง่ายๆ

1. เปิด Chrome DevTools กด F12 หรือ คลิกขวาที่หน้าเว็บที่เราต้องการทำ Automated Test นะครับ จากนั้นเลือก Inspect หรือ ตรวจสอบ ได้เลยครับ
2. มองหาเมนู Recorder จากนั้น มองหาเมนูที่เขียนว่า Recorder นะครับ ถ้าหาไม่เจอจริงๆ ลองใช้ค้นหาใน DevTools ดูได้นะ
3. หยุดการบันทึก พอทำทุกอย่างเสร็จแล้ว ก็กดหยุดการบันทึกได้เลย เป็นอันจบขั้นตอนการบันทึกครับ

ส่งออกเป็น Puppeteer Code สุดท้ายนี้ เพื่อนๆสามารถนำเทคนิคนี้ ไปใช้กับการทดสอบ กับระบบของเพื่อนๆได้นะครับ วิธีการส่งออกเป็นรูปแบบอื่นๆ เพื่อใช้ในการเขียนโค๊ต เช่น puppeteer สามารถทำได้ดังนี้ ไปที่รายการที่เราบันทึกไว้ กดที่รูป ดาวโหลด (Export) เลือก puppeteer เพียงเท่านี้เราก็สามารถนำไปใช้เขียนโค๊ตเพิ่มเติมต่อได้แล้วครับ

![ส่งออกเป็น Puppeteer](https://placehold.co/600x400/png?text=Export+to+Puppeteer)

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

![แก้ไขขั้นตอนและ Replay](https://placehold.co/600x400/png?text=Edit+and+Replay)

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

![เริ่มบันทึกการกระทำบนเว็บ](https://placehold.co/600x400/png?text=Start+Recording)

สร้าง Recorder ใหม่ กด Create a new recorder จากนั้นตั้งชื่อเพื่อให้ง่ายต่อการนำมาใช้งานภายหลัง เช่น “ทดสอบส่งแบบฟร์อม จองโรงแรม” แบบนี้เลยครับ

![ตัวอย่างการสร้าง Recorder ใหม่](https://placehold.co/600x400/png?text=Create+New+Recorder)

อยากลองทดสอบใช่ไหมละ?

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

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