ทดสอบเว็บแบบโปร ไม่ต้องโค้ด บันทึกด้วย Chrome DevTools ต่อ Puppeteer

สวัสดีครับ

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

เราจะใช้ Chrome Dev Tool นี่แหละครับ เพื่อบันทึกการทำงานของเรา จากนั้นก็เอาไปต่อยอดกับ Puppeteer ได้ง่าย ๆ เลย

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

เริ่มบันทึกการทำงาน

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

ลองเล่นซ้ำ และแก้ไขข้อมูล

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

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

นี่แหละครับ มันช่วยให้เราปรับแต่ง Test ได้ยืดหยุ่นมากๆ เลยนะ

ส่งออกไป Puppeteer

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

1. ไปที่รายการที่เราบันทึกไว้: เลือกรายการของเราเลยครับ
2. กดที่รูปดาวน์โหลด: จะมีรูปเหมือนดาวน์โหลดอยู่ครับ กดตรงนั้นเลย
3. เลือก Puppeteer: เลือก puppeteer ครับ เพียงเท่านี้เราก็สามารถนำโค้ดที่ได้ไปใช้ เขียนโค้ดเพิ่มเติมต่อได้แล้วครับ

const puppeteer = require('puppeteer');

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

  // โค้ดที่ได้จากการบันทึกจะมาอยู่ตรงนี้ครับ 
  // ตัวอย่างเช่น:
  // await page.goto('https://example.com/booking-form');
  // await page.waitForSelector('input[name="name"]');
  // await page.type('input[name="name"]', 'นายเปลี่ยนแปลง');
  // await page.click('button[type="submit"]');

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

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

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

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

การทำ Automated Test แบบนี้ ยังช่วยให้เรามั่นใจได้ว่าระบบทำงานได้ตามข้อกำหนด ซึ่งช่วยเรื่อง compliance ได้ดีเลยนะครับ

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