Cài đặt, cấu hình và cấu trúc dự án Playwright

npm init playwright@latest

npx playwright install --with-deps

my-e2e/
├── tests/                  # test specs
│   ├── auth/
│   │   └── login.spec.ts
│   └── checkout.spec.ts
├── pages/                  # Page Object Models
│   └── login.page.ts
├── fixtures/               # custom fixtures
│   └── auth.fixture.ts
├── utils/                  # helper, data factory
├── playwright.config.ts    # cấu hình trung tâm
├── .env                    # biến môi trường (gitignore)
├── package.json
└── tsconfig.json

import { defineConfig, devices } from '@playwright/test';
import 'dotenv/config'; // nạp biến từ .env

export default defineConfig({
  testDir: './tests',
  // Chạy các test trong cùng một file song song
  fullyParallel: true,
  // Cấm test.only lọt lên CI (tránh vô tình bỏ qua test khác)
  forbidOnly: !!process.env.CI,
  // Số lần retry: 2 trên CI, 0 ở local
  retries: process.env.CI ? 2 : 0,
  // Số worker song song
  workers: process.env.CI ? 4 : undefined,
  // Reporter: HTML để xem, list để theo dõi terminal
  reporter: [['html'], ['list']],

  // Cấu hình mặc định áp cho mọi test
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    // Chỉ giữ trace khi retry lần đầu thất bại — cân bằng dung lượng & hữu ích
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

  // Mỗi "project" = một cấu hình trình duyệt/thiết bị
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    { name: 'mobile',   use: { ...devices['Pixel 7'] } },
  ],

  // Tự khởi động dev server trước khi chạy test
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

await page.goto('/login');     // → http://localhost:3000/login
await page.goto('/dashboard'); // → http://localhost:3000/dashboard

# .env (gitignore file này!)
BASE_URL=https://staging.myapp.com
TEST_USER=qa@myapp.com
TEST_PASS=secret

BASE_URL=https://prod.myapp.com npx playwright test

# Chạy toàn bộ
npx playwright test

# Chỉ một file / một project / một test theo tên
npx playwright test tests/auth/login.spec.ts
npx playwright test --project=chromium
npx playwright test -g "đăng nhập thành công"

# Chế độ UI tương tác (rất nên dùng khi viết test)
npx playwright test --ui

# Chế độ có giao diện trình duyệt (không headless)
npx playwright test --headed

# Mở report HTML sau khi chạy
npx playwright show-report

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "baseUrl": ".",
    "paths": { "@pages/*": ["pages/*"], "@fixtures/*": ["fixtures/*"] }
  }
}