บันทึกการกระทำบนเว็บ ทำซ้ำ แล้วปรับแก้ได้ทันที ไม่ต้องโค๊ด

สวัสดีครับเพื่อนๆ โปรแกรมเมอร์ทุกคนครับ

วันนี้ผมมีเทคนิคเจ๋งๆ มาฝาก นะครับ เป็นเรื่องการทำ Automated บนเว็บ แบบไม่ต้องไปเขียนโค้ด เลยนะ คือเราจะใช้ Chrome Dev Tools นี่แหละ ครับ แล้วก็เอาไปต่อยอดกับ Puppeteer ได้ด้วยนะ นี่มันสะดวกมากๆ เลยครับ

มาดูกันเลยครับ

ขั้นตอนการบันทึก

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

ลองเล่นซ้ำ แล้วแก้ไขข้อมูลได้ด้วย

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

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

เอาไปต่อยอด Puppeteer ได้เลย

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

ส่วนวิธีการส่งออกไปเป็นรูปแบบอื่นๆ เพื่อใช้ในการเขียนโค้ด อย่าง Puppeteer เนี่ย ก็ทำได้ง่ายๆ เลยครับ

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

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

// ตัวอย่างโค้ด Puppeteer ที่ได้มาจากการ Export
// (โค้ดจริงจะยาวกว่านี้เยอะนะครับ)
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://cii3.net/test-form-for-automation');

  await page.type('#nameInput', 'ชื่อใหม่ที่แก้ไข');
  await page.type('#phoneInput', '0812345678');
  await page.click('#submitButton');

  // เพิ่ม Assertion หรือ Logic อื่นๆ ที่นี่

  await browser.close();
})();

เพื่อนๆ คนไหนอยากจะลองทดสอบ จากไฟล์ที่ผู้เขียนได้ทดลองทดให้ดูในบทความนี้ ก็สามารถดาวโหลดไฟล์แล้วนำไป import เข้า Chrome ของเพื่อนๆ ดูได้นะครับ [Download Example Recorder File (สมมติ)]

จากนั้นไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ: แบบฟร์อมสำหรับทดสอบ Automated Test

เรื่องเล็กๆ น้อยๆ ที่อาจเป็นประโยชน์

การบันทึกขั้นตอนแบบนี้ มันก็เป็นประโยชน์กับการทำ compliance นะครับ คือเราสามารถบันทึกขั้นตอนการใช้งานที่สำคัญๆ ไว้ได้ เผื่อต้องมีการตรวจสอบ หรือเอาไว้เป็น logging ก็ได้นะครับ เวลาเราอยากจะจำลองการใช้งานของ user จริงๆ ขึ้นมาใหม่ หรือเอาไว้เป็นแนวทางในการทำ cybersecurity แบบง่ายๆ คือทดสอบ flow ที่สำคัญๆ ได้รวดเร็วเลยครับ ไม่ต้องเริ่มจากศูนย์

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