ทำ Automated Test ด้วย Chrome Dev Tools Recorder ไม่ต้องเขียนโค๊ด!

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

ขั้นตอนทำ Automated Test ง่ายๆ ด้วย Chrome Dev Tool:

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

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

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

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

ส่งออกไปใช้เขียนโค๊ด (สำหรับโปรแกรมเมอร์ก็ทำได้นะ):

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

1. เลือกรายการ: ไปที่รายการที่เราบันทึกไว้

กดดาวน์โหลด: กดที่ รูป ดาวโหลด ครับ แล้วก็เลือก puppeteer เลยครับ

// ตัวอย่างโค้ด Puppeteer ที่ได้จาก Chrome DevTools Recorder

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com/your-booking-form'); // URL ที่เราทดสอบ
  await page.waitForSelector('#name_input'); // สมมติว่าเป็น ID ของช่องชื่อ
  await page.type('#name_input', 'สมหญิง สวยจริง'); // ใส่ชื่อใหม่ที่แก้ไข
  await page.type('#phone_input', '0812345678'); // ใส่เบอร์โทร
  await page.click('#submit_button'); // คลิกปุ่มส่ง

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

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

เพื่อนๆ ลองทดสอบดูได้เลยนะครับ:

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

เรื่อง Security และ Compliance เล็กๆ น้อยๆ:

การทำ Automated Test แบบนี้นะครับ ช่วยให้เรามั่นใจได้ว่าระบบของเรายังทำงานได้ถูกต้้องเสมอ ถ้าเราต้องจัดการข้อมูลส่วนตัวลูกค้า หรือมีเรื่อง PDPA เข้ามาเกี่ยวข้อง การที่มี Automated Test ที่ครอบคลุมแบบนี้ ก็ช่วยให้เรามีหลักฐานได้ระดับนึงนะครับ ว่าระบบเรายังทำงานตามกฏเกณฑ์ที่กำหนด และลดโอกาสเกิดข้อผิดพลาดที่อาจส่งผลต่อการปฏิบัติตามกฏหมายได้ครับผม. การเก็บ Security Log หรือ Log การทดสอบว่า Test ผ่านหรือไม่ผ่าน ก็เป็นอีกเรื่องที่สำคัญนะครับ เพื่อให้เราย้อนกลับไปตรวจสอบได้ว่าตอนไหนเกิดอะไรขึ้นบ้าง ถ้ามีปัญหาอะไรขึ้นมา มันช่วยเราได้เยอะเลยนะ.

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