บันทึก Flow หน้าเว็บ: Prototype Automation ไม่ต้องโค้ด

สวัสดีครับ

วันนี้ผมจะมาแชร์เทคนิคดีๆ ที่ช่วยให้เราทำ Automated ได้ด้วย Chrome แบบไม่ต้องเขียนโค๊ตเลยนะครับ แถมยังนำไปใช้ต่อใน Puppeteer ได้ด้วยนะ นี่มันช่วยให้ชีวิตโปรแกรมเมอร์อย่างเราง่ายขึ้นเยอะเลยครับ

มาเริ่มกันเลยครับ

ขั้นตอนแรก: เปิด Chrome Dev Tool ของเราเลยนะ ง่ายๆ เลยครับ ไปที่หน้าเว็บที่เราต้องการทำ Automated จากนั้นกด F12 หรือ คลิกขวาที่หน้าเว็บ แล้วเลือก Inspect (ตรวจสอบ) ครับ

จากนั้น มองหาเมนูที่เขียนว่า Recorder ครับ ถ้าหาไม่เจอ ลองกดที่จุดสามจุดตรง DevTools แล้วเลือก More tools > Recorder ก็ได้นะครับ แล้วก็กด Create a new recorder เลยครับ

ตั้งชื่อให้ง่ายต่อการนำมาใช้งานนะ แล้วก็ตั้งชื่อ Recorder ของเราให้เข้าใจง่ายๆ ครับ แบบ "บันทึก Flow จองสินค้า" หรือ "ทดสอบ Login ระบบ" ก็ได้ครับ แบบนี้เวลาเราเอามาใช้ทีหลังจะหาง่ายนะครับ

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

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

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

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

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

อยากลองทดสอบตามบทความนี้ไหมครับ? เพื่อนๆ คนไหนอยากจะลองทดสอบ ตามที่ผมได้แนะนำไป สามารถดาวน์โหลดไฟล์ Recorder ที่ผมได้ทดลองทำไว้ให้ดูในบทความนี้ได้เลยนะครับ แล้วนำไป Import เข้า Chrome ของเพื่อนๆ ดูได้เลยครับ จากนั้นไปที่หน้านี้เลยครับ เพื่อลองทดสอบดูกัน “แบบฟร์อมสำหรับทดสอบ Automated Test” (อ้างอิง: https://www.example.com/test-form)

หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ โปรแกรมเมอร์ทุกคนนะครับ ลองเอาไปปรับใช้กับงานของตัวเองดูนะ!

ขอบคุณครับ