Chrome DevTools Recorder: ตัวช่วยสร้าง Automated Flow ง่ายๆ ก่อนเขียนโค้ด
สวัสดีครับ
วันนี้ผมจะมาบอก เทคนิค การทำ Automated ด้วย Chrome แบบไม่ต้องเขียนโค๊ตนะครับ แบบง่ายๆ เลยครับ แล้ว เรายัง สามารถนำไปใช้ต่อ ใน puppeteer ได้ด้วยนะ มาเริ่มกันเลยครับ
ไปที่ Chrome Dev Tool โดยการ กด F12 หรือ คลิกขาวที่หน้าเว็บ ที่เราต้องการทำ Automated Test ครับ
จากนั้น เลือก Inspect หรือ ตรวจสอบ นะครับ
แล้ว มองหาเมนูที่เขียนว่า Recorder ครับ
จากนั้น ให้กด Create a new recorder
แล้วก็ ตั้งชื่อ ให้งานต่อ การนำมาใช้งานภายหลัง เช่น "ทดสอบส่งแบบฟร์อม จองโรงแรม" แบบนี้นะครับ
จากนั้น ให้เรากด บันทึก ปุ่มสีแดงๆ ได้เลย
ทำการทดสอบ เว็บไชต์ ของเรา ตามปกติเลยครับ เช่น กรอกชื่อ เบอร์โทร คลิกปุ่ม และอื่นๆ ทำไปจนจบขั้นตอนเลยนะ
ตัวอย่าง การเริ่มบันทึก
ดัง วิดีโอ ตัวอย่างต่อไปนี้ เลยนะครับ
จากนั้น กดหยุดการบันทึก เป็นอันจบครับ
แล้วลองเล่นการทดสอบซ้ำอีกครั้ง โดยครั้งนี้ ให้ลองเปลี่ยนข้อความที่เราเคยพิมไป
ให้เราไปที่ รายการที่เราบันทึกไว้ นะครับ จาดนั้น ทำการแก้ไข ชื่อ ผู้จองห้องพักดูครับ
แก้ไขข้อมูลใน Step ที่บันทึกไว้
ดังภาพ ตัวอย่าง เลยนะครับ
จากนั้นลองกด Replay ตรงมุมขาวมือ ด้านบนดูครับ คุณจะเห็นว่า การทดสอบ ถูกรัน ซ้ำ โดยใช้ข้อมูลใหม่ ที่เราแก้ไปเมื่อกี้เลย
สุดท้ายนี้ เพื่อนๆ สามารถนำ เทคนิคนี้ ไปใช้กับการทดสอบ กับระบบของเพื่อนๆได้เลยนะครับ
วิธีการส่งออก เป็นรูปแบบอื่นๆ เพื่อใช้ในการเขียนโค๊ต เช่น puppeteer สามารถทำได้ ดังนี้
- ไปที่ รายการที่เรา บันทึกไว้
- กดที่ รูป ดาวโหลด (Export)
- เลือก puppeteer ครับ
ส่งออกเป็นโค้ด Puppeteer
เพียงเท่านี้ เราก็สามารถนี้ไปใช้ เขียนโค๊ตเพิ่มเติม ต่อได้แล้วครับ ง่ายมากเลยใช่ไหมครับ
เพื่อนๆคนไหนอยากจะลองทดสอบ จากไฟล์ที่ผมได้ทดลองทดให้ดู ในบทความนี้ สามารถดาวโหลดไฟล์แล้วนำไป import เข้า Chrome ของเพื่อนๆดูได้นะครับ
จากนั้น ไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ
แบบฟร์อมสำหรับทดสอบ Automated Test
หวังว่าบทความนี้ จะมีประโยชน์ กับเพื่อนๆ โปรแกรมเมอร์ทุกคนนะครับ
สวัสดีครับ