ในการทำ Automated Testing ปัญหาโลกแตกของนักพัฒนาและ QA คือ “เว็บรันบน Chrome ผ่าน แต่พอลูกค้าเปิดบน Safari แล้วพัง!” สมัยก่อนการทดสอบบน Safari เป็นเรื่องที่ยุ่งยากมาก เพราะต้องคอยจัดการกับ SafariDriver ให้ตรงเวอร์ชัน หรือต้องซื้อ Mac มาเปิดทดสอบเท่านั้น แต่เมื่อมี Playwright (Framework ระดับเทพจาก Microsoft) ชีวิตเราก็ง่ายขึ้นทันที เพราะเขามีตัวจัดการ WebKit (Engine เบื้องหลังของ Safari) มาให้ในตัว โดยที่เราไม่จำเป็นต้องติดตั้ง Plugin เสริมภายนอกเลย!
ทำไมต้องทดสอบ Safari ด้วย WebKit ของ Playwright?
- ไม่ต้องลง Plugin เพิ่ม: Playwright รองรับ WebKit มาตั้งแต่เกิด ไม่ต้องติดตั้ง Extension หรือ WebDriver แยกให้ปวดหัว
- รัน Safari บน Windows/Linux ได้: WebKit ของ Playwright ถูกพอร์ตให้ทำงานได้ทุก OS หมายความว่าคุณสามารถทดสอบพฤติกรรมของ Safari ได้ แม้จะไม่ได้ใช้ Mac
- เร็วและเบา: ด้วยระบบ Browser Context ทำให้สามารถเปิดแท็บ จำลองหน้าจอ iPhone หรือ iPad เพื่อทดสอบ Responsive บน Safari ได้อย่างรวดเร็ว
ขั้นตอนการตั้งค่าเพื่อรัน Test บน Safari
หากคุณมีโปรเจกต์ Playwright อยู่แล้ว (ถ้ายังไม่มี สามารถเริ่มด้วยคำสั่ง npm init playwright@latest) การสั่งให้รันบน Safari หรือ WebKit ทำได้ง่าย ๆ ผ่านไฟล์คอนฟิกหลัก
ตั้งค่าในไฟล์ playwright.config.ts (หรือ .js)
ในโฟลเดอร์โปรเจกต์ของคุณ ให้มองหาไฟล์คอนฟิก แล้วเปิดใช้งานโปรเจกต์ webkit ในส่วนของ projects ดังนี้ครับ
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
reporter: 'html',
use: {
// ตั้งค่าพื้นฐาน เช่น Base URL
screenshot: 'on',
},
/* กำหนด Browser ที่ต้องการทดสอบ */
projects: [
// 1. สำหรับทดสอบ Safari บน Desktop
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
// 2. สำหรับจำลอง Safari บน Mobile (iPhone 14)
{
name: 'Mobile Safari',
use: { ...devices['iPhone 14'] },
},
],
});
เขียน Code ทดสอบ (Example Test Script)
สร้างไฟล์ทดสอบไว้ที่ tests/safari-test.spec.ts เพื่อลองเช็กหน้าเว็บง่าย ๆ
import { test, expect } from '@playwright/test';
test.describe('Safari WebKit Specific Features', () => {
// เคสที่ 1: ตรวจสอบเรื่อง Case-Insensitive และขนาด Bounding Box (เวอร์ชันเสถียร ไม่พึ่งเว็บนอก)
test('1. ทดสอบการแสดงผลและตรวจจับปุ่มแบบ Case-Insensitive และยืดหยุ่นบน Safari', async ({ page }) => {
await page.setContent(`
<html>
<body>
<div style="padding: 20px;">
<a href="#info" style="text-transform: uppercase; display: inline-block; padding: 10px;">
More Information
</a>
</div>
</body>
</html>
`);
// ใช้ Regular Expression ค้นหาตัวอักษรโดยไม่สนพิมพ์เล็ก-พิมพ์ใหญ่
const moreInfoLink = page.getByRole('link', { name: /more information/i });
// ตรวจสอบความพร้อมในการมองเห็น และขนาดกล่องเรนเดอร์
await expect(moreInfoLink).toBeVisible();
const box = await moreInfoLink.boundingBox();
expect(box?.width).toBeGreaterThan(0);
expect(box?.height).toBeGreaterThan(0);
});
// เคสที่ 3: เก็บไว้เพราะเป็นพฤติกรรมเฉพาะทางของ WebKit Engine
test('2. ทดสอบมาตรฐานการแปลงรูปแบบวันที่ (Date Parsing) บน WebKit Engine', async ({ page }) => {
await page.setContent(`
<html>
<body>
<div id="date-output"></div>
<script>
try {
// ใช้ฟอร์มแมตที่ปลอดภัยสำหรับทุกเบราว์เซอร์รวมถึง WebKit (Safari จะไม่ชอบฟอร์มแมตแบบขีด -)
const targetDate = new Date('2026/06/09');
if (isNaN(targetDate.getTime())) {
document.getElementById('date-output').innerText = 'Error: Invalid Date';
} else {
document.getElementById('date-output').innerText = 'Year: ' + targetDate.getFullYear();
}
} catch (e) {
document.getElementById('date-output').innerText = 'Error: ' + e.message;
}
</script>
</body>
</html>
`);
const dateResult = page.locator('#date-output');
await expect(dateResult).toHaveText('Year: 2026');
});
});
วิธีสั่งรันคำสั่งทดสอบ (Run Command)
คุณสามารถเลือกเจาะจงรันเฉพาะบน Safari (WebKit) ได้ง่ายๆ ผ่าน Terminal ด้วยคำสั่งต่อไปนี้
- รันแบบเบื้องหลัง (Headless Mode)
npx playwright test --project=webkit - รันแบบเปิดหน้าจอ Browser ขึ้นมาดูด้วย (Headed Mode)
npx playwright test --project=webkit --headed - รันผ่าน UI Mode เพื่อ Debug แบบเรียลไทม์
npx playwright test --ui
สรุป
การทดสอบเว็บบน Apple Safari ไม่ใช่เรื่องน่ากลัวอีกต่อไปเมื่อใช้ Playwright เพราะทีมพัฒนาได้ฝัง WebKit เข้ามาเป็นหนึ่งใน Core Browser หลักเรียบร้อยแล้ว เขียนโค้ดเพียงครั้งเดียว ก็สามารถส่งไปรัน cross-browser ได้ทั้ง Chrome, Firefox และ Safari ช่วยลดโอกาสเกิดบั๊กบนหน้าจอ Apple Device ได้อย่างเหนียวแน่นครับ!
อ่านเพิ่มเติม