Wiki

← Tất cả bài wiki

Trace Viewer (Trình xem trace — phát lại toàn bộ hành trình test)

automationplaywright

Trace Viewer là công cụ 'quay ngược thời gian' của Playwright: mỗi action đều kèm DOM snapshot, screenshot, network request và console log tại đúng thời điểm chạy. Khi test fail trên CI mà local không reproduce được, file trace.zip chính là 'hộp đen' để debug mà không cần chạy lại.

Khái niệm & Bản chất

  • Trace là bản ghi toàn bộ vòng đời một lần chạy test: mọi action (goto, click, fill, expect...), DOM snapshot trước/sau, screenshot, network request/response, console log và cả source code.
  • Khác video hoàn toàn: video chỉ là hình ảnh thụ động, còn DOM snapshot trong trace tương tác được — inspect element, xem giá trị attribute, hover từng action để xem trang lúc đó trông thế nào.
  • Output là file trace.zip nằm trong test-results/<test-name>/; mở bằng npx playwright show-trace trace.zip hoặc kéo thả vào https://trace.playwright.dev.
  • Bản chất là time-travel debugging: thay vì đoán 'sao nó fail', bạn xem lại đúng trạng thái trang tại từng bước — đây là lý do Playwright debug mạnh hơn hẳn Selenium.

Cách hoạt động & API chính

  • Bật qua config: use: { trace: 'on' | 'off' | 'retain-on-failure' | 'on-first-retry' } — mỗi mode quyết định khi nào trace được ghi/giữ lại.
  • Bật thủ công quanh một đoạn code: await context.tracing.start({ screenshots: true, snapshots: true, sources: true }) rồi await context.tracing.stop({ path: 'trace.zip' }).
  • Giao diện Trace Viewer: timeline phía trên, danh sách Actions bên trái, DOM snapshot ở giữa, các tab Call / Console / Network / Source / Metadata bên phải và dưới.
  • Mỗi action cho xem: snapshot Before/After, locator đã resolve ra element nào, thời gian thực thi, và log auto-wait chi tiết (waiting for element to be visible, enabled...).
  • npx playwright show-trace mở viewer local; trong HTML report click icon trace cũng mở được trace của test đó.

Ví dụ & Cú pháp thực tế

  • Cấu hình khuyến nghị cho CI — chỉ ghi trace ở lần retry: ``ts // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ retries: 1, use: { trace: 'on-first-retry', // lần đầu fail → retry có full trace screenshot: 'only-on-failure', video: 'retain-on-failure', }, }); ``
  • Ghi trace thủ công quanh đoạn nghi ngờ: ``ts test('debug checkout', async ({ context, page }) => { await context.tracing.start({ screenshots: true, snapshots: true }); await page.goto('/checkout'); await page.getByLabel('SĐT').fill('0901234567'); // ... các bước muốn soi await context.tracing.stop({ path: 'checkout-trace.zip' }); }); ``
  • Mở trace sau khi chạy: ``bash # Trỏ thẳng vào file trace của test vừa fail npx playwright show-trace test-results/checkout-thanh-toan-chromium/trace.zip # Hoặc mở HTML report rồi bấm vào từng test npx playwright show-report ``

Best practices & Khi nào dùng

  • Trên CI luôn dùng trace: 'on-first-retry' kèm retries: 1 hoặc 2 — test pass không tốn dung lượng, test fail lần retry có đủ dữ liệu debug.
  • Local đang viết test mới: để 'on' hoặc 'retain-on-failure' cho tiện, chạy xong mở ngay không cần chạy lại.
  • Đọc trace đúng trình tự: vào action cuối cùng bị fail → đọc tab Call (xem auto-wait kẹt ở bước nào) → qua tab Network xem API trả về gì → soi snapshot xem UI lúc đó.
  • Đính kèm trace.zip vào bug report cho dev — dev mở là thấy hết DOM, network, console, không cần hỏi lại 'data gì, env nào'.
  • Quan trọng nhất là snapshots: true (DOM snapshot); nếu trace phải gửi ra ngoài công ty, cân nhắc sources: false để không lộ source code.

Gotchas, So sánh & Lưu ý

  • trace: 'on' cho toàn suite → artifact vài MB mỗi test, CI storage phình rất nhanh; retain-on-failure / on-first-retry tự xoá trace của test pass.
  • DOM snapshot không phải trang sống: video đang phát, canvas, animation frame, state WebRTC... không phản ánh 100% — đừng tin tuyệt đối mọi pixel.
  • Với on-first-retry: lần chạy đầu tiên fail sẽ không có trace, chỉ lần retry mới có — đừng thắc mắc 'sao fail mà không thấy file'.
  • Bộ ba bằng chứng theo độ nặng: screenshot (1 khoảnh khắc) < video (hình ảnh liên tục) < trace (toàn bộ context). Debug sâu nhất là trace nhưng cũng nặng nhất.
  • Trace chứa toàn bộ dữ liệu trang — kể cả password/token đã nhập vào form. Cẩn thận khi share trace lên nơi công khai.