ออกแบบ Automated Flow ง่ายๆ ด้วย Chrome ลองเล่น ก่อนเขียนจริง
สวัสดีครับ
วันนี้ผมอยากชวนเพื่อนๆ มาดูวิธีทำ Automated ด้วย Chrome แบบไม่ต้องเขียนโค้ดกันนะครับ แถมยังนำไปต่อยอดใน Puppeteer ได้ด้วยนะ
มาลองออกแบบ Flow การทำงานอัตโนมัติกัน!
เรามาดูกันว่า เราจะใช้ Chrome DevTools มาช่วยออกแบบขั้นตอนการทำงานอัตโนมัติของเราได้ยังไงบ้างครับ ก่อนจะลงมือเขียนโค้ดจริงจังเลย
ขั้นตอนการบันทึก (Record) การทำงานของเรา
- ไปที่ Chrome DevTool โดยการกด F12 หรือ คลิกขวาที่หน้าเว็บที่เราต้องการทำ Automated Test ครับ แล้วก็เลือก Inspect หรือ ตรวจสอบ ได้เลยจากนั้นมองหาเมนูที่เขียนว่า Recorder นะครับ
- พอเจอแล้ว ให้กด Create a new recorder เลยครับแล้วก็ตั้งชื่อให้เข้าใจง่ายๆ หน่อย เพื่อจะได้นำมาใช้งานภายหลังสะดวกๆ เช่น “ทดสอบส่งแบบฟอร์ม จองโรงแรม” แบบนี้นะครับ
- พอตั้งชื่อเสร็จ ให้กดปุ่ม บันทึก สีแดงๆ ได้เลยจากนั้นก็เริ่มทดสอบเว็บไซต์ของเราตามปกติเลยครับ เช่น กรอกชื่อ เบอร์โทร คลิกปุ่มอะไรต่างๆ จนจบขั้นตอนที่เราอยากให้มันทำงานอัตโนมัตินะครับ(ตัวอย่าง: ลิงก์วิดีโอตัวอย่าง - อันนี้ไม่มีให้เลยใส่ placeholder ไปก่อนนะครับ)พอทำเสร็จแล้วก็กดหยุดการบันทึก เป็นอันจบขั้นตอนแรกแล้วครับ
ลองเล่นซ้ำ และปรับ Flow การทำงาน
ทีนี้ลองมาเล่นการทดสอบที่เราบันทึกไว้ซ้ำอีกครั้งดูครับ แต่ครั้งนี้เราจะลองเปลี่ยนข้อมูลที่เราเคยพิมพ์ไปในขั้นตอนก่อนหน้าดูนะ
- ให้ไปที่รายการที่เราบันทึกไว้ก่อนหน้านี้เลยครับ
- จากนั้นลองแก้ไขชื่อผู้จองห้องพัก หรือข้อมูลอื่นๆ ที่เรากรอกไปดูครับ(ตัวอย่าง: ลิงก์ภาพตัวอย่าง - อันนี้ก็ใส่ placeholder ไปก่อนนะครับ)
- พอแก้ไขเสร็จแล้วก็ลองกด Replay ตรงมุมขวาบนดูครับเราก็จะเห็นว่า Automated ของเราทำงานซ้ำได้ แล้วก็เปลี่ยนตามที่เราแก้ข้อมูลไปแล้วด้วยนะครับ เจ๋งเลยใช่ไหมครับ!
ส่งออกเป็นโค้ด Puppeteer เพื่อต่อยอด
สุดท้ายนี้ เพื่อนๆ สามารถนำเทคนิคนี้ไปใช้ออกแบบ Automated Flow สำหรับระบบของเพื่อนๆ ได้เลยนะครับ
ถ้าอยากส่งออกเป็นโค้ดเพื่อนำไปเขียนต่อยอดใน Puppeteer ก็ทำได้ง่ายๆ เลยครับ
- ไปที่รายการที่เราบันทึกไว้
- กดที่รูป 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/ (ลิงก์นี้เป็นตัวอย่างเท่านั้น เพื่อนๆสามารถใช้เว็บที่ต้องการทดสอบได้เลยนะครับ)
