[Playwright Typescript] Bài18 - TestOptions: Trang bị 'Balo Hành Trang' và Vũ khí cho Test Runner

📝 Bước 1: Chuẩn bị File Test (Chung cho cả 4 trường hợp)

Bạn tạo file tests/video-demo.spec.ts.

Trong bài này, mình cố tình code để có thể DỄ DÀNG CHỈNH PASS/FAIL (bằng cách comment/uncomment dòng code cuối).

import { test, expect } from '@playwright/test';

test('Demo Video Modes trên CRM Anh Tester', async ({ page }) => {
  // 1. Vào trang Login
  await page.goto('https://crm.anhtester.com/admin/authentication');

  // 2. Đăng nhập
  await page.fill('input[name="email"]', 'admin@example.com');
  await page.fill('input[name="password"]', '123456');
  await page.click('button[type="submit"]');

  // 3. Chờ vào Dashboard
  await page.waitForURL(/.*admin/);
  console.log('✅ Đã vào Dashboard!');

  // --- QUYẾT ĐỊNH SỐ PHẬN PASS HAY FAIL Ở ĐÂY ---
  
  // Trường hợp PASS: Tiêu đề đúng
  await expect(page).toHaveTitle(/Dashboard/); 

  // Trường hợp FAIL (Mở comment dòng dưới để test Fail)
  // await expect(page).toHaveTitle('Tiêu đề sai bét nhè'); 
});

⚙️ Bước 2: Thử nghiệm 4 Cấu hình (Config)

Bạn mở file playwright.config.ts và thay đổi phần use tương ứng với từng trường hợp dưới đây. Mình đã kẹp sẵn cả Trace và Screenshot như bạn yêu cầu.

1️⃣ Trường hợp: video: 'off' (Tiết kiệm nhất)

Dành cho lúc chạy hàng nghìn test API hoặc test ổn định.

// playwright.config.ts
export default defineConfig({
  use: {
    // 📸 Ảnh & Trace: Vẫn giữ lại nếu Fail để debug
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    
    // 🎥 Video: TẮT HẾT
    video: 'off', 
  },
});

👉 Kết quả:

• Nếu Test Pass: Thư mục sạch trơn.

• Nếu Test Fail: Có Ảnh + Trace. KHÔNG CÓ VIDEO.

2️⃣ Trường hợp: video: 'on' (Đầy đủ nhất)

Dành cho UAT, cần bằng chứng gửi khách hàng.

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure', // Ảnh thì tiết kiệm
    
    // 🎥 Video: QUAY TẤT CẢ (Lúc nào cũng lưu)
    video: {
      mode: 'on',
      size: { width: 1920, height: 1080 } // Ép nét căng
    }
  },
});

👉 Kết quả:

• Nếu Test Pass: CÓ VIDEO (quay cảnh login thành công) + Không có ảnh/trace.

• Nếu Test Fail: CÓ VIDEO (quay cảnh bị lỗi) + Có Ảnh + Có Trace.

3️⃣ Trường hợp: video: 'retain-on-failure' (Khuyên dùng 🏆)

Cân bằng nhất. Chỉ lưu video khi cần thiết.

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',

    // 🎥 Video: CHỈ GIỮ LẠI NẾU FAIL
    video: {
      mode: 'retain-on-failure',
      size: { width: 1920, height: 1080 }
    }
  },
});

👉 Kết quả:

• Nếu Test Pass: Thư mục sạch trơn (Video quay xong tự xóa).

• Nếu Test Fail: CÓ VIDEO + Có Ảnh + Có Trace.

4️⃣ Trường hợp: video: 'on-first-retry' (Tối ưu hiệu năng)

Dành cho hệ thống CI/CD lớn. Lần đầu chạy nhanh, nếu lỗi chạy lại mới quay.

// playwright.config.ts
export default defineConfig({
  // ⚠️ BẮT BUỘC: Phải cho phép chạy lại (Retry) ít nhất 1 lần
  retries: 1, 

  use: {
    trace: 'on-first-retry',      // Trace cũng chỉ bật khi retry
    screenshot: 'only-on-failure',

    // 🎥 Video: CHỈ QUAY KHI RETRY
    video: {
      mode: 'on-first-retry',
      size: { width: 1920, height: 1080 }
    }
  },
});

