Cách tạo báo cáo test chi tiết với Playwright Reporting

Trong quá trình kiểm thử tự động, việc tạo báo cáo kết quả test là một phần rất quan trọng để:

• Theo dõi kết quả thực thi
• Debug lỗi nhanh chóng
• Chia sẻ kết quả với nhóm QA/DEV/Manager

Playwright hỗ trợ sẵn nhiều loại báo cáo như: HTML, JSON, JUnit XML, và có thể tích hợp với Allure Report để tạo báo cáo nâng cao.

1. Báo cáo mặc định của Playwright

Khi bạn chạy lệnh:

npx playwright test

Playwright sẽ hiển thị báo cáo trực tiếp trên terminal:

✓ 2 tests passed (1.2s)

Nếu bạn muốn xem báo cáo dạng HTML UI, bạn cần thêm --reporter như sau:

npx playwright test --reporter=html

Sau đó mở báo cáo:

npx playwright show-report

Mặc định, báo cáo HTML được lưu tại playwright-report/index.html.

2. Cấu hình reporter trong playwright.config.ts

Bạn có thể định nghĩa sẵn reporter trong file cấu hình:

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

export default defineConfig({
  reporter: [
    ['list'],               // Reporter mặc định trên terminal
    ['html', { open: 'never' }],  // Báo cáo HTML
    ['json', { outputFile: 'reports/report.json' }], // Báo cáo JSON
    ['junit', { outputFile: 'reports/report.xml' }], // Báo cáo XML (dùng cho CI/CD)
  ],
});

3. Allure Report – Báo cáo nâng cao

Bước 1: Cài đặt Allure

npm install -D allure-playwright

Bước 2: Cấu hình reporter Allure

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

export default defineConfig({
  reporter: [
    ['allure-playwright'],
  ],
});

Bước 3: Cài đặt CLI của Allure

npm install -g allure-commandline --save-dev

Hoặc dùng Docker:

docker run -p 5050:5050 -v "$(pwd)/allure-results:/app/allure-results" -v "$(pwd)/allure-report:/app/allure-report" frankescobar/allure-docker-service

Bước 4: Tạo và mở báo cáo

npx allure generate ./allure-results --clean -o ./allure-report
npx allure open ./allure-report

Allure cung cấp:

• Báo cáo theo từng test case
• Giao diện trực quan
• Báo cáo lịch sử test, logs, video, trace

4. Thêm Metadata vào test

Bạn có thể thêm các thông tin như tag, owner, severity, để xuất hiện trong báo cáo Allure:

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

test.describe('Login tests', () => {
  test('should login successfully', async ({ page }) => {
    test.info().annotations.push({ type: 'owner', description: 'QA Team' });
    await page.goto('/login');
    // ...
  });
});

5. Báo cáo trong CI/CD

Trong môi trường CI như GitHub Actions, GitLab CI, bạn có thể tích hợp:

npx playwright test --reporter=html
npx playwright show-report

Kết hợp với việc lưu artifact hoặc deploy lên server báo cáo tự động (với Allure, HTML report...).

6. Tổng kết