E2E Testing with Playwright: การทำ API Testing และการ Mock Network Requests / Intercept Calls

ในสถาปัตยกรรมซอฟต์แวร์สมัยใหม่ที่ใช้สถาปัตยกรรมแบบ Microservices การพึ่งพาการสื่อสารผ่าน API ภายนอก (External APIs) ถือเป็นเรื่องปกติ การทดสอบ End-to-End (E2E) จึงต้องมั่นใจว่า UI ไม่เพียงแต่ทำงานได้ถูกต้อง แต่ยังสามารถจัดการกับความผันผวนของข้อมูล (Data Variability) หรือความล้มเหลวของบริการภายนอก (External Service Failure) ได้อย่างสง่างาม

การทดสอบแบบดั้งเดิมที่พึ่งพาการเรียก API จริงในทุกรอบการทดสอบนั้นมีข้อเสียหลักคือความช้า (Slowness) และความไม่เสถียร (Flakiness) เนื่องจากชุดทดสอบจะถูกผูกติดกับสถานะของเซิร์ฟเวอร์ภายนอก เราจึงจำเป็นต้องยกระดับการทดสอบให้สามารถควบคุมสภาพแวดล้อมการทำงานได้อย่างสมบูรณ์

การยกระดับ E2E Testing ด้วย Playwright Network Interception

Playwright ไม่ได้จำกัดตัวเองอยู่แค่การตรวจสอบ DOM (Document Object Model) เท่านั้น แต่ยังมอบความสามารถในการเข้าถึงระดับ Network Layer ซึ่งเป็นหัวใจสำคัญของการทำ API Testing ขั้นสูง เราสามารถใช้ฟังก์ชัน page.route() เพื่อดำเนินการ Intercept (ดักจับ) การเรียก API ที่แอปพลิเคชันร้องขอ และดำเนินการ Mock (จำลอง) การตอบกลับข้อมูลเหล่านั้นก่อนที่มันจะไปถึงปลายทางจริง

หลักการทำงานของ Mocking Network Request

การ Mocking API Calls คือการแทนที่การเรียก API จริงด้วยการตอบกลับที่ถูกกำหนดไว้ล่วงหน้า (Predefined Response) ซึ่งมีประโยชน์อย่างยิ่งในการ:

• เพิ่มความเร็ว: ชุดทดสอบทำงานได้รวดเร็วขึ้นมาก เพราะไม่ต้องรอ Latency ของเครือข่ายหรือเซิร์ฟเวอร์จริง
• เพิ่มความน่าเชื่อถือ: สามารถจำลองสถานการณ์ Edge Cases ที่ยากต่อการทดสอบ เช่น การตอบกลับด้วยรหัส 500, การตอบกลับด้วยข้อมูลว่างเปล่า (Empty Data), หรือการจำลองการเชื่อมต่อล้มเหลว (Network Timeout)
• การแยกส่วน (Isolation): ทำให้ชุดทดสอบของเราเป็นอิสระจากสภาพแวดล้อมภายนอกอย่างสมบูรณ์

ตัวอย่างการ Mock API Call ด้วย Playwright

ในตัวอย่างนี้ เราจะจำลองสถานการณ์ที่หน้าเว็บพยายามเรียกข้อมูลผู้ใช้ (User Data) จาก API endpoint `/api/user/1` แต่เราต้องการให้ชุดทดสอบของเราใช้ข้อมูลจำลอง (Mock Data) แทนการเรียกจริง

JavaScript

// playwright-mock-example.js
import { test, expect } from '@playwright/test';

test('should mock API call and verify UI behavior', async ({ page }) => {
  // 1. กำหนดการ Mocking: ดักจับการเรียกไปยัง /api/user/1
  await page.route('**/api/user/1', async route => {
    // 2. ส่งการตอบกลับจำลอง (Mock Response)
    await route.fulfill({ 
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ id: 1, name: 'Mock User', role: 'Admin' })
    });
  });

  // 3. เข้าถึงหน้าเว็บ (ซึ่งจะเรียก API ที่ถูก Mock)
  await page.goto('http://localhost:3000/profile');

  // 4. ตรวจสอบว่า UI แสดงผลตามข้อมูลจำลองที่ Mock ไว้
  await expect(page.locator('.user-name')).toHaveText('Mock User');
});

บทสรุปสำหรับสถาปนิกระบบ

การใช้เทคนิค Intercept และ Mocking Network Requests ด้วย Playwright ไม่ใช่เพียงแค่ฟีเจอร์เสริม แต่เป็นองค์ประกอบสำคัญที่ยกระดับคุณภาพและความเสถียรของ Test Suite ให้เทียบเท่ากับสภาพแวดล้อมการผลิต (Production Environment) ในแง่ของการจัดการข้อผิดพลาดและสถานการณ์ที่หลากหลาย การทำเช่นนี้จะช่วยให้ทีมพัฒนาสามารถมั่นใจได้ว่า Logic ของแอปพลิเคชันจะทำงานได้อย่างถูกต้อง แม้ว่าบริการภายนอกจะล้มเหลวหรือไม่พร้อมใช้งานก็ตาม การลงทุนในการทดสอบระดับ Network Layer จึงเป็นการลงทุนที่คุ้มค่าสำหรับระบบที่ซับซ้อนและพึ่งพา API สูง