👉 Kết quả:

• Lần 1 (Chạy Fail): KHÔNG CÓ VIDEO (Chạy rất nhanh).

• Lần 2 (Tự động chạy lại do Fail): CÓ VIDEO + Có Trace.
  
  
  

  Cái on-first-retry này "khó nhằn" ở chỗ: Làm sao để giả lập tình huống "Chạy lần 1 chết, Chạy lần 2 sống" (Flaky Test) để mà kiểm chứng?

  Chứ nếu test cứ chạy là Pass, hoặc cứ chạy là Fail mãi thì khó thấy tác dụng của nó.

  Đừng lo, mình có "Tuyệt chiêu testInfo.retry". Mình sẽ viết một đoạn code "Tự sát ở lần 1, Hồi sinh ở lần 2" để ép Playwright phải quay video cho bạn xem.

  Làm theo đúng 3 bước này nhé:

  ⚙️ Bước 1: Cấu hình playwright.config.ts

  Bắt buộc phải bật retries lên thì chế độ này mới hoạt động như trên

  
  🧪 Bước 2: Viết Code "Giả vờ Flaky"

  Tạo file tests/retry-demo.spec.ts.

  Ta dùng logic: "Nếu đây là lần chạy đầu tiên (retry === 0) -> Ném lỗi Fail. Nếu là lần chạy lại (retry === 1) -> Cho chạy tiếp."

   

  import { test, expect } from '@playwright/test';
  
  test('Demo Video chỉ quay khi Retry', async ({ page }, testInfo) => {
    
    console.log(`🔄 Đang chạy lần thứ: ${testInfo.retry + 1} (Retry Index: ${testInfo.retry})`);
  
    // 1. Vào trang Login
    await page.goto('/admin/authentication');
    await page.fill('input[name="email"]', 'admin@example.com');
    await page.fill('input[name="password"]', '123456');
  
    // ============== KỊCH BẢN GIẢ LẬP =================
    // Nếu là lần chạy đầu tiên (retry = 0)
    if (testInfo.retry === 0) {
        console.log('💥 Lần 1: Cố tình đánh Fail để kích hoạt Retry...');
        
        // Giả vờ expect sai để gây lỗi
        // Playwright thấy lỗi -> Sẽ hủy lần này (KHÔNG LƯU VIDEO) -> Tự động Retry
        expect(true).toBe(false); 
    }
    
    // ============== LẦN CHẠY THỨ 2 ===================
    // Nếu code chạy xuống được đây, nghĩa là đang ở lần Retry (retry = 1)
    console.log('✅ Lần 2: Đã Retry! Lúc này Video đang được quay...');
    
    await page.click('button[type="submit"]');
    await expect(page).toHaveTitle(/Dashboard/);
  });

  🎬 Bước 3: Chạy và Xem Kết Quả (Quan trọng)

  Chạy lệnh test:

  npx playwright test tests/retry-demo.spec.ts
  

  Bạn sẽ thấy console báo kiểu:

  1. x Demo Video... (Lần 1 Fail)

  2. Retry #1 (Playwright tự chạy lại)

  3. Passed (Lần 2 Pass)

  Sau đó mở Report:

  npx playwright show-report
  

  👀 Cách soi trong Report:

  Khi mở bài test đó ra, bạn sẽ thấy ở trên cùng có các Tabs (Tab con):

  1. Tab Attempt #1 (Lần thử 1):

     • Trạng thái: Failed.

     • Kéo xuống dưới: KHÔNG CÓ VIDEO. (Đúng như cam kết, chạy lần đầu fail thì kệ nó, cho nhanh).

  2. Tab Retry #1 (Lần thử lại):

     • Trạng thái: Passed.

     • Kéo xuống dưới: CÓ VIDEO xuất hiện! 🎥

  🎯 Ý nghĩa thực tế

  Bạn thấy đấy, với chế độ này:

  • Nếu hệ thống ổn định (chạy phát ăn ngay), bạn tiết kiệm được thời gian quay và dung lượng ổ cứng cho lần 1.

  • Chỉ khi nào mạng lag, server chập chờn khiến test phải Retry, Playwright mới "bật máy quay" để bạn xem lại: "Tại sao lần 2 lại chạy được? Có phải do mạng không?".

   

