Network: intercept, mock API và route

await page.route('**/api/products', async route => {
  // 3 lựa chọn chính:
  // route.fulfill()  → trả response giả, KHÔNG gọi server thật
  // route.continue() → cho đi tiếp (có thể sửa request)
  // route.abort()    → hủy request (giả lập lỗi mạng)
});

test('hiển thị danh sách sản phẩm', async ({ page }) => {
  await page.route('**/api/products', async route => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([
        { id: 1, name: 'iPhone 16', price: 25000000 },
        { id: 2, name: 'iPad Pro', price: 30000000 },
      ]),
    });
  });

  await page.goto('/shop');
  await expect(page.getByRole('listitem')).toHaveCount(2);
  await expect(page.getByText('iPhone 16')).toBeVisible();
});

await page.route('**/api/products', route =>
  route.fulfill({ path: 'fixtures/products.json' })
);

// Lỗi server 500
await page.route('**/api/checkout', route =>
  route.fulfill({ status: 500, body: 'Internal Server Error' })
);

// Lỗi mạng (mất kết nối)
await page.route('**/api/**', route => route.abort('failed'));

// Danh sách rỗng → test "empty state"
await page.route('**/api/orders', route =>
  route.fulfill({ status: 200, body: '[]' })
);

// Lỗi 401 → test logic logout/redirect
await page.route('**/api/me', route => route.fulfill({ status: 401 }));

test('hiển thị thông báo khi server lỗi', async ({ page }) => {
  await page.route('**/api/checkout', r => r.fulfill({ status: 500 }));
  await page.goto('/checkout');
  await page.getByRole('button', { name: 'Thanh toán' }).click();
  await expect(page.getByText('Có lỗi xảy ra, vui lòng thử lại')).toBeVisible();
});

// Sửa request trước khi gửi đi (thêm header, đổi body)
await page.route('**/api/search', async route => {
  const headers = { ...route.request().headers(), 'x-test': '1' };
  await route.continue({ headers });
});

// Lấy response thật rồi vá dữ liệu (fulfill với response gốc)
await page.route('**/api/user', async route => {
  const response = await route.fetch();      // gọi server thật
  const json = await response.json();
  json.role = 'admin';                        // ép quyền admin để test
  await route.fulfill({ response, json });
});

// Áp cho mọi page trong context (kể cả popup) — đặt một lần
await context.route('**/api/analytics', route => route.abort());

// Áp cho riêng một page
await page.route('**/api/x', handler);

// Gỡ route đã đăng ký
await page.unroute('**/api/products');

// Chỉ áp dụng một số lần rồi tự gỡ (vd: lần đầu lỗi, lần sau thành công)
let count = 0;
await page.route('**/api/data', route => {
  count++;
  if (count === 1) return route.fulfill({ status: 500 });
  return route.continue();
});

const reqPromise = page.waitForRequest('**/api/track');
await page.getByRole('button', { name: 'Mua' }).click();
const req = await reqPromise;
expect(req.method()).toBe('POST');
expect(req.postDataJSON()).toMatchObject({ event: 'purchase' });

// Ghi lần đầu
await page.routeFromHAR('hars/shop.har', { url: '**/api/**', update: true });
// Lần sau phát lại (không gọi server)
await page.routeFromHAR('hars/shop.har', { url: '**/api/**' });