# Playwright คืออะไร? คู่มือ End-to-End Testing สำหรับ Next.js และ Laravel ปี 2026
ปัญหาหนึ่งที่นักพัฒนา SME พบบ่อยที่สุดคือ "แอปทำงานได้ดีในเครื่อง dev แต่พอ deploy จริงก็พัง" ปัญหานี้มักเกิดจากการขาด End-to-End (E2E) Testing ที่ดี — และ Playwright คือคำตอบที่ Microsoft พัฒนาขึ้นมาแก้ปัญหานี้โดยเฉพาะ
Playwright คือ framework สำหรับ E2E Testing ที่ได้รับความนิยมสูงสุดในปี 2026 ด้วยความสามารถที่ครอบคลุมทั้ง Chromium, Firefox, และ WebKit ในคำสั่งเดียว รองรับ TypeScript อย่างเต็มรูปแบบ และมี auto-wait mechanism ที่ช่วยลด flaky tests ได้อย่างมาก
บทความนี้จะพาคุณตั้งแต่ "Playwright คืออะไร" ไปจนถึงการตั้งค่า, เขียน test จริง, และ integrate กับ CI/CD pipeline สำหรับ Next.js และ Laravel
Playwright คืออะไร? และทำไมถึงดีกว่า Selenium?
Playwright เป็น open-source testing framework จาก Microsoft ที่ออกแบบมาสำหรับทดสอบ web applications แบบ end-to-end มีจุดเด่นที่แตกต่างจากเครื่องมือรุ่นก่อนอย่าง Selenium และ Cypress อย่างชัดเจน
| Feature | Playwright | Cypress | Selenium |
|---------|-----------|---------|---------|
| Cross-browser | ✅ Chromium/Firefox/WebKit | ❌ Chromium only | ✅ แต่ config ยาก |
| Auto-wait | ✅ Built-in | ✅ Built-in | ❌ Manual |
| TypeScript | ✅ First-class | ✅ | ⚠️ Limited |
| Parallel Tests | ✅ Native | ⚠️ Paid feature | ✅ |
| Mobile Emulation | ✅ | ⚠️ | ⚠️ |
| Speed | 🚀 เร็วมาก | ⚡ เร็ว | 🐢 ช้า |
Playwright แก้ปัญหา "flaky tests" ด้วย smart waiting ที่รอ element พร้อมจริงก่อน action โดยอัตโนมัติ ทำให้ tests เสถียรกว่ามาก
ติดตั้ง Playwright สำหรับ Next.js
ขั้นตอนที่ 1: ติดตั้ง Playwright
```bash
# สำหรับ Next.js project ที่มีอยู่แล้ว
npm init playwright@latest
# เลือก options:
# - TypeScript: Yes
# - tests folder: e2e
# - GitHub Actions: Yes (แนะนำ)
# - Install browsers: Yes
```
ขั้นตอนที่ 2: ตั้งค่า playwright.config.ts
```typescript
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'Mobile Safari', use: { ...devices['iPhone 14'] } },
],
webServer: {
command: 'npm run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
```
ขั้นตอนที่ 3: เขียน E2E Test แรก
```typescript
// e2e/homepage.spec.ts
import { test, expect } from '@playwright/test';
test.describe('หน้าแรกของเว็บไซต์', () => {
test('โหลดหน้าแรกสำเร็จ', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/ADS FIT/);
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
});
test('ฟอร์มติดต่อทำงานได้', async ({ page }) => {
await page.goto('/contact');
await page.fill('input[name="name"]', 'ทดสอบ ระบบ');
await page.fill('input[name="email"]', 'test@example.com');
await page.fill('textarea[name="message"]', 'ทดสอบการส่งฟอร์ม');
await page.click('button[type="submit"]');
await expect(page.getByText('ส่งข้อความสำเร็จ')).toBeVisible({ timeout: 5000 });
});
});
```
ใช้ Playwright กับ Laravel Backend
สำหรับโปรเจกต์ที่มี Laravel เป็น backend, Playwright ทำงานร่วมกับ frontend ที่ consume API ได้เป็นอย่างดี
```typescript
// e2e/auth.spec.ts - ทดสอบ Login Flow
import { test, expect } from '@playwright/test';
test('ระบบ Login ทำงานได้ถูกต้อง', async ({ page }) => {
await page.goto('/login');
await page.fill('input[name="email"]', 'admin@test.com');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
await expect(page.getByText('ยินดีต้อนรับ')).toBeVisible();
});
test('แสดง error เมื่อ login ผิด', async ({ page }) => {
await page.goto('/login');
await page.fill('input[name="email"]', 'wrong@test.com');
await page.fill('input[name="password"]', 'wrongpass');
await page.click('button[type="submit"]');
await expect(page.getByText('อีเมลหรือรหัสผ่านไม่ถูกต้อง')).toBeVisible();
});
```
Integrate กับ GitHub Actions CI/CD
```yaml
# .github/workflows/playwright.yml
name: Playwright Tests
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
with:
node-version: 20
run: npm ci
run: npx playwright install --with-deps
run: npx playwright test
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
```
Page Object Model (POM) สำหรับโปรเจกต์ใหญ่
Page Object Model ช่วยจัดระเบียบ test code และ reuse locators ได้ง่ายขึ้น
```typescript
// e2e/pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';
export class LoginPage {
readonly page: Page;
readonly emailInput: Locator;
readonly passwordInput: Locator;
readonly submitButton: Locator;
constructor(page: Page) {
this.page = page;
this.emailInput = page.locator('input[name="email"]');
this.passwordInput = page.locator('input[name="password"]');
this.submitButton = page.locator('button[type="submit"]');
}
async goto() {
await this.page.goto('/login');
}
async login(email: string, password: string) {
await this.emailInput.fill(email);
await this.passwordInput.fill(password);
await this.submitButton.click();
}
}
```
Best Practices สำหรับ Playwright ใน Production
สรุป
Playwright คือ E2E Testing tool ที่ดีที่สุดในปี 2026 สำหรับโปรเจกต์ Next.js และ Laravel การลงทุนเวลาตั้งค่าและเขียน tests ตั้งแต่ต้นจะช่วยประหยัดเวลา debug และลด bug ในระยะยาวได้มาก
เริ่มต้นจาก happy path tests ก่อน เช่น login, ฟอร์มสำคัญ, และ payment flow แล้วค่อยขยายไปยัง edge cases และ cross-browser testing เมื่อโปรเจกต์เติบโตขึ้น
ต้องการคำปรึกษาเรื่องการวางระบบ Testing หรือพัฒนาระบบ Web Application ที่มีคุณภาพ? ทีม ADS FIT พร้อมช่วยเหลือตั้งแต่การออกแบบ Architecture ไปจนถึงการ Deploy จริง [ติดต่อเราได้เลย](/contact)