🧐 Cách soi kết quả (Trace + Screenshot + Video) chung

Sau khi chạy xong test với lệnh: npx playwright test

Bạn mở báo cáo lên:

npx playwright show-report

Bạn sẽ thấy giao diện "3 trong 1" cực kỳ xịn xò khi test bị Fail:

1. Errors: Log lỗi chi tiết (text).

2. Screenshots: Ảnh chụp ngay lúc Fail (do screenshot: 'only-on-failure').

3. Video: Trình phát video nằm ở cuối (do video: 'retain-on-failure').

4. Traces: Biểu tượng cái icon "mạch điện" hoặc tab Trace. Bấm vào đó, bạn sẽ tua lại được từng cú click chuột, từng API call.
   
   

💡 Lời khuyên cuối cùng cho bạn

Khi mới học hoặc làm dự án cá nhân, bạn hãy dùng cấu hình số 3 (retain-on-failure) cho tất cả (Video, Trace, Screenshot). Nó giúp bạn không bao giờ bỏ lỡ khoảnh khắc lỗi mà ổ cứng vẫn sạch sẽ.

Phần 3: ignoreHTTPSErrors là gì?

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    baseURL: 'https://staging.crm.anhtester.com', // Server test hay bị lỗi SSL
    
    // 👇 BẬT CÁI NÀY LÊN
    ignoreHTTPSErrors: true, 
  },
});​

Phần 4: Headless là gì?

// playwright.config.ts
use: {
  headless: false, // Luôn luôn hiện hình
}

npx playwright test --headed

# Hoặc cách này (Vừa bật giao diện, vừa bật sẵn Inspector để Debug)
npx playwright test --debug

launchOptions là gì?

Nếu use là cài đặt cho "Trang web" (Website), thì launchOptions là cài đặt cho chính "Phần mềm Trình duyệt" (File .exe của Chrome/Edge).

Nó quy định trạng thái của trình duyệt ngay tại thời điểm bạn click đúp chuột mở nó lên:

• Mở lên có chạy ngầm không?

• Mở lên có bật sẵn F12 không?

• Mở lên chạy nhanh hay chạy chậm?

• Dùng Chrome xịn hay Chromium lõi?

Viết nó ở đâu trong Config?

Nó nằm lồng bên trong khối use của file playwright.config.ts.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    baseURL: 'https://crm.anhtester.com',
    
    // 👇 NÓ NẰM Ở ĐÂY
    launchOptions: {
      // Các lệnh điều khiển trình duyệt nằm trong này
      slowMo: 500,
      devtools: true,
    },
  },
});

Top 4 cấu hình launchOptions cơ bản nhất

Đây là những món "đồ chơi" bạn cần biết để điều khiển trình duyệt theo ý muốn:

🐢 A. slowMo (Slow Motion - Quay chậm)

Mặc định, Robot chạy siêu nhanh (mắt thường không nhìn kịp). slowMo giúp kìm hãm con Robot lại.

• Giá trị: Số mili-giây (ms).

• Tác dụng: Giúp bạn debug, nhìn rõ từng cú click, từng ký tự được gõ. Cực kỳ hữu ích khi demo sản phẩm cho sếp/khách hàng xem.

launchOptions: {
  slowMo: 1000, // Chậm lại 1 giây giữa mỗi hành động
}

🛠 B. devtools (Developer Tools)

Bình thường khi trình duyệt mở lên, bạn phải bấm F12 thủ công để soi lỗi. Option này tự động làm việc đó.

• Giá trị: true / false.

• Tác dụng: Tự động bật cửa sổ Inspect Element (F12) ngay khi trình duyệt khởi động.

launchOptions: {
  devtools: true, // Tự bật F12 để soi Console/Network
}

📺 C. channel (Chọn kênh trình duyệt)

Playwright mặc định dùng Chromium (phiên bản mã nguồn mở, nhẹ). Nhưng nếu bạn muốn test trên trình duyệt thực tế người dùng đang cài trên máy?

