คลิก เทส แล้วต่อยอด Automated ด้วย Chrome DevTool

สวัสดีครับ ผมจะมาแนะนำการ ทำ Automated Test ง่ายๆ ด้วย Chrome Dev Tool กันนะครับ ไม่ต้องเขียนโค้ดเยอะ แถมต่อยอดไป Puppeteer ได้ด้วยนะ

เริ่มต้นกับ Chrome Dev Tool Recorder

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

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

บันทึกการทำงานของเว็บไซต์

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

พอเสร็จขั้นตอนทั้งหมดแล้ว ก็กดหยุดการบันทึก เป็นอันเสร็จแล้วครับ

ลองเล่นซ้ำแล้วแก้ไขข้อมูล

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

แล้วก็ลองกด Replay ตรงมุมขาวมือด้านบนดูครับ เห็นไหมครับ ว่ามันเปลี่ยนตามที่เราแก้เลยนะ

ส่งออกไป Puppeteer สำหรับโปรแกรมเมอร์

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

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

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

บทความนี้ละครับ.