พลิกโฉมการทดสอบ: จาก User Flow สู่ Test Code ที่ปรับแต่งได้

สวัสดีครับ

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

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

ขั้นตอนการทำ Automated Test แบบไม่ต้องเขียนโค๊ต

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

ลองเล่นการทดสอบซ้ำ พร้อมแก้ไขข้อมูล

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

1. ไปที่รายการที่บันทึกไว้: ไปที่ รายการที่เราบันทึกไว้
2. แก้ไขข้อมูล: จาดนั้นทำการแก้ไข ชื่อ ผู้จองห้องพัก ดูครับ ดังภาพตัวอย่าง
3. ลอง Replay: จากนั้นลองกด Replay ตรงมุมขาวมือด้านบนดูนะครับ

ส่งออกไปใช้ต่อในโค๊ด (Puppeteer)

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

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

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

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

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