• Giá trị: 'chrome', 'msedge', 'chrome-beta', ...

• Tác dụng: Bắt Playwright dùng đúng file .exe của Google Chrome hoặc Microsoft Edge trên máy tính của bạn.

launchOptions: {
  channel: 'chrome', // Test trên Google Chrome thật
  // channel: 'msedge', // Test trên Microsoft Edge thật
}

🏳️ D. args (Arguments - Các lá cờ)

Đây là "túi thần kỳ". Nó chứa danh sách các câu lệnh khởi động (Command line switches) của chính Google Chrome. Playwright chỉ là người chuyển phát các lệnh này cho Chrome.

• Giá trị: Một mảng các chuỗi ký tự ['--cờ-1', '--cờ-2'].

• Ví dụ phổ biến:

  • '--start-maximized': (Sẽ học kỹ ở bài sau) Ra lệnh mở full màn hình.

  • '--incognito': Ép mở chế độ ẩn danh (giao diện tối).

  • '--disable-notifications': Tắt sạch các popup thông báo của trình duyệt.

launchOptions: {
  args: ['--start-maximized', '--disable-notifications']
}

Phân biệt use và launchOptions 

Rất nhiều bạn nhầm lẫn nhét cấu hình sai chỗ. Hãy nhớ bảng này:

🎯 Tóm lại

Khi bạn muốn can thiệp vào hành vi khởi động của trình duyệt (trước cả khi nó load trang web), hãy tìm đến launchOptions.

Phần 6: GIẢI MÃ BÀI TOÁN MAXIMIZE (WINDOW VS VIEWPORT)

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

export default defineConfig({
  use: {
    // --- BƯỚC 1: Cấu hình VỎ (Window) ---
    launchOptions: {
      // 'args' là nơi truyền lệnh cho file .exe của Chrome
      // '--start-maximized': Lệnh của Google Chrome để mở full màn hình
      args: ['--start-maximized'] 
    },

    // --- BƯỚC 2: Cấu hình RUỘT (Viewport) ---
    // viewport: null nghĩa là "Hủy bỏ kích thước mặc định".
    // "Cái vỏ to bao nhiêu thì cái ruột giãn ra bấy nhiêu".
    viewport: null, 

    // (Tùy chọn) BƯỚC 3: Giữ độ nét cho màn hình xịn (Retina/2K)
    // Xóa bỏ tỷ lệ scale mặc định để hình ảnh nét căng
    deviceScaleFactor: undefined,
  },
});

import { test } from '@playwright/test';

test('Kiểm tra kích thước thật sự (Viewport vs Window)', async ({ page }) => {
  // 1. Vào đại một trang nào đó để trình duyệt khởi tạo xong
  await page.goto('https://crm.anhtester.com/admin/authentication');

  // 2. Dùng page.evaluate để chạy lệnh JS bên trong trình duyệt
  // Đây là cách duy nhất để hỏi Chrome: "Mày đang to bao nhiêu?"
  const sizes = await page.evaluate(() => {
    return {
      // 1. Viewport: Kích thước phần nội dung web (Cái quan trọng nhất)
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      
      // 2. Window: Kích thước tổng thể cửa sổ (Bao gồm thanh địa chỉ, viền...)
      window: {
        width: window.outerWidth,
        height: window.outerHeight
      },
      
      // 3. Screen: Kích thước màn hình vật lý (Monitor của bạn hoặc Server)
      screen: {
        width: window.screen.width,
        height: window.screen.height
      }
    };
  });

  // 3. In ra Console để soi
  console.log('--------------------------------------------------');
  console.log('🖥️  SCREEN (Màn hình):   ', `${sizes.screen.width} x ${sizes.screen.height}`);
  console.log('🪟 WINDOW (Cửa sổ):     ', `${sizes.window.width} x ${sizes.window.height}`);
  console.log('📄 VIEWPORT (Nội dung): ', `${sizes.viewport.width} x ${sizes.viewport.height}`);
  console.log('--------------------------------------------------');
  
  // Logic check nhanh cho bạn đỡ phải nhìn số
  if (sizes.viewport.width <= 800) {
    console.log('🚨 CẢNH BÁO: Viewport đang bé tí (Mặc định). Headless Mode có vấn đề!');
  } else {
    console.log('✅ Viewport to đẹp. Config ổn!');
  }
});

