Chrome DevTools Recorder: ตัวช่วยสร้าง Automated Flow ง่ายๆ ก่อนเขียนโค้ด

สวัสดีครับ

วันนี้ผมจะมาบอก เทคนิค การทำ Automated ด้วย Chrome แบบไม่ต้องเขียนโค๊ตนะครับ แบบง่ายๆ เลยครับ แล้ว เรายัง สามารถนำไปใช้ต่อ ใน puppeteer ได้ด้วยนะ มาเริ่มกันเลยครับ

ไปที่ Chrome Dev Tool โดยการ กด F12 หรือ คลิกขาวที่หน้าเว็บ ที่เราต้องการทำ Automated Test ครับ

จากนั้น เลือก Inspect หรือ ตรวจสอบ นะครับ

แล้ว มองหาเมนูที่เขียนว่า Recorder ครับ

จากนั้น ให้กด Create a new recorder

แล้วก็ ตั้งชื่อ ให้งานต่อ การนำมาใช้งานภายหลัง เช่น "ทดสอบส่งแบบฟร์อม จองโรงแรม" แบบนี้นะครับ

จากนั้น ให้เรากด บันทึก ปุ่มสีแดงๆ ได้เลย

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

ตัวอย่าง การเริ่มบันทึก

ดัง วิดีโอ ตัวอย่างต่อไปนี้ เลยนะครับ

จากนั้น กดหยุดการบันทึก เป็นอันจบครับ

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

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

แก้ไขข้อมูลใน Step ที่บันทึกไว้

ดังภาพ ตัวอย่าง เลยนะครับ

จากนั้นลองกด Replay ตรงมุมขาวมือ ด้านบนดูครับ คุณจะเห็นว่า การทดสอบ ถูกรัน ซ้ำ โดยใช้ข้อมูลใหม่ ที่เราแก้ไปเมื่อกี้เลย

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

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

1. ไปที่ รายการที่เรา บันทึกไว้
2. กดที่ รูป ดาวโหลด (Export)
3. เลือก puppeteer ครับ

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

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

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

จากนั้น ไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ

แบบฟร์อมสำหรับทดสอบ Automated Test

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

สวัสดีครับ