ทดสอบเว็บแบบง่ายๆ ด้วย Chrome Recorder ไปถึง Puppeteer

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

วันนี้ ผมมีเทคนิคดีๆ มาฝากนะครับ สำหรับคนที่อยากลองทำ Automated Test กับเว็บไซด์ของเรา แบบไม่ต้องเขียนโค๊ตเลยครับ มันคือการใช้ Chrome Dev Tool นะครับ โดยเฉพาะส่วนของ Recorder ตรงนี้แหละ ที่จะช่วยให้เราบันทึกการทำงานต่างๆ บนหน้าเว็บ แล้วเอามาเล่นซ้ำ หรือจะ Export ไปเป็นโค๊ต Puppeteer เพื่อพัฒนาต่อก็ได้ครับ ง่ายมากๆ เลยนะ

มาเริ่มกันเลยครับ ผมจะพาไปดูทีละ Step นะ

1. เข้าไปที่ Chrome Dev Tool กันก่อนเลยครับ

อันดับแรก นะครับ ไปที่หน้าเว็บ ที่เราต้องการจะลองทำ Automated Test นะครับ

จากนั้นให้กด F12 หรือไม่ก็ คลิกขาว ที่หน้าเว็บก็ได้ครับ แล้วเลือก Inspect หรือ ตรวจสอบ นะ

พอกดมาแล้วนะครับ ก็ให้มองหาเมนูที่เขียนว่า Recorder ครับ มันจะอยู่แถวๆ Tab พวก Elements, Console, Network นั่นแหละครับ

2. เริ่มต้นบันทึก ด้วยการ Create a new recorder

พอเจอ Recorder แล้วนะครับ ก็ให้กดที่ Create a new recorder ได้เลย

จากนั้นตั้งชื่อให้มันหน่อยนะครับ เพื่อให้ง่ายต่อการจำ ว่า Recorder ตัวนี้เอาไว้ทำอะไร เช่น "ทดสอบส่งแบบฟร์อม จองโรงแรม" แบบนี้นะครับ

พอกดตั้งชื่อเสร็จแล้ว ก็กดปุ่มสีแดงๆ บันทึก ได้เลยนะ

3. ทำการทดสอบเว็บของเราตามปกติเลยครับ

ตอนนี้ Chrome มันกำลังบันทึกทุกการกระทำของเราอยู่นะครับ

เราก็ทำการทดสอบเว็บไชต์ของเราตามปกติเลยครับ เช่น ลองกรอกข้อมูลต่างๆ ในแบบฟอร์มดูนะครับ

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

ทำไปเรื่อยๆ จนจบขั้นตอนที่เราอยากจะให้มันทดสอบนะ

4. หยุดบันทึก แล้วลองเล่นซ้ำอีกทีครับ

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

จากนั้น Chrome มันก็จะแสดงรายการที่เราบันทึกไว้ทั้งหมดเลยครับ

ลองกดปุ่ม Replay ที่มุมขาวมือด้านบนดูนะครับ

เห็นไหมครับ มันจะทำตามสิ่งที่เราทำไว้เป๊ะๆ เลยครับ สะดวกมากๆ นะ

5. ลองแก้ไขข้อมูลที่บันทึกไว้ดูครับ

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

ให้ไปที่รายการที่เราบันทึกไว้ครับ จากนั้นทำการแก้ไขชื่อ ผู้จองห้องพัก ดูครับ

// ตัวอย่างของ Step ที่เราแก้ไขใน Recorder
{ 
  "type": "change",
  "selector": "form input[name='bookingName']", // ตัวเลือก selector นะครับ
  "value": "สมหญิง จองเลย"
}

จากนั้นลองกด Replay อีกครั้งดูนะครับ

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

6. ส่งออกเป็นโค๊ต Puppeteer ได้เลยนะครับ

นี่แหละครับ คือจุดเด่นของเจ้า Recorder ตัวนี้เลย

หลังจากที่เราบันทึกแล้วก็ปรับแต่งจนพอใจแล้ว เราสามารถ Export สิ่งที่เราบันทึกนี้ไปเป็นโค๊ต JavaScript สำหรับ Puppeteer ได้เลย เพื่อเอาไปพัฒนาต่อ หรือเขียนโค๊ตเพิ่มความซับซ้อนให้มันได้ครับ

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

จากนั้นให้เลือกเป็น Puppeteer ครับ

Chrome มันก็จะสร้างโค๊ต JavaScript ออกมาให้เราเลยนะ พร้อมเอาไปใช้กับ Puppeteer ทันทีเลย

const puppeteer = require('puppeteer');

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

  // ไปที่หน้าเว็บที่เราทดสอบนะครับ
  await page.goto('https://example.com/test-form'); // ลิงค์นี้เป็นตัวอย่างนะ

  // ทำตาม Step ที่บันทึกไว้ได้เลย
  await page.waitForSelector('input[name="bookingName"]');
  await page.type('input[name="bookingName"]', 'สมหญิง จองเลย');
  await page.type('input[name="contactNumber"]', '0812345678');
  // ... อื่นๆ ที่เราได้บันทึกไว้

  await Promise.all([
    page.waitForNavigation(),
    page.click('button[type="submit"]'),
  ]);

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

สำคัญมากนะ เรื่องข้อมูลส่วนตัว (PDPA): เวลาเราทดสอบอะไรแบบนี้ โดยเฉพาะกับระบบจริง หรือมีข้อมูลที่ละเอียดอ่อนมากๆ เนี่ยครับ อย่าเผลอบันทึกข้อมูลจริง หรือข้อมูลที่ละเอียดอ่อนมากๆ ลงไปในการทดสอบนะครับ เพราะไฟล์ที่เรา Export ออกมามันเป็นโค๊ตตรงๆ เลยนะ มันอาจจะหลุดออกไปได้ง่ายๆนะครับ ควรใช้ข้อมูลทดสอบ (test data) ที่ไม่มีความสำคัญนะครับ เพื่อความปลอดภัยนะ

7. อยากลอง ดาวน์โหลดไฟล์ตัวอย่างไปทดสอบไหมครับ

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

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

สรุปนะครับ

เทคนิคนี้ช่วยให้เราเริ่มต้นทำ Automated Test ได้ง่ายมากๆ เลยนะครับ โดยไม่ต้องเขียนโค๊ตแม้แต่บรรทัดเดียวในตอนแรก เหมาะสำหรับ มือใหม่ หรือคนที่ต้องการสร้าง Prototype ของ Test Flow อย่างรวดเร็วมากๆ เลยครับ และยังสามารถต่อยอดไปสู่การเขียนโค๊ต browser-automation ด้วย Puppeteer ได้อย่างไม่มีรอยต่อเลยนะครับ

ลองเอาไปใช้กับการทดสอบ กับระบบของเพื่อนๆดูนะครับ ผมว่ามันมีประโยชน์มากๆ เลยครับ

อ้างอิง: * Chrome DevTools Recorder