ลองสร้าง Automated Test ง่ายๆ ด้วย Chrome DevTools Recorder ไม่ต้องเขียนโค้ดก็ทำได้

สวัสดีครับ

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

1. เปิด Chrome DevTools แล้วไปที่ Recorder

ขั้นตอนแรกเลยนะครับ ให้เราเปิดหน้าเว็บที่เราต้องการทดสอบขึ้นมาครับ จากนั้นกด F12 หรือ คลิกขวาแล้วเลือก Inspect (ตรวจสอบ) ครับ มันจะเปิด Chrome DevTools ขึ้นมานะ

พอเข้ามาแล้ว ให้มองหาเมนูที่เขียนว่า Recorder ครับ ถ้าหาไม่เจอ อาจจะต้องกดเครื่องหมาย >> แล้วเลือกเอานะครับ

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

พอเจอเมนู Recorder แล้วนะครับ ให้เรากด Create a new recorder ครับ จากนั้นตั้งชื่อให้มันหน่อย เช่น "ทดสอบฟอร์มจองห้องพัก" แบบนี้นะครับ

แล้วก็กดปุ่มบันทึก สีแดงๆ ได้เลยครับ

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

พอเสร็จแล้ว ก็กดปุ่มหยุดบันทึกได้เลยนะครับ

3. ลองเล่นซ้ำและปรับแก้ข้อมูล

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

ทีนี้ลองเปลี่ยนข้อมูลที่เราเคยกรอกไปดูครับ เช่น ไปที่รายการที่เราบันทึกไว้ ตรงขั้นตอนที่เรากรอกชื่อผู้จอง ลองแก้ไขข้อความให้เป็นชื่ออื่นดูครับ อันนี้เป็นการใช้ stringmanipulation แบบง่ายๆ ในบริบทนี้นะครับ

พอแก้ไขเสร็จแล้ว ลองกด Replay อีกครั้งดูครับ จะเห็นว่ามันใช้ข้อมูลใหม่ที่เราแก้ไขไปทดสอบให้เราเลย เจ๋งใช่ไหมครับ

4. ส่งออกเป็นโค้ด Puppeteer

สุดยอดไปเลยใช่ไหมครับ ทีนี้เราสามารถนำสิ่งที่เราบันทึกไว้ไปต่อยอดเขียนโค้ดต่อได้ด้วยนะ โดยเฉพาะสำหรับ javascript Developer ที่อยากทำ browser-automation ครับ

ให้เราไปที่รายการที่เราบันทึกไว้นะครับ จากนั้นกดที่ รูปดาวน์โหลด (Export) แล้วเลือก Puppeteer ครับ

มันก็จะ Export โค้ดออกมาให้เราเลยครับ ตัวอย่างโค้ดก็จะประมาณนี้นะครับ:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // ลองเปิด headless: false เพื่อดูการทำงานได้ครับ
  const page = await browser.newPage();

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

  // ขั้นตอนที่กรอกชื่อ
  await page.waitForSelector('#nameInput');
  await page.type('#nameInput', 'คุณชัยวัฒน์'); // ข้อมูลที่แก้ไขแล้ว

  // ขั้นตอนที่กรอกเบอร์โทร
  await page.waitForSelector('#phoneInput');
  await page.type('#phoneInput', '0812345678');

  // ขั้นตอนที่คลิกปุ่ม
  await page.waitForSelector('#submitButton');
  await page.click('#submitButton');

  // รอดูผลลัพธ์ หรือทำอะไรต่อก็ได้ครับ
  await page.waitForTimeout(3000); // รอดู 3 วินาที

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

เห็นไหมครับ เราได้โค้ด javascript มาใช้ต่อยอดได้ง่ายๆ เลย แบบนี้เราก็ไม่ต้องมาเขียนโค้ดตั้งแต่แรกแล้วครับ

สรุปและลองเล่น

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

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

จากนั้นไปที่หน้านี้ เพื่อลองทดสอบดูกันครับ: แบบฟอร์มสำหรับทดสอบ Automated Test (อันนี้เป็นแค่ตัวอย่าง URL นะครับ เพื่อนๆ ต้องเตรียมหน้าฟอร์มของตัวเองไว้ลองเล่นนะครับ)

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