ปลดล็อก Automated Test ใน Chrome DevTools: บันทึก, แก้ไข, รัน, ไม่ต้องเขียนโค้ดเลย!

สวัสดีครับ วันนี้ผม cii3.net จะมาแนะนำวิธีทำ Automated Test แบบง่ายๆ นะครับ เพื่อนๆ ที่กำลังมองหาวิธีทดสอบเว็บแบบไม่ต้องเขียนโค้ดเยอะๆ ต้องลองดูเลยครับ เราจะใช้ Chrome DevTools Recorder นี่แหละครับ สะดวกมากๆ เลย

เริ่มต้นทำ Automated Test ด้วย Chrome DevTools Recorder

ขั้นตอนก็ไม่ยากเลยครับ ตามผมมาดูได้เลย:

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

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

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

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

ส่งออกเป็นโค้ด Puppeteer เพื่อการใช้งานขั้นสูง

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

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

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

// ตัวอย่างโค้ด Puppeteer ที่ได้จากการ Export
const puppeteer = require('puppeteer');

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

  await page.goto('https://example.com/booking-form'); // URL ที่เราทดสอบ

  // ตัวอย่างขั้นตอนที่ถูกบันทึกและแปลงเป็นโค้ด
  await page.type('#nameInput', 'ชื่อผู้จองใหม่');
  await page.type('#phoneInput', '0812345678');
  await page.click('#submitButton');

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

ลองทดสอบด้วยตัวเอง!

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

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