Trace Viewer & UI Mode 2026: gỡ lỗi test như chuyên gia

1. Trace Viewer & UI Mode: bức tranh tổng quan

Trace Viewer là hộp đen của một test Playwright: nó ghi lại toàn bộ hành trình chạy — từng action, ảnh snapshot DOM trước và sau, network, console, source — để bạn mở ra và tua ngược thời gian mà không cần chạy lại. UI Mode là môi trường phát triển test tương tác, cho bạn xem cây test, live preview và chọn locator ngay trong trình duyệt. Kết hợp hai công cụ này, việc gỡ lỗi test chuyển từ 'đoán mò và console.log' sang 'nhìn thẳng vào bằng chứng'.

Điều khiến hai công cụ này thay đổi cách làm việc là chúng loại bỏ khâu tái hiện thủ công — thứ vốn tốn nhiều thời gian nhất khi gỡ lỗi. Trước đây, một test đỏ trên CI buộc bạn phải dựng lại môi trường, chạy đi chạy lại và hy vọng lỗi tái xuất; nay trace đã đóng gói sẵn hiện trường để bạn mở ra bất cứ lúc nào. Kết quả là chu trình chẩn đoán rút ngắn từ hàng giờ xuống còn vài phút, và quan trọng hơn, kết luận của bạn dựa trên dữ liệu thật thay vì suy đoán. Đó là bước nhảy về năng suất và cả về độ tin cậy của kết luận.

2. Chế độ retain-on-failure-and-retries

Ghi trace luôn tốn chi phí, nên chiến lược retention quyết định bạn có bằng chứng khi cần mà không làm chậm toàn bộ suite. Chế độ 'retain-on-failure-and-retries' là lựa chọn cân bằng nhất cho 2026: bản chạy đầu qua thì không giữ trace, nhưng nếu test fail hoặc phải retry, Playwright giữ lại trace của cả lần fail đầu tiên lẫn các lần retry. Nhờ vậy bạn có thể so sánh trực tiếp lần chạy hỏng với lần chạy đậu để tìm ra khác biệt gây flaky.

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

export default defineConfig({
  retries: 2,
  use: {
    // giữ trace khi FAIL và ở mọi lần RETRY -> so sánh pass vs fail
    trace: 'retain-on-failure-and-retries',
    // tương tự cho video/screenshot khi cần
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
  },
});

• 'off': không ghi — nhanh nhất, không có bằng chứng.
• 'on': ghi mọi lần — nặng, chỉ dùng khi điều tra sâu.
• 'on-first-retry': chỉ ghi ở retry đầu — nhẹ, hợp CI thường ngày.
• 'retain-on-failure-and-retries': giữ khi fail + mọi retry — tốt để so pass/fail.

Chọn đúng chế độ retention là bài toán cân bằng giữa chi phí và khả năng chẩn đoán. Ghi trace cho mọi lần chạy làm suite chậm và phình dung lượng artefact, nhất là với hàng nghìn test; ngược lại tắt hẳn thì khi lỗi xảy ra bạn trắng tay. retain-on-failure-and-retries đạt điểm cân bằng tối ưu vì nó chỉ tốn chi phí đúng lúc có vấn đề, và luôn giữ cả bản hỏng lẫn bản retry để đối chiếu. Đây là lý do nó trở thành khuyến nghị thực chiến cho các đội vận hành suite lớn trên CI năm 2026.

3. So sánh trace đậu và trace hỏng

Khi một test flaky, so sánh trace của lần đậu và lần hỏng là kỹ thuật gỡ lỗi mạnh nhất. Vì retain-on-failure-and-retries giữ cả hai, bạn mở song song hai trace và dò theo timeline: hành động nào chạy khác thứ tự, request nào trả status khác, thời điểm nào DOM chưa kịp cập nhật. Rất thường xuyên, khác biệt nằm ở một race condition — lần hỏng click nút trước khi API kịp resolve, còn lần đậu thì mạng nhanh hơn một nhịp.

# mở lần lượt hai trace để đối chiếu
npx playwright show-trace test-results/checkout-retry1/trace.zip   # hỏng
npx playwright show-trace test-results/checkout-retry2/trace.zip   # đậu

# hoặc kéo-thả file zip vào https://trace.playwright.dev