import { defineConfig } from '@playwright/test';

// Kiểm tra xem code đang chạy ở đâu?
// process.env.CI thường có sẵn trên Jenkins/GitHub Actions
const isCI = !!process.env.CI; 

export default defineConfig({
  use: {
    // 1. Logic Viewport
    // - Nếu CI: Set cứng 1920x1080 cho ổn định.
    // - Nếu Local: Set null để hưởng thụ Maximize.
    viewport: isCI ? { width: 1920, height: 1080 } : null,

    // 2. Logic Window
    launchOptions: {
      args: isCI 
        ? ['--window-size=1920,1080'] // CI: Giả lập cửa sổ to
        : ['--start-maximized']       // Local: Bung lụa hết cỡ
    },
  },
});

use: {
  ...devices['Desktop Chrome'], // 👈 THỦ PHẠM NẰM Ở ĐÂY
}

🎓 Phần 8: GIẢI MÃ ...devices['Desktop Chrome']


devices là cái gì?

Hãy tưởng tượng devices giống như một Cuốn từ điển khổng lồ (hoặc một cuốn Menu).

Trong cuốn từ điển này, đội ngũ Playwright đã viết sẵn thông số kỹ thuật chuẩn của hàng trăm loại thiết bị: Từ iPhone, Samsung, iPad cho đến Desktop.

Bạn có thể xem thử "ruột gan" của nó bằng cách giữ phím Ctrl + Click chuột trái vào chữ devices trong VS Code. Bạn sẽ thấy nó là một Object khổng lồ như thế này:

// Đây là code nguồn của Playwright (Minh họa)
const devices = {
  'Desktop Chrome': {
    browserName: 'chromium',
    viewport: { width: 1280, height: 720 },
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...',
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false,
  },
  'iPhone 13': {
    browserName: 'webkit',
    viewport: { width: 390, height: 844 },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)...',
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true,
  },
  // ... hàng trăm thiết bị khác
};

Toán tử ba chấm ... (Spread Syntax) là gì?

Trong JavaScript/TypeScript, dấu ... gọi là Spread Operator (Toán tử rải/bung).

Nó có tác dụng: "Lấy tất cả ruột gan bên trong cái túi kia, đổ ra bàn cho tôi".

Hay nói cách khác dễ hiểu hơn: Nó chính là lệnh COPY - PASTE.

Ví dụ minh họa:

Khi bạn viết:

use: {
  baseURL: 'https://crm.anhtester.com',
  ...devices['Desktop Chrome'], // 👈 Dòng thần thánh
}

Thì thực chất, Playwright sẽ hiểu (compile) thành như sau:

use: {
  baseURL: 'https://crm.anhtester.com',
  
  // 👇 Nó tự động PASTE toàn bộ đống ở trên vào đây:
  browserName: 'chromium',
  viewport: { width: 1280, height: 720 },
  userAgent: 'Mozilla/5.0 ...',
  deviceScaleFactor: 1,
  isMobile: false,
  // ...
}

👉 Tại sao phải viết ...?

Để cho code nó ngắn! Thay vì bạn phải tự tay gõ lại 5-6 dòng cấu hình (UserAgent, Viewport, BrowserName...), bạn chỉ cần gõ 1 dòng ...devices['Desktop Chrome'] là xong.

Phân tích browserName

Trong cái gói Desktop Chrome đó, có một thuộc tính quan trọng nhất là browserName.

Playwright chỉ có 3 "động cơ" (Engine) chính để chạy web:

1. chromium: Dùng để chạy Google Chrome, Microsoft Edge, Opera.

2. firefox: Dùng để chạy Mozilla Firefox.

3. webkit: Dùng để chạy Apple Safari.

Khi bạn chọn devices['Desktop Chrome'], bên trong nó đã được cài sẵn:

browserName: 'chromium'

⚠️ Sự nhầm lẫn tai hại: browserName vs channel

