Bốn công cụ này phục vụ những thời điểm khác nhau: xem kết quả sau lần chạy, chạy tương tác, dừng từng bước và điều tra lại lịch sử.

HTML report

npx playwright test
npx playwright show-report

HTML report là report default để tổng hợp passed, failed, skipped, duration, error, attachment và trace nếu có. Nó phù hợp để đọc kết quả sau khi suite hoàn tất.

UI Mode

npx playwright test --ui

UI Mode liệt kê test, cho lọc theo tên/tag/project, chạy lại, watch và xem timeline. Đây là giao diện phát triển, không thay thế report lưu làm artifact CI.

Debug Mode

npx playwright test tests/login.spec.ts:18 --debug
npx playwright test --project=chromium --debug

Debug Mode mở Playwright Inspector, chạy headed, cho pause và bước qua action. Bạn cũng có thể đặt await page.pause() tại vị trí muốn dừng.

Trace Viewer

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

export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace test-results/.../trace.zip

Trace lưu DOM snapshot, action, network, console và source theo từng bước. Nó đặc biệt hữu ích khi test chỉ fail trên CI. Không nên bật trace cho mọi lần chạy lớn nếu không cần vì artifact sẽ nặng.

Bảng tổng hợp

Bài tập thực hành

Thử chạy test suite của bạn với 4 mode bên trên, sau đó report lại kết quả cho thầy giáo. 👌