[Playwright] สรุปภาพรวม Playwright (Node.js): เครื่องมือทำ Automated Testing ยุคใหม่ที่เร็วกว่า Selenium

หากคุณกำลังมองหาเครื่องมือสำหรับทำ Automated Testing หรือ Web Scraping ที่รวดเร็วและเสถียรในยุคนี้ Playwright จาก Microsoft คือหนึ่งในตัวเลือกอันดับต้นๆ ที่นักพัฒนาและ QA สาย Node.js ไม่ควรมองข้าม บทความนี้จะสรุปภาพรวม หลักการทำงาน เปรียบเทียบกับ Selenium พร้อมตัวอย่างการใช้งานจริงครับ

---

1. Playwright คืออะไร และทำงานอย่างไร?

Playwright คือไลบรารี Open-Source จาก Microsoft ที่รองรับการทดสอบบนเบราว์เซอร์หลักครบถ้วน ทั้ง Chromium, Firefox และ WebKit (Safari) โดยมีจุดเด่นและสถาปัตยกรรมสำคัญดังนี้:

• Direct Protocol Connection: สื่อสารกับเบราว์เซอร์ผ่าน WebSocket / Browser Debugging Protocol โดยตรง ทำให้การสั่งงานรวดเร็วและมีความเสถียรกว่าเครื่องมือรุ่นเก่า
• Auto-Waiting: มีระบบรอให้ Element พร้อมใช้งานจริง (Visible, Enabled, Stable) ก่อนส่งคำสั่งโดยอัตโนมัติ ช่วยลดปัญหา Flaky Tests หรือการทดสอบล้มเหลวแบบสุ่ม
• Browser Context Isolation: สามารถแยกสภาวะการทำงาน (Context) ของเบราว์เซอร์ออกจากกันได้เหมือนการเปิด Incognito Mode ทำให้ทดสอบหลายเคสพร้อมกันแบบ Parallel ได้รวดเร็วโดยไม่ดึงทรัพยากรเครื่อง

---

2. ตารางเปรียบเทียบ Playwright vs Selenium

หัวข้อ	Playwright	Selenium
ข้อดี (Pros)	ทำงานเร็วกว่าด้วย WebSocket Protocol มี Auto-waiting ในตัว มี Tool ช่วยเหลือครบ (Codegen, Trace Viewer) แยก Browser Context (Incognito) ได้ง่าย	รองรับภาษาและเบราว์เซอร์หลากหลายที่สุด Ecosystem ใหญ่ ชุมชนผู้ใช้กว้างขวาง เสถียรสูงสำหรับระบบ Legacy ขนาดใหญ่ รองรับอุปกรณ์พกพาจริงผ่าน Appium
ข้อเสีย (Cons)	ชุมชนผู้ใช้ยังเล็กกว่า Selenium ไม่รองรับเบราว์เซอร์รุ่นเก่ามากๆ การทดสอบบนอุปกรณ์พกพาจริงยังมีข้อจำกัด	ทำงานช้ากว่าเพราะผ่าน HTTP Protocol ต้องจัดการ Explicit Wait/Sleep เองค่อนข้างมาก ติดตั้งและตั้งค่า Environment ซับซ้อนกว่า

---

3. เปรียบเทียบโค้ดการใช้งาน (Node.js)

มาลองดูความแตกต่างในการเขียนสคริปต์ค้นหาคำว่า "Playwright" บน Google ระหว่างสองเครื่องมือนี้กันครับ:

Playwright (Node.js)

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto('https://www.google.com');
  await page.fill('textarea[name="q"]', 'Playwright');
  await page.press('textarea[name="q"]', 'Enter');

  // มี Auto-waiting ในตัว ไม่ต้องเขียนสั่งรอ Element
  const title = await page.locator('h3').first().textContent();
  console.log(`Playwright Result: ${title}`);

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

Selenium (Node.js)

const { Builder, By, Key, until } = require('selenium-webdriver');

(async () => {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://www.google.com');
    await driver.findElement(By.name('q')).sendKeys('Playwright', Key.RETURN);

    // ต้องใช้ Explicit Wait เพื่อรอให้ Element ปรากฏ
    let firstResult = await driver.wait(
      until.elementLocated(By.xpath('//h3')),
      10000
    );
    let title = await firstResult.getText();
    console.log(`Selenium Result: ${title}`);
  } finally {
    await driver.quit();
  }
})();

---

4. การตั้งค่า Browser Context และ Headless Mode

การกำหนดค่าสภาพแวดล้อมในการรันเบราว์เซอร์ ทำได้ง่ายและยืดหยุ่นผ่าน Context:

const { chromium } = require('playwright');

(async () => {
  // 1. ตั้งค่า Headless Mode (True = ไม่แสดงหน้าต่าง, False = แสดงหน้าต่าง)
  const browser = await chromium.launch({ headless: false });

  // 2. สร้าง Browser Context (จำลอง Session แยกเป็นอิสระ)
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
    locale: 'th-TH',
    userAgent: 'Custom-User-Agent-String'
  });

  // 3. เปิดหน้าเว็บภายใต้ Context นั้น
  const page = await context.newPage();
  await page.goto('https://example.com');

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

---

5. การจัดการ Auth State / Cookies

เทคนิคเด็ดของ Playwright คือการบันทึกสถานะ Cookies และ LocalStorage ช่วยให้ล็อกอินเพียงครั้งเดียว แล้วนำสถานะมาใช้ซ้ำในสคริปต์อื่นได้ทันทีโดยไม่ต้องเสียเวลาล็อกอินใหม่ทุกครั้ง

ขั้นตอนที่ 1: สคริปต์บันทึก Auth State (save-auth.js)

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  // ทำขั้นตอนล็อกอินตามปกติ
  await page.goto('https://example.com/login');
  await page.fill('#username', 'my_user');
  await page.fill('#password', 'my_password');
  await page.click('#login-button');

  // รอจนกว่าจะเข้าสู่หน้า Dashboard
  await page.waitForURL('**/dashboard');

  // บันทึกสถานะ (Cookies + LocalStorage) ลงไฟล์ JSON
  await context.storageState({ path: 'auth.json' });

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

ขั้นตอนที่ 2: สคริปต์นำ Auth State กลับมาใช้ใหม่ (reuse-auth.js)

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });

  // โหลดไฟล์ auth.json เข้ามาใน Context ใหม่ทันที
  const context = await browser.newContext({ storageState: 'auth.json' });
  const page = await context.newPage();

  // เข้าหน้าเว็บที่ต้องใช้สิทธิ์ได้ทันทีโดยไม่ต้องล็อกอินซ้ำ
  await page.goto('https://example.com/dashboard');

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

---

สรุปภาพรวม

Playwright ตอบโจทย์การพัฒนายุคใหม่ที่ต้องการความเร็ว ประหยัดเวลาเขียนโค้ดด้วยระบบ Auto-waiting และจัดการ Session ได้สะดวกมาก ถือเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการเริ่มต้นทำ Test Automation หรือระบบ Web Scraping ที่มีประสิทธิภาพสูงครับ