Rất nhiều bạn hỏi: "Tại sao browserName là 'chromium' mà nó lại gọi là 'Desktop Chrome'? Sao không phải browserName là 'chrome'?"

• browserName: 'chromium': Nghĩa là dùng MÃ NGUỒN MỞ Chromium để chạy test. (Đây là cái trình duyệt mà Playwright tự tải về, không phải Google Chrome xịn bạn cài trên máy).

• Tên gọi 'Desktop Chrome': Đây chỉ là cái TÊN GỌI (Label) cho bộ cấu hình đó thôi. Nó ám chỉ: "Đây là cấu hình giả lập giống như Chrome trên máy tính (Màn hình 1280x720, UserAgent của Chrome)".

Nếu bạn muốn chạy bằng Google Chrome thật trên máy tính, bạn phải thêm dòng channel: 'chrome' (như bài launchOptions mình đã dạy).

Tại sao lại viết theo kiểu Config từng Project?

Thường bạn sẽ thấy đoạn code này nằm trong mảng projects:

// playwright.config.ts
export default defineConfig({
  projects: [
    // Project 1: Giả lập Desktop Chrome
    {
      name: 'Chrome PC',
      use: { 
        ...devices['Desktop Chrome'], // Bung cấu hình Chrome ra
        // Bạn có thể ghi đè (Override) nếu thích:
        viewport: { width: 1920, height: 1080 } 
      },
    },

    // Project 2: Giả lập iPhone 13
    {
      name: 'iPhone 13',
      use: { 
        ...devices['iPhone 13'], // Bung cấu hình iPhone ra
        // Tự động có: browserName: webkit, isMobile: true, màn hình bé...
      },
    },
  ],
});

Lợi ích tuyệt đối:

1. Chuẩn hóa: Bạn không cần nhớ iPhone 13 màn hình rộng bao nhiêu pixel. Playwright nhớ hộ bạn rồi.

2. User Agent: Đây là cái quan trọng nhất. Khi dùng ...devices['iPhone 13'], Playwright tự đổi User Agent thành iPhone. Server sẽ tưởng bạn là điện thoại thật và trả về giao diện mobile.

3. Ghi đè linh hoạt: Bạn dùng ... để lấy cấu hình gốc, sau đó viết thêm dòng bên dưới để sửa lại những gì bạn muốn (ví dụ sửa lại viewport).

🎯 Tóm lại

1. devices: Là cái kho chứa cấu hình mẫu.

2. ['Desktop Chrome']: Là tên một bộ cấu hình trong kho.

3. ... (Spread): Là lệnh Copy toàn bộ thuộc tính của bộ cấu hình đó dán vào use.

4. browserName: Là cái lõi trình duyệt (chromium, firefox, webkit) được định nghĩa sẵn trong bộ cấu hình đó.
   
   
   

Để thấy rõ sự khác biệt một trời một vực giữa việc chỉ khai báo browserName (trần trụi) và dùng ...devices (full đồ), chúng ta sẽ làm một bài test so sánh trực tiếp.

Chúng ta sẽ tạo 2 Projects trong config:

1. Project "Trần trụi": Chỉ set browserName: 'chromium'.

2. Project "Full Giáp": Dùng ...devices['Desktop Chrome'].
   
   

📝 Bước 1: File Config (playwright.config.ts)

Bạn copy đoạn này vào file config. Chúng ta định nghĩa 2 môi trường chạy khác nhau.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // Tắt chạy song song để log in ra thứ tự cho dễ nhìn
  fullyParallel: false, 
  workers: 1,

  projects: [
    // 🔴 CASE 1: Cấu hình "Nhà nghèo" (Chỉ có browserName)
    {
      name: '1. Only BrowserName',
      use: {
        browserName: 'chromium', 
        // Không có viewport, không có UserAgent xịn...
      },
    },

    // 🟢 CASE 2: Cấu hình "Đại gia" (Dùng gói devices có sẵn)
    {
      name: '2. Use Devices Standard',
      use: {
        ...devices['Desktop Chrome'], // Bung lụa toàn bộ cấu hình chuẩn ra
      },
    },
    
    // 🟣 CASE 3: Bonus thêm iPhone để thấy sự biến hình
    {
      name: '3. Use iPhone 13',
      use: {
        ...devices['iPhone 13'], 
      },
    },
  ],
});

