Test Organization Patterns

เมื่อ test suite โตจาก 10 เป็น 200+ tests:

• หา test ที่ต้องการไม่เจอ
• ไม่รู้ว่า test ไหนต้องรันก่อน deploy
• CI ช้าเพราะรันทุก test ทุกครั้ง
• test ที่ fail ไม่รู้ว่าเกี่ยวกับ feature ไหน

การจัดระเบียบดี = ทีมทำงานเร็วขึ้น

test.describe('Authentication', () => {

  test.describe('Login', () => {
    test('successful login with valid credentials', async ({ page }) => {
      // ...
    });

    test('shows error with invalid password', async ({ page }) => {
      // ...
    });

    test('redirects to dashboard after login', async ({ page }) => {
      // ...
    });
  });

  test.describe('Logout', () => {
    test('clears session on logout', async ({ page }) => {
      // ...
    });

    test('redirects to login page', async ({ page }) => {
      // ...
    });
  });

});

ผลลัพธ์ใน report:

Authentication > Login > successful login with valid credentials
Authentication > Login > shows error with invalid password
Authentication > Logout > clears session on logout

By Feature (แนะนำ)

tests/
├── auth/
│   ├── login.spec.ts
│   ├── logout.spec.ts
│   └── forgot-password.spec.ts
├── products/
│   ├── product-list.spec.ts
│   ├── product-detail.spec.ts
│   └── product-search.spec.ts
├── cart/
│   ├── add-to-cart.spec.ts
│   ├── update-quantity.spec.ts
│   └── checkout.spec.ts
└── admin/
    ├── user-management.spec.ts
    └── reports.spec.ts

By Page

tests/
├── login-page.spec.ts
├── dashboard-page.spec.ts
├── products-page.spec.ts
├── cart-page.spec.ts
└── admin-page.spec.ts

test.describe('Dashboard - Authenticated User', () => {

  test.beforeEach(async ({ page }) => {
    // login ก่อนทุก test
    await page.goto('/login');
    await page.locator('#email').fill('[email protected]');
    await page.locator('#password').fill('secret123');
    await page.locator('button[type="submit"]').click();
    await page.waitForURL('/dashboard');
  });

  test('displays welcome message', async ({ page }) => {
    await expect(page.locator('.welcome')).toBeVisible();
  });

  test('shows recent orders', async ({ page }) => {
    await expect(page.locator('.recent-orders')).toBeVisible();
  });

});

Playwright ใช้ tag ใน test title หรือ test.describe.configure:

// วิธีที่ 1: ใส่ tag ใน title
test('login with valid credentials @smoke', async ({ page }) => {
  // ...
});

test('login with expired token @regression', async ({ page }) => {
  // ...
});

// วิธีที่ 2: ใช้ tag option (Playwright 1.42+)
test('checkout flow', { tag: ['@smoke', '@critical'] }, async ({ page }) => {
  // ...
});

รัน test ตาม tag:

# รันเฉพาะ @smoke
npx playwright test --grep @smoke

# รันทุกอย่างยกเว้น @slow
npx playwright test --grep-invert @slow

# รัน @smoke และ @critical
npx playwright test --grep "@smoke|@critical"

แนะนำ tags:

• @smoke — test หลักที่ต้องผ่านก่อน deploy (5-10 ตัว)
• @regression — ครอบคลุมกว้าง รันรอบคืน
• @critical — business-critical flow เช่น payment
• @slow — test ที่ใช้เวลานาน ไม่ต้องรันทุก PR

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

export default defineConfig({
  fullyParallel: true,     // ทุก test รัน parallel
  workers: 4,               // ใช้ 4 workers

  projects: [
    {
      name: 'smoke',
      grep: /@smoke/,
      fullyParallel: true,
    },
    {
      name: 'regression',
      grep: /@regression/,
      fullyParallel: false,  // sequential สำหรับ tests ที่มี dependencies
    }
  ]
});

ข้อควรระวัง parallel:

• test แต่ละตัวต้อง independent — ไม่พึ่ง state ของ test อื่น
• ใช้ test.describe.serial() สำหรับ test ที่ต้องรันตามลำดับ

test.describe.serial('Order Flow', () => {
  test('step 1: add to cart', async ({ page }) => { /* ... */ });
  test('step 2: checkout', async ({ page }) => { /* ... */ });
  test('step 3: confirm payment', async ({ page }) => { /* ... */ });
});