ถ้าพูดถึงเว็บบราวเซอร์ที่มีผู้ใช้งานสูงที่สุดในโลก แน่นอนว่าคำตอบคือ Google Chrome ดังนั้นในการทำ Automated Testing การันตีได้เลยว่า “Chrome” คือบราวเซอร์อันดับแรกที่ทีมพัฒนาและ QA ต้องทดสอบให้ผ่าน 100%
แม้ว่า Playwright จะมาพร้อมกับ Chromium (เอนจินโอเพนซอร์สที่เป็นฐานของ Chrome) ตั้งแต่แกะกล่อง แต่รู้หรือไม่ว่า Playwright ยังใจดีให้เราสามารถทดสอบกับ Google Chrome ตัวจริง (Channel: chrome) ที่อยู่บนเครื่องของเราได้ด้วย เพื่อความแม่นยำสูงสุดในการจำลองพฤติกรรมผู้ใช้จริง วันนี้เราจะมาเจาะลึกวิธีใช้งานกันครับ!
ทำไมต้องทดสอบบน Google Chrome ด้วย Playwright?
- ทดสอบสิทธิ์การใช้งานจริง (Commercial Features): Google Chrome มีฟีเจอร์บางอย่างที่ Chromium ไม่มี เช่น ระบบถอดรหัสวิดีโอ (Proprietary Codecs) หรือการผูกสิทธิ์บัญชี Google
- ไม่ต้องติดตั้ง Plugin ภายนอก: Playwright มีความสามารถระดับ Extension ในตัวเองอยู่แล้ว สามารถจัดการตำแหน่ง (Geolocation), สลับโหมด Dark/Light, หรือทดสอบ Network ความเร็วต่ำ (Throttling) ได้ทันที
- จำลองอุปกรณ์พกพาได้เนียนสนิท: สามารถจำลอง Chrome บนระบบปฏิบัติการ Android ได้อย่างง่ายดาย
วิธีตั้งค่าเปิดใช้งาน Google Chrome บน Playwright
เปิดไฟล์คอนฟิกหลักของคุณ (มักจะเป็น playwright.config.ts หรือ .js) และกำหนดค่าในส่วน projects เพื่อชี้เป้าไปที่ Google Chrome ตัวจริงดังนี้ครับ
ตั้งค่าในไฟล์ playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
reporter: 'html',
use: {
// บันทึกวิดีโอตอนทดสอบพังเพื่อเอาไว้เปิดดูย้อนหลัง
video: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
// 1. ทดสอบบน Google Chrome (เวอร์ชันเดียวกับที่ผู้ใช้ทั่วไปใช้)
{
name: 'Google Chrome',
use: {
...devices['Desktop Chrome'],
channel: 'chrome', // สั่งให้ Playwright รันบน Google Chrome ตัวจริง
},
},
// 2. จำลอง Chrome บน Mobile (เช่น Pixel 7)
{
name: 'Mobile Chrome',
use: { ...devices['Pixel 7'] },
},
],
});
เขียนสคริปต์ทดสอบฟีเจอร์เด็ดของ Chrome (Example Test Script)
สร้างไฟล์ทดสอบที่ tests/chrome-features.spec.ts เพื่อทดสอบเคสที่ต้องใช้ฟีเจอร์ขั้นสูง เช่น การให้สิทธิ์เข้าถึงพิกัด (Geolocation) และการจำลองระบบ Network
import { test, expect } from '@playwright/test';
test.use({
// จำลองว่าผู้ใช้อยู่ที่กรุงเทพฯ และให้สิทธิ์เข้าถึงตำแหน่งอัตโนมัติ
geolocation: { latitude: 13.7563, longitude: 100.5018 },
permissions: ['geolocation'],
});
test('ทดสอบฟีเจอร์ขั้นสูงบน Google Chrome', async ({ page, context }) => {
// 1. จำลองสถานการณ์เน็ตช้า (Network Throttling)
await context.route('**/*', async (route) => {
await new Promise(resolve => setTimeout(resolve, 500));
await route.continue();
});
// 2. เปิดหน้าเว็บตรวจสอบตำแหน่ง
await page.goto('https://browserleaks.com/geo');
// 3. ตรวจสอบพิกัดที่เราจำลองไว้ (อิงตาม Best Practices)
// ค้นหาแถวในตารางที่มีคำว่า Latitude และตรวจสอบค่าข้างใน
const latitudeRow = page.getByRole('row', { name: 'Latitude' });
await expect(latitudeRow).toBeVisible();
await expect(latitudeRow).toContainText('13.7563°');
});
คำสั่งสำหรับสั่งรันคำสั่งทดสอบ (Run Commands)
พิมพ์คำสั่งเหล่านี้ใน Terminal ของคุณเพื่อสั่งรันเทสเฉพาะเจาะจงบน Google Chrome
- รันแบบเบื้องหลังอย่างรวดเร็ว (Headless Mode)
npx playwright test --project="Google Chrome" - รันแบบเปิดหน้าจอ Chrome ขึ้นมาให้เห็นการทำงาน (Headed Mode)
npx playwright test --project="Google Chrome" --headed - เปิดเครื่องมือช่วยเขียนโค้ดและ Debug (Playwright Inspector)
npx playwright test --project="Google Chrome" --debug
สรุป
การสลับมารันบน Google Chrome ตัวจริง ผ่าน Playwright ทำได้ง่าย ๆ เพียงแค่เพิ่มบรรทัด channel: 'chrome' ในไฟล์คอนฟิกเท่านั้น ช่วยให้คุณมั่นใจได้ว่าระบบเว็บแอปพลิเคชัน ไม่ว่าจะเป็นระบบตัดจ่ายเงิน, ระบบสตรีมมิ่งวิดีโอ หรือระบบที่ต้องพึ่งพา Geolocation จะทำงานร่วมกับบราวเซอร์ยอดฮิตของโลกตัวนี้ได้อย่างไร้รอยต่อและสมบูรณ์แบบที่สุดครับ!
อ่านเพิ่มเติม