ถ้าพูดถึงเว็บบราวเซอร์ที่มีผู้ใช้งานสูงที่สุดในโลก แน่นอนว่าคำตอบคือ 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.describe('Chrome Specific Features', () => {
test('ทดสอบระบบจำลองพิกัด GPS (Geolocation) บน Chrome', async ({ context, page }) => {
const mockOrigin = 'http://localhost:3000';
await context.grantPermissions(['geolocation'], { origin: mockOrigin });
await context.setGeolocation({ latitude: 18.7883, longitude: 98.9853 });
await page.route(mockOrigin, async (route) => {
await route.fulfill({
status: 200,
contentType: 'text/html',
body: `
<html>
<body>
<h3>ระบบทดสอบพิกัด GPS</h3>
<button id="get-location">Where am I?</button>
<div id="result">
Latitude: <span id="latval"></span><br>
Longitude: <span id="longval"></span>
</div>
<script>
document.getElementById('get-location').addEventListener('click', () => {
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition((position) => {
document.getElementById('latval').innerText = position.coords.latitude;
document.getElementById('longval').innerText = position.coords.longitude;
});
});
</script>
</body>
</html>
`
});
});
await page.goto(mockOrigin);
await page.locator('#get-location').click();
await expect(page.locator('#latval')).toHaveText('18.7883', { timeout: 3000 });
await expect(page.locator('#longval')).toHaveText('98.9853', { timeout: 3000 });
});
});
คำสั่งสำหรับสั่งรันคำสั่งทดสอบ (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 จะทำงานร่วมกับบราวเซอร์ยอดฮิตของโลกตัวนี้ได้อย่างไร้รอยต่อและสมบูรณ์แบบที่สุดครับ!
อ่านเพิ่มเติม