แม้นักพัฒนาส่วนใหญ่ในปัจจุบันจะคุ้นเคยกับการใช้บราวเซอร์ตระกูล Chromium (เช่น Chrome หรือ Edge) ในการทำงาน แต่รู้หรือไม่ว่ายังมีกลุ่มผู้ใช้จำนวนไม่น้อยทั่วโลกที่เหนียวแน่นกับ Mozilla Firefox (ผมคนหนึ่ง เพราะเบา กับ extension ตามใจ) ซึ่งขับเคลื่อนด้วยเอนจิน Gecko
ความท้าทายคือ เอนจิน Gecko มีการประมวลผล CSS layout, การจัดการหน่วยความจำ (Memory Management) และระบบรักษาความปลอดภัยความเป็นส่วนตัว (Privacy Features) ที่แตกต่างจาก Chrome อย่างชัดเจน การทดสอบเว็บบน Firefox จึงเป็นขั้นตอนสำคัญที่จะช่วยการันตีว่า เว็บของคุณจะทำงานได้สมบูรณ์แบบ ไร้รอยต่อสำหรับผู้ใช้ทุกคน และ Playwright ก็ได้เตรียมเอนจิน Firefox มาให้เราพร้อมใช้งานทันทีโดยไม่ต้องลง Plugin เสริมใด ๆ ครับ
ทำไมต้องทดสอบบน Firefox ด้วย Playwright?
- ตรวจจับบั๊ก Layout และ CSS แฝง: Firefox มี Strict Standards ในการเรนเดอร์หน้าเว็บ บั๊ก CSS บางตัวที่ยอมให้ผ่านใน Chrome อาจจะแสดงผลเบี้ยวบน Firefox การเทสบนเอนจิน Gecko จะช่วยให้โค้ดหน้าบ้านของคุณได้มาตรฐานที่สุด
- ทดสอบระบบความปลอดภัยและคุกกี้: Firefox มีระบบ Enhanced Tracking Protection ที่เข้มงวด การทดสอบบน Playwright Firefox จะช่วยเช็กได้ว่า ฟีเจอร์จำพวก Third-party cookies หรือ iFrames ของคุณทำงานได้ปกติหรือไม่
- ทำงานร่วมกับหัวใจสำคัญของ Firefox ได้ทันที: Playwright มีสิทธิ์ควบคุมและตั้งค่า Firefox Preferences ระดับลึกได้ตั้งแต่ตอนเปิดบราวเซอร์
วิธีตั้งค่าเปิดใช้งาน Firefox ใน Playwright
เปิดไฟล์คอนฟิกหลักของคุณ (playwright.config.ts หรือ .js) แล้วเปิดใช้งานโปรเจกต์ firefox ในส่วนของ projects ดังนี้
ตั้งค่าในไฟล์ playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
reporter: 'html',
use: {
// กำหนดให้บันทึก Trace เผื่อไว้ใช้ตรวจสอบย้อนหลังเวลาเกิด Error
trace: 'on-first-retry',
},
projects: [
// กำหนดโปรเจกต์สำหรับรันบน Firefox (Gecko Engine)
{
name: 'firefox',
use: {
...devices['Desktop Firefox'],
// คุณสามารถตั้งค่าเฉพาะของ Firefox (Preferences) ตรงนี้ได้หากจำเป็น
},
},
],
});
เขียนสคริปต์ทดสอบบน Firefox (Example Test Script)
สร้างไฟล์ทดสอบที่ tests/firefox-test.spec.ts เพื่อจำลองการเช็กฟีเจอร์พื้นฐานและการดาวน์โหลดไฟล์ ซึ่ง Firefox มีหน้าต่างจัดการที่เฉพาะตัว
import { test, expect } from '@playwright/test';
test('ตรวจสอบฟังก์ชันการทำงานบน Firefox', async ({ page }) => {
// 1. เปิดไปยังหน้าเว็บที่ต้องการทดสอบ
await page.goto('https://example.com');
// 2. ตรวจสอบ Element สำคัญบนหน้าเว็บ
const header = page.locator('h1');
await expect(header).toContainText('Example Domain');
// 3. ตัวอย่างการทดสอบฟังก์ชันดาวน์โหลดไฟล์ (Playwright จะดักจับ Event ให้อัตโนมัติ)
// ไม่ว่าบราวเซอร์จะเปิดหน้าต่าง Pop-up ของระบบขึ้นมาหรือไม่
const [download] = await Promise.all([
page.waitForEvent('download'), // รอสัญญาณการดาวน์โหลด
page.locator('#download-button').click() // กดปุ่มโหลดไฟล์ (สมมติพิกัด)
]);
// ตรวจสอบว่าดาวน์โหลดสำเร็จ
const path = await download.path();
expect(path).toBeTruthy();
});
คำสั่งสำหรับสั่งรันคำสั่งทดสอบ (Run Commands)
เลือกเจาะจงรันคำสั่งทดสอบเฉพาะบน Firefox ผ่าน Terminal ด้วยคำสั่งต่อไปนี้
- รันแบบเบื้องหลัง (Headless Mode)
npx playwright test --project=firefox - รันแบบเปิดหน้าจอ Firefox ให้เห็นขั้นตอน (Headed Mode)
npx playwright test --project=firefox --headed - เปิดรายงานผลการทดสอบ (HTML Report) หลังรันเสร็จ
npx playwright show-report
สรุป
การทำ Cross-browser testing บน Firefox ร่วมกับ Playwright ไม่ได้ทำให้ขั้นตอนการทำงานของคุณเพิ่มขึ้นเลย เพราะคุณสามารถใช้เทสสคริปต์ชุดเดิมที่เคยเขียนไว้ไปรันบนเอนจิน Gecko ได้ทันที การันตีได้ว่าเว็บแอปพลิเคชันของคุณจะทำงานได้อย่างมั่นคง ปลอดภัย และแสดงผลได้อย่างถูกต้องในทุกหน้าจอของแฟนพันธุ์แท้บราวเซอร์หมาป่าไฟครับ!
อ่านเพิ่มเติม