แม้นักพัฒนาส่วนใหญ่ในปัจจุบันจะคุ้นเคยกับการใช้บราวเซอร์ตระกูล 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.describe('Firefox Specific Features & Quirks', () => {
// เคสที่ 1: Form Autocomplete Persistence
test('1. ทดสอบพฤติกรรมการจัดการค่าคงค้างในฟอร์มหลังจากกด Refresh', async ({ page }) => {
const mockUrl = 'http://localhost:3000/form';
await page.route(mockUrl, async (route) => {
await route.fulfill({
status: 200,
contentType: 'text/html',
body: `
<html>
<body>
<form id="profile-form">
<input type="text" id="nickname" value="" />
</form>
</body>
</html>
`
});
});
await page.goto(mockUrl);
const inputArea = page.locator('#nickname');
await inputArea.fill('Pitt Dev');
await page.reload();
await expect(inputArea).toHaveValue('');
});
// เคสที่ 2: Strict Focus & Keyboard Events
test('2. ทดสอบความเข้มงวดเรื่อง Keyboard Focus บน Custom Component', async ({ page }) => {
await page.setContent(`
<html>
<body>
<div id="custom-select" tabindex="0" style="border:1px solid #ccc; padding:10px;">
Select Option
</div>
<ul id="options-list" style="display:none;">
<li id="opt-1">Option 1</li>
</ul>
<script>
const select = document.getElementById('custom-select');
select.addEventListener('focus', () => {
document.getElementById('options-list').style.display = 'block';
});
select.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') {
document.getElementById('opt-1').style.color = 'red';
}
});
</script>
</body>
</html>
`);
await page.keyboard.press('Tab');
await expect(page.locator('#options-list')).toBeVisible();
await page.keyboard.press('ArrowDown');
await expect(page.locator('#opt-1')).toHaveCSS('color', 'rgb(255, 0, 0)');
});
// เคสที่ 3: Built-in PDF Viewer / Document Detection
test('3. ทดสอบสกัดกั้นและตรวจจับการโหลดไฟล์รายงาน PDF', async ({ page }) => {
const mockOrigin = 'http://localhost:3000';
await page.route(mockOrigin, async (route) => {
await route.fulfill({
status: 200,
contentType: 'text/html',
body: `<a id="view-report" href="/files/mock-report.pdf">เปิดดูรายงาน PDF</a>`
});
});
// 🔥 จุดแก้ไข: เติม **/ นำหน้าพาทไฟล์ เพื่อให้ Playwright ดักจับแบบ Glob Pattern ได้สมบูรณ์ ไม่หลุดไปหาเน็ตจริง
await page.route('**/files/mock-report.pdf', async (route) => {
await route.fulfill({
status: 200,
contentType: 'application/pdf',
body: Buffer.from('%PDF-1.4 ... mock pdf content ...')
});
});
await page.goto(mockOrigin);
// ดักฟัง Event การตอบกลับของเน็ตเวิร์ก
const responsePromise = page.waitForResponse('**/files/mock-report.pdf');
await page.click('#view-report');
const response = await responsePromise;
expect(response.status()).toBe(200);
expect(response.headers()['content-type']).toContain('application/pdf');
});
});
คำสั่งสำหรับสั่งรันคำสั่งทดสอบ (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 ได้ทันที การันตีได้ว่าเว็บแอปพลิเคชันของคุณจะทำงานได้อย่างมั่นคง ปลอดภัย และแสดงผลได้อย่างถูกต้องในทุกหน้าจอของแฟนพันธุ์แท้บราวเซอร์หมาป่าไฟครับ!
อ่านเพิ่มเติม