GitHub Actions Setup สำหรับ Playwright

ใน local ทุกอย่างอาจ pass แต่:

• environment ต่างกัน (OS, Node version, screen size)
• ลืมรัน test ก่อน push
• test ต้องรันทุก PR อัตโนมัติ — ไม่ต้องพึ่งคน

CI = ด่านสุดท้ายก่อน code เข้า main

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 30

    steps:
      # 1. Checkout code
      - uses: actions/checkout@v4

      # 2. Setup Node.js
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      # 3. Install dependencies
      - name: Install dependencies
        run: npm ci

      # 4. Install Playwright browsers
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      # 5. Run tests
      - name: Run Playwright tests
        run: npx playwright test

      # 6. Upload report (always — pass or fail)
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 14

      # 7. Upload traces and screenshots (on failure only)
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: test-results
          path: test-results/
          retention-days: 7

Install Playwright Browsers

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

• --with-deps — ติดตั้ง OS dependencies ที่ browser ต้องการ (fonts, libraries)
• chromium — ติดตั้งเฉพาะ Chromium (เร็วกว่าติดตั้งทุก browser)
• ถ้าต้องการทุก browser: npx playwright install --with-deps

Upload Artifacts

- uses: actions/upload-artifact@v4
  if: always()        # ← upload ทั้ง pass และ fail
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 14  # เก็บ 14 วัน

• if: always() — upload แม้ test fail (สำคัญมาก ไม่งั้น fail แล้วไม่มี report)
• if: failure() — upload เฉพาะเมื่อ fail (ประหยัด storage)

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // CI-specific settings
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  forbidOnly: !!process.env.CI,  // fail ถ้ามี .only ใน CI

  reporter: [
    ['list'],
    ['html', { open: 'never' }],  // ไม่เปิด browser ใน CI
  ],

  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

สิ่งสำคัญ:

• forbidOnly: !!process.env.CI — ป้องกัน .only หลุดไป CI (จะ fail แทนที่จะรันแค่ test เดียว)
• retries: 2 — ใน CI ให้ retry เพราะ flaky tests อาจเกิดจาก environment
• open: 'never' — ไม่พยายามเปิด browser สำหรับ report ใน CI

# Cache Playwright browsers
- name: Cache Playwright browsers
  uses: actions/cache@v4
  id: playwright-cache
  with:
    path: ~/.cache/ms-playwright
    key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}

- name: Install Playwright Browsers
  if: steps.playwright-cache.outputs.cache-hit != 'true'
  run: npx playwright install --with-deps chromium

ประหยัดเวลา ~1-2 นาทีต่อ run (browser install ช้า)

- name: Run Playwright tests
  run: npx playwright test
  env:
    BASE_URL: http://localhost:3000
    API_TOKEN: ${{ secrets.TEST_API_TOKEN }}
    CI: true

• ใช้ secrets สำหรับค่าลับ (API keys, tokens)
• CI: true ถูกตั้งมาให้อัตโนมัติใน GitHub Actions