ตรวจสุขภาพเว็บแบบอัตโนมัติ ด้วย Chrome DevTools Recorder ต่อยอดงาน Compliance

สวัสดีครับ

วันนี้ผมจะพามาดูเทคนิคเจ๋งๆ นะครับ ที่เอา Chrome DevTools Recorder มาใช้ให้เกิดประโยชน์มากกว่าแค่การทำ Automated Test ทั่วไป

ใครว่ามันใช้ได้แค่ Test อย่างเดียว วันนี้ผมจะชวนเพื่อนๆ ลองเอามาใช้ตรวจสุขภาพเว็บไซต์ หรือเช็ค Compliance ต่างๆ ที่เราต้องการ Monitor กันนะครับ แถมยังเอาไปต่อยอดเก็บ Log ได้อีกด้วย เจ๋งเลยใช่ไหมล่ะครับ

1. เริ่มต้นบันทึก: เหมือนเดิมเป๊ะเลยครับ

ขั้นตอนแรกเหมือนที่เราเคยทำกันเลยครับ:

1. กด F12 หรือ คลิกขวา แล้วเลือก Inspect หรือ ตรวจสอบ ที่หน้าเว็บเป้าหมายนะครับ
2. มองหา Recorder ใน DevTools แล้วกด Create a new recorder
3. ตั้งชื่อดีๆ นะครับ เช่น "ตรวจสอบข้อมูลติดต่อสำหรับ Compliance"
4. กดบันทึก (ปุ่มสีแดง) แล้วเริ่มทำ Workflow ของเราเลยครับ

ตัวอย่าง:

• เข้าหน้า "เกี่ยวกับเรา"
• เลื่อนลงไปดูส่วนข้อมูลการติดต่อ
• คลิกที่ลิงก์ "นโยบายความเป็นส่วนตัว"
• ตรวจสอบว่าหัวข้อ "PDPA" ปรากฏอยู่บนหน้าเว็บไหม

ตรงนี้เรายังไม่ต้องเขียนโค้ดนะครับ แค่คลิกๆ ไปตามปกติเลย

2. ดูผลลัพธ์และปรับแก้ Workflow

หลังจากที่เรากดหยุดบันทึกแล้ว จะเห็นรายการ Step ที่เราทำไปนะครับ ทีนี้เราสามารถเข้ามาแก้ไข หรือเพิ่ม Step บางอย่างเข้าไปได้ เพื่อให้ Workflow ของเรามีความแม่นยำมากขึ้น สำหรับงาน Compliance นะครับ

ตัวอย่างการปรับแก้:

สมมติว่าผมอยากจะตรวจสอบว่า เบอร์โทรศัพท์ที่แสดงบนหน้าเว็บนั้นถูกต้องตามที่เรากำหนดไว้ไหมนะครับ เราสามารถเพิ่ม Step แบบ "Assert element properties" เข้าไปได้เลย เพื่อยืนยันว่า Text ของ Element นั้นๆ เป็นไปตามที่เราต้องการ

1. ไปที่ Step ที่เราอยากเพิ่ม แล้วกดปุ่มบวก
2. เลือก "Assert element properties"
3. ระบุ Selector ของ Element ที่แสดงเบอร์โทรศัพท์
4. เพิ่ม Property "innerText" แล้วใส่ Value ที่เราคาดหวัง เช่น "02-123-4567"

แบบนี้นะครับ ถ้าเบอร์โทรไม่ตรง Workflow ก็จะ Fail ทันที ทำให้เรามั่นใจได้ว่าข้อมูลสำคัญของเราถูกต้องอยู่เสมอ

3. ส่งออกเป็นโค้ดเพื่อต่อยอดงาน Compliance & Logging

นี่แหละครับ หัวใจสำคัญ! แทนที่จะรันแค่ใน DevTools เราจะส่งออกเป็นโค้ด Puppeteer เพื่อเอาไปรันอัตโนมัติบน Server หรือใน CI/CD Pipeline ได้เลยนะครับ

1. ไปที่รายการที่เราบันทึกไว้
2. กดที่รูปดาวน์โหลด (Export)
3. เลือก "Puppeteer" นะครับ

เราก็จะได้ไฟล์ .js ที่เป็นโค้ด Puppeteer ออกมาแล้วครับ

ตัวอย่างโค้ด Puppeteer (หลังจาก Export)

const puppeteer = require('puppeteer');

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

  // กำหนด viewport และ user agent เพื่อจำลองการใช้งานจริง
  await page.setViewport({ width: 1920, height: 1080 });
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36');

  const navigationPromise = page.waitForNavigation({ waitUntil: 'networkidle0' });
  await page.goto('https://www.example.com/about');
  await navigationPromise;

  // คลิกที่ลิงก์นโยบายความเป็นส่วนตัว
  await page.click('a[href="/privacy-policy"]');
  await navigationPromise;

  // ตรวจสอบว่ามีข้อความ "PDPA" อยู่บนหน้าเว็บ
  const pageContent = await page.content();
  if (!pageContent.includes('PDPA')) {
    console.error('Compliance Warning: PDPA section not found on privacy policy page.');
    // อาจจะส่ง email หรือแจ้งเตือนไปที่ Slack
  } else {
    console.log('Compliance Check: PDPA section found. OK.');
  }

  // ตรวจสอบเบอร์โทรศัพท์ (จาก Assertion ที่เราเพิ่มไปก่อนหน้านี้)
  const phoneNumberElement = await page.$('body > div.contact-info > span.phone-number');
  const phoneNumberText = phoneNumberElement ? await phoneNumberElement.evaluate(el => el.innerText) : '';
  if (phoneNumberText !== '02-123-4567') {
    console.error(`Compliance Error: Phone number mismatch. Expected '02-123-4567', got '${phoneNumberText}'.`);
    // บันทึก Log ลง Database หรือส่งแจ้งเตือน
  } else {
    console.log('Compliance Check: Phone number is correct. OK.');
  }

  // **สำคัญ**: เราสามารถเพิ่ม Logic เพื่อบันทึกผลลัพธ์ลง Log File หรือ Database ได้ที่นี่
  // เช่น `fs.appendFileSync('compliance-log.txt', \`[${new Date().toISOString()}] Phone check: ${phoneNumberText}\
\`);`

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

โค้ดนี้แหละครับ เราสามารถเอาไปรันเป็น Cron Job ทุกวัน หรือทุกชั่วโมง เพื่อตรวจสุขภาพเว็บของเราได้เลยนะครับ ถ้ามีอะไรผิดปกติ เราก็สามารถเพิ่ม Logic เพื่อแจ้งเตือน เช่น ส่งอีเมล หรือยิง Webhook ไปที่ระบบ Log กลางของเราได้เลย เป็นการทำ compliance และ logging แบบอัตโนมัติ ที่ช่วยให้งาน cybersecurity ของเราแข็งแกร่งขึ้นด้วยนะครับ

สรุป

เห็นไหมครับว่า Chrome DevTools Recorder ไม่ได้มีไว้แค่ทำ Automated Test เพียงอย่างเดียวนะครับ แต่ยังเป็นเครื่องมือที่มีประสิทธิภาพสำหรับการทำ browser-automation เพื่อดูแลงาน compliance และเก็บ logging ต่างๆ ของเว็บไซต์เราได้อีกด้วย ลองเอาไปปรับใช้กับระบบของเพื่อนๆ ดูนะครับ จะช่วยลดภาระงาน Manual และเพิ่มความมั่นใจในการดูแลระบบได้เยอะเลยครับ

แหล่งที่มาอ้างอิง: * Chrome DevTools - Recorder * Puppeteer Documentation

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