บันทึก Workflow ใน Chrome DevTools ก้าวแรกสู่ Browser Automation

สวัสดีครับ

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

ขั้นตอนง่ายๆ แบบนี้ครับ:

1. เปิด Chrome Dev Tool: กด F12 หรือ คลิกขาวที่หน้าเว็บที่เราต้องการทำ Automated Test จากนั้นเลือก Inspect หรือ ตรวจสอบ นะครับ
2. มองหา Recorder: พอเปิด Dev Tool ขึ้นมาแล้ว ให้มองหาเมนูที่เขียนว่า Recorder เลยครับ
3. สร้าง Recorder ใหม่: กด Create a new recorder จากนั้นตั้งชื่อเพื่อให้งานต่อการนำมาใช้งานภายหลัง เช่น “ทดสอบส่งแบบฟร์อม จองโรงแรม” แบบนี้นะครับ
4. เริ่มบันทึก: จากนั้นทำการกด บันทึก ปุ่มสีแดงๆ ได้เลย พอปุ่มแดงขึ้น ก็เริ่มทำการทดสอบเว็บไซต์ของเราตามปกติเลยครับ เช่น กรอกชื่อ เบอร์โทร คลิกปุ่ม และอื่นๆ จนจบขั้นตอน ดังวิดีโอตัวอย่างต่อไปนี้นะครับ
5. หยุดบันทึก: พอทำครบขั้นตอนแล้ว ก็กดหยุดการบันทึก เป็นอันจบครับ

ลองเล่นซ้ำดูสิ!

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

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

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

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

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

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

อ้างอิง: - Chrome DevTools Recorder (https://developer.chrome.com/docs/devtools/recorder/) - Puppeteer (https://pptr.dev/)