ออกแบบ Automated Flow ง่ายๆ ด้วย Chrome ลองเล่น ก่อนเขียนจริง

สวัสดีครับ

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

มาลองออกแบบ Flow การทำงานอัตโนมัติกัน!

เรามาดูกันว่า เราจะใช้ Chrome DevTools มาช่วยออกแบบขั้นตอนการทำงานอัตโนมัติของเราได้ยังไงบ้างครับ ก่อนจะลงมือเขียนโค้ดจริงจังเลย

ขั้นตอนการบันทึก (Record) การทำงานของเรา

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

ลองเล่นซ้ำ และปรับ Flow การทำงาน

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

1. ให้ไปที่รายการที่เราบันทึกไว้ก่อนหน้านี้เลยครับ
2. จากนั้นลองแก้ไขชื่อผู้จองห้องพัก หรือข้อมูลอื่นๆ ที่เรากรอกไปดูครับ(ตัวอย่าง: ลิงก์ภาพตัวอย่าง - อันนี้ก็ใส่ placeholder ไปก่อนนะครับ)
3. พอแก้ไขเสร็จแล้วก็ลองกด Replay ตรงมุมขวาบนดูครับเราก็จะเห็นว่า Automated ของเราทำงานซ้ำได้ แล้วก็เปลี่ยนตามที่เราแก้ข้อมูลไปแล้วด้วยนะครับ เจ๋งเลยใช่ไหมครับ!

ส่งออกเป็นโค้ด Puppeteer เพื่อต่อยอด

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

ถ้าอยากส่งออกเป็นโค้ดเพื่อนำไปเขียนต่อยอดใน Puppeteer ก็ทำได้ง่ายๆ เลยครับ

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

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

หวังว่าเทคนิคนี้จะเป็นประโยชน์กับเพื่อนๆ โปรแกรมเมอร์ทุกคนนะครับ!

อ้างอิง: - Chrome DevTools Recorder Documentation: https://developer.chrome.com/docs/devtools/recorder/ - Puppeteer Documentation: https://pptr.dev/ - แบบฟอร์มสำหรับทดสอบ Automated Test: https://form-test-url.example.com/ (ลิงก์นี้เป็นตัวอย่างเท่านั้น เพื่อนๆสามารถใช้เว็บที่ต้องการทดสอบได้เลยนะครับ)