https://playwright.dev/docs/test-reporters

Giới thiệu

• Playwright Test có một số report có sẵn và cho phép bạn custom lại reporter.
• Cách đơn giản nhất để sử dụng một reporter có sẵn là thêm vào command line --reporter

• Ví dụ

npx playwright test --reporter=line

• Bạn có thể cấu hình bên trong file playwright.config.ts để cấu hình sâu hơn.

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

export default defineConfig({
  reporter: 'line',
});

• Bạn cũng có thể sử dụng nhiều reporter cùng lúc

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

export default defineConfig({
  reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }]
  ],
});

Reporter trên CI

• Trên CI (tức là trên mấy con máy trên server), thường sẽ sử dụng ‘dot’ reporter (hiển thị mấy dấu chấm nếu pass, chữ F nếu fail) để tránh output quá nhiều.

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

export default defineConfig({
  // Concise 'dot' for CI, default 'list' when running locally
  reporter: process.env.CI ? 'dot' : 'list',
});

Một số built-in reporter

• Hầu hết các built-in reporter đã khá chi tiết về các test lỗi và chỉ ra cách để fix.

List reporter

• List reporter là reporter mặc định. Nó sẽ in ra mỗi test chạy trên một dòng mới.
• Có thể config bằng cách pass as commandline:

npx playwright test --reporter=list

• Hay đưa vào file config

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

export default defineConfig({
  reporter: 'list',
});

• Output sẽ như sau:

npx playwright test --reporter=list
Running 124 tests using 6 workers

 1  ✓ should access error in env (438ms)
 2  ✓ handle long test names (515ms)
 3  x 1) render expected (691ms)
 4  ✓ should timeout (932ms)
 5    should repeat each:
 6  ✓ should respect enclosing .gitignore (569ms)
 7    should teardown env after timeout:
 8    should respect excluded tests:
 9  ✓ should handle env beforeEach error (638ms)
10    should respect enclosing .gitignore:

• Có khá nhiều thứ hay ho để vọc. Bạn có thể múc vào config để cho nó show cả step

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

export default defineConfig({
  reporter: [['list', { printSteps: true }]],
});

Line reporter

• Line reporter thì ngắn gọn hơn list reporter.
• Nó chỉ dùng một dòng để report cho test hoàn thành cuối cùng, và in ra các fail nếu có.
• Line reporter thường dùng trong trường hợp test suite có nhiều test. Lúc run thì vẫn sẽ hiển thị progress mà không hiển thị spam danh sách các test ra.
• Tương tự như list, line cũng có thể config bằng cách pass vào terminal:

npx playwright test --reporter=line

• Hay dùng file config

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

export default defineConfig({
  reporter: 'line',
});

• Ví dụ output:

npx playwright test --reporter=line
Running 124 tests using 6 workers
  1) dot-reporter.spec.ts:20:1 › render expected ===================================================

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

[23/124] gitignore.spec.ts - should respect nested .gitignore

Dot reporter

• Dot reporter cực kì ngắn gọn. Chỉ hiển thị dấu ‘.’ nếu test pass, và chữ ‘F’ nếu test fail
• Config:

npx playwright test --reporter=dot

• Hay:

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

export default defineConfig({
  reporter: 'dot',
});

• Ví dụ output

npx playwright test --reporter=dot
Running 124 tests using 6 workers
······F·············································

HTML report

• HTML report sẽ sinh ra một folder chứa các report, có thể được chạy như một webserver.
• Mặc định thì HTML report sẽ tự động được mở ra nếu có một số tests fail. Bạn có thể thay đổi thông qua behaviour open ở thuộc tính trong file config, hoặc biến môi trường PW_TEST_HTML_REPORT_OPEN. Các value hợp lệ là: always, never, on-failure (default).
• Bạn cũng có thể cấu hình cả host và port sử dụng cho HTML report.
• Trong ví dụ dưới đây, sử dụng option open: never để không tự động mở HTML reporter.

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

export default defineConfig({
  reporter: [['html', { open: 'never' }]],
});

• Mặc định thì reporter sẽ nằm ở folder playwright-report, ở cấp ngoài cùng của folder hiện tại.
• Nếu bạn muốn thay đổi thư mục mặc định này thì có thể sử dụng biến môi trường PLAYWRIGHT_HTML_REPORT hoặc cấu hình bên trong file config

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

export default defineConfig({
  reporter: [['html', { attachmentsBaseURL: 'https://external-storage.com/' }]],
});

• Để mở test report cho test vừa chạy, dùng lệnh

npx playwright show-report

• Còn trong trường hợp bạn lưu ở folder custom thì dùng lệnh

npx playwright show-report my-report