- ไปที่ Chrome Dev Tool โดยการ กด F12 หรือ คลิกขาวที่หน้าเว็บ ที่ต้องการทำ Automated Test จากนั้นเลือก Inspect หรือ ตรวจสอบ
![](https://i0.wp.com/devdog.blog/wp-content/uploads/2023/08/new-project.png?resize=2208%2C1654&ssl=1)
- จากนั้นมองหาเมนูที่เขียนว่า Recorder
- จากนั้นให้กด Create a new recorder
![](https://i0.wp.com/devdog.blog/wp-content/uploads/2023/08/image-10.png?resize=1858%2C1500&ssl=1)
- จากนั้นตั้งชื่อเพื่อให้งานต่อการนำมาใช้งานภายหลัง เช่น “ทดสอบส่งแบบฟร์อม จองโรงแรม”
- จากนั้นทำการกด บันทึก ปุ่มสีแดงๆ ได้เลย
![](https://i0.wp.com/devdog.blog/wp-content/uploads/2023/08/image-11.png?resize=1858%2C1500&ssl=1)
- ทำการทดสอบเว็บไชต์ของเราตามปกติ เช่น กรอกชื่อ เบอร์โทร คลิกปุ่ม และอื่นๆ จนจบขั้นตอน ดังวิดีโอตัวอย่างต่อไปนี้
- จากนั้นกดหยุดการบันทึก เป็นอันจบ
- จากนั้นลองเล่นการทดสอบซ้ำอีกครั้ง
- โดยครั้งนี้ ให้ลองเปลี่ยนข้อความที่ เราเคยพิมไปในขั้นตอนก่อนหน้าดูครับ
- ให้ไปที่ รายการที่เราบันทึกไว้ จาดนั้นทำการแก้ไข ชื่อ ผู้จองห้องพัก ดูครับดังภาพตัวอย่าง
- จากนั้นลองกด Replay ตรงมุมขาวมือด้านบนดูครับ
![](https://i0.wp.com/devdog.blog/wp-content/uploads/2023/08/image-12.png?resize=1898%2C1852&ssl=1)
สุดท้ายนี้ เพื่อนๆสามารถนำ เทคนิคนี้ ไปใช้กับการทดสอบ กับระบบของเพื่อนๆได้นะครับ
วิธีการส่งออกเป็นรูปแบบอื่นๆ เพื่อใช้ในการเขียนโค๊ต เช่น puppeteer สามารถทำได้ดังนี้
- ไปที่รายการที่เราบันทึกไว้
- กดที่ รูป ดาวโหลด เลือก puppeteer
- เพียงเท่านี้เราก็สามารถนี้ไปใช้ เขียนโค๊ตเพิ่มเติมต่อได้แล้วครับ
![](https://i0.wp.com/devdog.blog/wp-content/uploads/2023/08/image-13.png?resize=1910%2C1534&ssl=1)
เพิ่ิอนๆคนไหนอยากจะลองทดสอบ จากไฟล์ที่ผู้เขียนได้ทดลองทดให้ดูในบทความนี้ สามารถดาวโหลดไฟล์แล้วนำไป import เข้า Chrome ของเพื่อนๆดูได้นะครับ จากนั้นไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ “แบบฟร์อมสำหรับทดสอบ Automated Test“