Wiki

← Tất cả bài wiki

UI Mode (Chế độ giao diện — chạy & soi test trực quan)

automationplaywright

npx playwright test --ui mở giao diện đồ hoạ để phát triển test: cây test bên trái, watch mode tự chạy lại khi code thay đổi, và time-travel giữa các action với DOM snapshot tích hợp sẵn. Đây là môi trường viết test lý tưởng — vừa chạy vừa soi không cần nhảy qua lại giữa terminal, report và trace.

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

  • UI Mode là app đồ hoạ local của Playwright Test: sidebar cây test, panel kết quả với snapshot từng action, console, network — tất cả trong một cửa sổ.
  • Time-travel: click từng action trong timeline → xem ngay DOM snapshot before/after tại bước đó — gần như Trace Viewer được nhúng sẵn vào từng lần chạy.
  • Watch mode: bật icon con mắt cạnh test/file → mỗi lần save code, test đó tự chạy lại — feedback loop chỉ vài giây.
  • Hỗ trợ filter theo project (browser), tag, text search; chạy lẻ một test, một file hay một describe bằng nút play ngay trên cây.

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

  • npx playwright test --ui mở UI mode; --ui-host / --ui-port đổi host/port khi cần (vd chạy trong container).
  • Mỗi action trong timeline hiện: locator đã resolve, duration, call log chi tiết; click action → snapshot DOM tương tác được, kèm tab console/network của riêng action đó.
  • UI mode luôn thu thập dữ liệu mức trace cho mọi lần chạy — không cần bật trace trong config vẫn time-travel được.
  • Test chạy headless trong UI mode theo mặc định, nhưng mọi action đều có snapshot nên thực tế không cần nhìn browser thật.
  • Dependencies vẫn được tôn trọng: project setup (vd auth) tự chạy trước khi chạy test phụ thuộc.

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

  • Các lệnh mở UI mode: ``bash # Toàn bộ suite npx playwright test --ui # Chỉ một file npx playwright test tests/cart.spec.ts --ui # Chỉ một project / lọc theo tag npx playwright test --ui --project=chromium npx playwright test --ui --grep @smoke ``
  • Workflow viết test mới điển hình: - Mở --ui → bật watch cho file đang viết. - Sửa locator → save → test tự chạy lại. - Click từng action trên timeline → kiểm tra element được chọn trong snapshot. - Action fail → đọc call log + tab Network ngay trong UI.
  • Khi test pass trong UI mode, vẫn nên verify lại bằng lệnh headless trước khi commit — UI mode là môi trường dev, CI mới là chuẩn: ``bash npx playwright test tests/cart.spec.ts ``

Best practices & Khi nào dùng

  • Viết test mới: bật watch mode cho đúng file — save là chạy lại, vòng lặp vài giây thay vì gõ lệnh chạy tay từng lần.
  • Điều tra flaky test: rerun liên tục trong UI mode, soi snapshot tại action fail để thấy trạng thái trang đúng lúc lỗi xảy ra.
  • Dùng UI mode thay combo show-report + show-trace khi đang dev — một cửa sổ có đủ action, DOM, console, network.
  • Soi locator: mở snapshot của action → inspect DOM ngay trong panel → biết locator nên viết lại thế nào.

Gotchas, So sánh & Lưu ý

  • UI Mode là dev tool local — không dùng trên CI; CI chạy npx playwright test thường rồi mở HTML report.
  • UI mode thu thập dữ liệu mức trace cho mọi action → nặng hơn chạy headless thường; suite lớn trên máy yếu sẽ thấy chậm rõ.
  • Test phụ thuộc state chung (DB dùng chung, thứ tự test) có thể cho kết quả khác khi chạy lẻ trong UI — một lý do nữa để tránh shared state giữa các test.
  • Khác Inspector: Inspector đứng tại chỗ step qua từng action; UI mode xem lại toàn bộ lần chạy với time-travel — debug tương tác dùng Inspector, review hành trình dùng UI mode.
  • Snapshot trong UI mode có giới hạn giống trace: canvas, animation, video không phản ánh trạng thái sống 100%.