โปรแกรมเมอร์สายสปีด: สร้าง Test Flow แค่คลิก ไม่ต้องโค้ด

สวัสดีครับ

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

ทำ Automated ด้วย Chrome นี่ง่ายมากๆ สามารถนำไปใช้ต่อใน Puppeteer ได้ด้วยนะ ไปที่ Chrome Dev Tool เลยครับ กด F12 หรือ คลิกขวาที่หน้าเว็บ ที่เราอยากจะทำ Automated Test นั่นแหละครับ

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

แล้วก็มองหาเมนูที่เขียนว่า Recorder จากนั้นให้กด Create a new recorder ได้เลยครับ

ตั้งชื่อให้มันหน่อยนะครับ จะได้หาง่ายๆ ตอนเอาไปใช้งาน เช่น “ทดสอบส่งแบบฟอร์ม จองโรงแรม” แบบนี้นะครับ

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

(ลองนึกภาพวิดีโอตัวอย่างตามนะครับ)

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

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

(ลองดูภาพตัวอย่างตามนะครับ)

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

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

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

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

บทความนี้ผมเขียนเองนะครับ

อ้างอิง: https://developer.chrome.com/docs/devtools/recorder/ (ตัวอย่างเพิ่มเติมจาก Chrome DevTools Recorder Official Docs)

และก็ผมได้ลองทำไฟล์มาให้โหลดด้วยนะครับ: https://drive.google.com/your-test-file.json (อันนี้สมมตินะครับ)

หวังว่าจะเป็นประโยชน์นะครับ!