📝 Bước 2: File Test soi thông tin (tests/check-device.spec.ts)

Chúng ta sẽ dùng page.evaluate() để moi móc thông tin nội tạng của trình duyệt ra in.

import { test } from '@playwright/test';

test('Soi cấu hình Browser', async ({ page }, testInfo) => {
  // Lấy thông tin thực tế từ trình duyệt
  const info = await page.evaluate(() => {
    return {
      userAgent: navigator.userAgent, // Căn cước công dân của trình duyệt
      viewport: { 
        width: window.innerWidth, 
        height: window.innerHeight 
      },
      pixelRatio: window.devicePixelRatio, // Độ nét màn hình
      platform: navigator.platform,        // Hệ điều hành nó nhận diện
      isMobile: navigator.maxTouchPoints > 0 // Có phải màn cảm ứng không?
    };
  });

  console.log(`\n==================================================`);
  console.log(`🚀 PROJECT: ${testInfo.project.name}`);
  console.log(`==================================================`);
  console.log(`- 🆔 User Agent:  ${info.userAgent}`);
  console.log(`- 📏 Viewport:    ${info.viewport.width} x ${info.viewport.height}`);
  console.log(`- 📱 Is Mobile?:  ${info.isMobile}`);
  console.log(`- 🖥️ Platform:    ${info.platform}`);
  console.log(`- ✨ Pixel Ratio: ${info.pixelRatio}`);
  console.log(`\n`);
});

🚀 Bước 3: Chạy và Xem Kết Quả

Bạn chạy lệnh:

npx playwright test tests/check-device.spec.ts

📊 Phân tích kết quả (Sự khác biệt)

Dưới đây là kết quả bạn sẽ thấy (mình phân tích sẵn):

🔴 Case 1: Only BrowserName

Playwright dùng cấu hình mặc định (Fallback).

• User Agent: Thường chứa chữ HeadlessChrome (rất dễ bị các trang web chặn vì biết là bot).

• Viewport: Mặc định là 1280 x 720.

• Is Mobile: false.

• Platform: Nhận theo máy thật của bạn (ví dụ Win32).

🟢 Case 2: Use Devices Standard

Playwright áp dụng cấu hình chuẩn của Google Chrome.

• User Agent: Giống hệt Chrome thật (Mozilla/5.0 ... Chrome/118...). Rất khó bị chặn.

• Viewport: 1280 x 720 (Chuẩn Desktop Chrome mà Playwright quy định).

• Is Mobile: false.

🟣 Case 3: Use iPhone 13 (Sự biến hình rõ rệt)

• User Agent: Có chữ iPhone; CPU iPhone OS 15.... Web server nhìn thấy cái này sẽ trả về giao diện Mobile.

• Viewport: 390 x 664 (Bé tí tẹo như điện thoại thật).

• Is Mobile: true (Màn hình cảm ứng).

• Pixel Ratio: 3 (Màn hình Retina siêu nét).

🎯 Kết luận

Câu lệnh ...devices['Desktop Chrome'] không chỉ set browserName. Nó âm thầm làm 2 việc quan trọng:

1. Fake User Agent: Để trang web tin bạn là người dùng Chrome xịn, không phải Bot.

2. Set Viewport & Screen: Để giao diện hiển thị đúng chuẩn Desktop/Mobile.

👉 Lời khuyên: Luôn dùng ...devices[...], đừng bao giờ dùng browserName trần trụi trừ khi bạn đang config cái gì đó siêu đặc biệt.

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

export default defineConfig({
  // 👇 CẤU HÌNH VỊ TRÍ LƯU (Nằm ở ngoài use)
  outputDir: 'my-artifacts', // Đổi tên thư mục mặc định từ 'test-results' thành 'my-artifacts'

  use: {
    // Trong này chỉ cấu hình CÓ lưu hay KHÔNG (on/off)
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
});

# .gitignore
node_modules/
test-results/       <-- Thêm dòng này
playwright-report/  <-- Folder chứa báo cáo HTML
blob-report/