🚀 Playwright: ยกระดับการทดสอบ End-to-End ข้าม Browser

ในฐานะ Senior Architect ด้านระบบอัตโนมัติ การรับประกันว่าแอปพลิเคชันจะทำงานได้อย่างสมบูรณ์บนทุกแพลตฟอร์มคือหัวใจสำคัญของการพัฒนาซอฟต์แวร์ การทดสอบเว็บแอปพลิเคชันจึงไม่สามารถจำกัดอยู่แค่ Browser เดียวได้ Playwright คือเครื่องมือที่เข้ามาตอบโจทย์นี้ได้อย่างสมบูรณ์แบบ ด้วยความสามารถในการรันการทดสอบแบบ Cross-Browser (Chromium, Firefox, และ WebKit/Safari) ได้พร้อมกันในการรันครั้งเดียว

จุดเด่นที่สำคัญที่สุดของ Playwright คือการจัดการ Test Execution Environment ที่เป็นระบบ เมื่อคุณกำหนดค่าการทดสอบอย่างถูกต้อง Playwright จะรันสคริปต์เดียวกันบน Browser ต่าง ๆ และรวบรวมรายงานผล (Report) เข้ามาในหน้าเดียว ทำให้คุณเห็นภาพรวมของความเสถียรของระบบทั้งหมดได้อย่างชัดเจน โดยไม่ต้องเขียนโค้ดซ้ำสำหรับแต่ละ Browser

⚙️ หลักการทำงาน: การกำหนดค่า Projects ใน Playwright

เพื่อให้ Playwright ทราบว่าคุณต้องการทดสอบบน Browser ใดบ้าง วิธีการที่ถูกต้องและเป็นมาตรฐานที่สุดคือการกำหนดค่าผ่านไฟล์คอนฟิกหลัก playwright.config.ts (หรือ .js) โดยใช้ส่วนที่เรียกว่า projects

ส่วน projects นี้เปรียบเสมือนการกำหนด Schema ของชุดการทดสอบ (Test Schema) ที่คุณต้องการให้ระบบรัน โดยคุณสามารถกำหนดชุด Browser และค่า Environment Variables ที่แตกต่างกันสำหรับแต่ละโครงการ (Project) ได้อย่างเป็นระเบียบ

🛠️ ตัวอย่างการตั้งค่าใน playwright.config.ts

นี่คือตัวอย่างการตั้งค่าที่กำหนดให้ระบบรันชุดการทดสอบเดียวกันบน Chromium, Firefox, และ WebKit (Safari) พร้อมทั้งกำหนดตัวรายงานผล (Reporter) ให้แสดงผลลัพธ์อย่างละเอียด:

TypeScript

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  reporter: [['list'], ['monocart-reporter', { 
    name: 'ระบบรายงานผลการทดสอบแยกตาม Browser และ Scope', 
    outputFile: './test-results/report.html',
    columns: (defaultColumns) => {
      defaultColumns.push({
        id: 'testScope',
        name: 'Scope',
        type: 'string'
      });
    }
  }]),
  
  projects: [
    { 
      name: 'Chromium', 
      use: { ...devices['Desktop Chrome'] } 
    },
    { 
      name: 'Firefox', 
      use: { ...devices['Desktop Firefox'] } 
    },
    { 
      name: 'WebKit', 
      use: { ...devices['Desktop Safari'] } 
    }
  ]
});

💡 ข้อดีเชิงสถาปัตยกรรม (Architectural Benefits)

การใช้โครงสร้างแบบ projects ไม่เพียงแต่ช่วยให้การรันการทดสอบง่ายขึ้นเท่านั้น แต่ยังช่วยให้คุณสามารถจำลองสภาพแวดล้อมที่ซับซ้อนได้ เช่น การกำหนดให้ชุดทดสอบบางชุดต้องรันบน Network Throttling หรือการกำหนดให้ใช้ User Data Directory เฉพาะสำหรับ Browser นั้น ๆ ซึ่งเป็นการเพิ่มความแม่นยำในการจำลองการใช้งานจริง (Production Environment Simulation) ได้อย่างมาก

✅ บทสรุป

Playwright จึงเป็นมากกว่าเครื่องมือทดสอบ แต่เป็นส่วนหนึ่งของระบบ CI/CD Pipeline ที่ช่วยให้ทีมพัฒนาสามารถมั่นใจในความเสถียรของแอปพลิเคชันได้อย่างครอบคลุม การกำหนดค่าที่ถูกต้องในไฟล์ playwright.config.ts คือกุญแจสำคัญในการปลดล็อกศักยภาพการทดสอบข้าม Browser ที่มีประสิทธิภาพสูง ทำให้การ Deploy ระบบของคุณมีความเสี่ยงต่ำและเชื่อถือได้ในทุกแพลตฟอร์ม