Module 09: Artifacts & Reporting — Đọc Report, Trace, Video¶

🎯 Mục Tiêu Module¶

Hiểu các loại artifact trong Playwright
Biết cách đọc HTML Report
Biết cách dùng Trace Viewer
Thực hành phân tích test fail

9.1. Các Loại Artifact¶

Tổng quan¶

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Artifacts (Hiện vật test):                         │
│                                                     │
│  1. HTML Report — Báo cáo tổng quan                 │
│  2. Screenshots — Ảnh chụp khi fail                │
│  3. Video — Video quay màn hình khi fail           │
│  4. Trace — Log chi tiết từng bước                  │
│                                                     │
└─────────────────────────────────────────────────────┘

Cấu trúc thư mục¶

test-results/
├── test-login-abc123/
│   ├── screenshot.png
│   ├── video.mp4
│   └── trace.zip
├── test-add-to-cart-def456/
│   ├── screenshot.png
│   ├── video.mp4
│   └── trace.zip
└── playwright-report/
    └── index.html

9.2. HTML Report¶

Cấu hình¶

// playwright.config.ts
export default defineConfig({
  reporter: 'html',
});

Mở report¶

npx playwright show-report

Giao diện report¶

┌─────────────────────────────────────────────────────┐
│  Playwright Report                                  │
│                                                     │
│  ┌─────────────────────────────────────────────────┐│
│  │ Test Results                                    ││
│  │                                                 ││
│  │ ✅ test login success          1.2s             ││
│  │ ✅ test add to basket          2.5s             ││
│  │ ❌ test checkout               3.1s             ││
│  │    └── Error: Element not found                 ││
│  │                                                 ││
│  │ Total: 3 | Passed: 2 | Failed: 1               ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘

Thông tin trong report¶

Thông tin	Mô tả
Test name	Tên test case
Status	Pass / Fail / Skip
Duration	Thời gian chạy
Error message	Thông báo lỗi (nếu fail)
Screenshot	Ảnh chụp lúc fail
Video	Video quay lúc fail
Trace	Log chi tiết

9.3. Screenshots¶

Cấu hình¶

// playwright.config.ts
export default defineConfig({
  use: {
    // Chụp screenshot khi fail
    screenshot: 'only-on-failure',

    // Hoặc: Chụp screenshot tất cả
    // screenshot: 'on',
  },
});

Chụp screenshot thủ công¶

test('test example', async ({ page }) => {
  await page.goto('https://example.com');

  // Chụp screenshot
  await page.screenshot({ path: 'screenshot.png' });

  // Chụp full page
  await page.screenshot({ path: 'full-page.png', fullPage: true });
});

Xem screenshot¶

test-results/
└── test-login-abc123/
    └── screenshot.png  ← Ảnh chụp lúc test fail

9.4. Video¶

Cấu hình¶

// playwright.config.ts
export default defineConfig({
  use: {
    // Quay video khi fail
    video: 'retain-on-failure',

    // Hoặc: Quay video tất cả
    // video: 'on',

    // Hoặc: Không quay
    // video: 'off',
  },
});

Xem video¶

test-results/
└── test-login-abc123/
    └── video.mp4  ← Video quay lúc test fail

9.5. Trace Viewer¶

Tại sao Trace Viewer quan trọng?¶

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Trace Viewer cho phép:                             │
│                                                     │
│  ✅ Xem lại từng step của test                      │
│  ✅ Xem DOM snapshot tại mỗi step                   │
│  ✅ Xem network request                             │
│  ✅ Xem console log                                 │
│  ✅ Xem screenshot tại mỗi step                     │
│  ✅ Debug test fail hiệu quả                        │
│                                                     │
└─────────────────────────────────────────────────────┘

Cấu hình¶

// playwright.config.ts
export default defineConfig({
  use: {
    // Bật trace khi retry
    trace: 'on-first-retry',

    // Hoặc: Bật trace tất cả
    // trace: 'on',

    // Hoặc: Không bật
    // trace: 'off',
  },
});

Mở Trace Viewer¶

# Mở trace từ file
npx playwright show-trace test-results/test-login-abc123/trace.zip

Giao diện Trace Viewer¶

┌─────────────────────────────────────────────────────────────┐
│  Trace Viewer                                               │
│                                                             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │ Actions                                                  ││
│  │                                                         ││
│  │  1. goto https://practice.automationtesting.in/         ││
│  │  2. click #username                                     ││
│  │  3. fill "testuser123"                                  ││
│  │  4. click #password                                     ││
│  │  5. fill "Test@123456"                                  ││
│  │  6. click [name="login"]                                ││
│  │  7. ❌ Error: Element not found                         ││
│  └─────────────────────────────────────────────────────────┘│
│                                                             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │ DOM Snapshot                                             ││
│  │                                                         ││
│  │  (Hiển thị HTML tại step được chọn)                    ││
│  └─────────────────────────────────────────────────────────┘│
│                                                             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │ Network / Console                                        ││
│  │                                                         ││
│  │  (Hiển thị request/response, console log)              ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

9.6. Phân Tích Test Fail¶

Quy trình phân tích¶

Test fail
    │
    ▼
Mở HTML Report
    │
    ▼
Xem error message
    │
    ├── Element not found ──► Kiểm tra locator
    │                         └── Mở Trace Viewer
    │                             └── Xem DOM snapshot
    │
    ├── Timeout ──────────► Kiểm tra thời gian chờ
    │                         └── Tăng timeout hoặc dùng waitFor
    │
    └── Assertion fail ───► Kiểm tra expected vs actual
                              └── Xem screenshot

Ví dụ phân tích¶

Error: Timed out 30000ms waiting for expect(locator).toBeVisible()

Locator: .woocommerce-MyAccount-content

Expected: visible
Received: not found

→ Nguyên nhân: Locator sai hoặc trang chưa load xong
→ Giải pháp: Kiểm tra locator, dùng waitForLoadState

📝 Bài Tập¶

Bài Tập 1: Chạy Test và Xem Report¶

Chạy tất cả test
Mở HTML Report
Phân tích kết quả

Bài Tập 2: Tạo Test Fail¶

Viết test có lỗi (sai locator)
Chạy test
Xem screenshot và video

Bài Tập 3: Dùng Trace Viewer¶

Chạy test với trace enabled
Mở Trace Viewer
Phân tích từng step

✅ Checklist Hoàn Thành Module¶

[ ] Hiểu các loại artifact
[ ] Biết cách đọc HTML Report
[ ] Biết cách dùng Trace Viewer
[ ] Thực hành phân tích test fail
[ ] Hoàn thành bài tập