หนึ่งความสามารถที่น่าสนใจใน Google Chrome ที่หลาย ๆ คนไม่รู้
นั่นก็คือ Recorder ที่อยู่ใน DevTools
ซึ่งช่วยให้เราสามารถ record และ playback
จากการเล่นหรือใช้งาน web app ผ่าน Google Chrome ไว้นั่นเอง
ซึ่งเหมาะมาก ๆ สำหรับ use case ทั่วไปดังนี้
- บันทึกการทำงานตาม flow ที่กำหนด สำหรับการนำเสนอ
- ทดสอบระบบแบบอัตโนมัติอย่างง่าย
- ทำการ debug user flow ต่าง ๆ
- ใช้สำหรับการ inspect element ต่าง ๆ
- สามารถทำการแก้ไขได้เองหลังจากที่บันทึกเสร็จแล้ว
- ทำการ export ไปยัง script ของ framework ต่าง ๆ ได้ เช่น puppeteer, cypress และ playwright เป็นต้น
การใช้งานมาก ๆ เพียงเข้าไปที่ DevTools หรือ click ขวา แล้วเลือก Inspect
ไปที่ More options -> More tools -> Recorder
จะได้ menu Recorder เพิ่มเข้ามา ให้เราเริ่มต้น record การเล่น web ได้เลย
เริ่มต้นการ record ได้เลย
ในระหว่างการ record สามารถเพิ่ม assertion
หรือการตรวจสอบผลการทำงาน
หรือการตรวจสอบการแสดงผลต่าง ๆ หน้าจอว่าทำงานตามที่เราคาดหวังหรือไม่
และอีกอย่างสามารถเลือกได้ว่า
ในการ record นั้นจะให้เลือกใช้ locator strategy แบบไหนบ้าง ?
ทั้ง CSS/ARIA/TEXT/XPATH เป็นต้น
หรือจะทำการแก้ไขหรือ export ออกมาเพื่อแก้ไข หรือ ใช้งานต่อ
ในรูปแบบของ JSON และ Puppeteer ได้อีกด้วย
รวมทั้งยังมี extension ใน Google Chrome ที่ติดตั้งเพิ่มเติมได้
ทั้ง Cypress และ Playwright
และในการ replay นั้น สามารถดูได้ทั้งเรื่องของ performance
สามารถ screenshot หน้าจอได้อีก
หรือจะกำหนดความเร็วของการ replay ได้อีกด้วย
ลองใช้งานกันดูครับ
เป็นอีกหนึ่งเครื่องมือที่มีประโยชน์
แต่คนยังรู้จักน้อย !!
