https://playwright.dev/docs/trace-viewer

Introduction

• Playwright Trace Viewer là 1 GUI tool giúp bạn khám phá các bản ghi Playwright sau khi script đã chạy. Các bản ghi này là một công cụ tuyệt vời để debug thử nghiệm khi chúng thất bại trên CI. Bạn có thể mở bản ghi ở local hoặc trace.playwright.dev
• Youtube: https://youtu.be/yP6AnTxC34s

Trace Viewer features

Action

• Trong tab “Actions”, bạn có thể xem Playwright đã sử dụng locator nào để tương tác với trang web, mỗi action mất bao lâu để hoàn thành. Bạn có thể di chuột qua mỗi action để xem hình ảnh thay đổi của DOM
• Hơn nữa, bạn có thể quay ngược thời gian lại xem các hành động trước đó hoặc di chuyển về phía trước. Click chuột vào 1 action để inspect và debug. Sử dụng tab “Before” và “After” để xem trang web trước và sau khi được thực hiện
• Khi bạn chọn mỗi action trong Playwright, bạn sẽ được cung cấp đầy đủ thông tin:
  • action snapshots
  • action log
  • source code location

Screenshots

• Khi bạn bật tính năng screenshots, mỗi lần record sẽ tạo ra 1 film strip. Bạn có thể di chuột qua film strip để phóng to hình ảnh của từng action, giúp bạn dễ dàng tìm thấy action muốn inspect
• Click đúp vào 1 action để xem khoảng thời gian của action đó. Bạn có thể dùng slider trên timeline để chọn nhiều action hơn và Playwright sẽ hiển thị các action đã chọn trong tab “Actions”, đồng thời filter các console log và network để hiển thị log của các action đã chọn

Snapshots

• Khi bật tính năng snapshots, Playwright sẽ chụp lại một DOM snapshots cho mỗi action. Tuỳ vào mỗi actions, DOM sẽ chụp 3 loại:
  • Before: Snapshots trước khi action được gọi
  • Action: Snapshots chính xác tại thời điểm action được thực hiện. Loại này đặc biệt hữu ích khi bạn muốn xem playwright đã nhấp vào đâu
  • Before: Snapshots sau khi action được gọi

Source

• Khi bạn click vào 1 action bên sidebar, dòng code tương ứng với action đó sẽ được highlight trong source panel

Call

• Hiển thị thông tin về action, bao gồm thời gian thực hiện, locator được sử dụng, chế độ strict và phím được nhấn

Log

• Hiển thị toàn bộ log của test, giúp bạn hiểu rõ những gì Playwright đang làm “bên trong” (scroll, chờ element hiển thị, chờ element có thể tương tác,…)

Errors

• Hiển thị thông báo lỗi cho mỗi test. Trên Timeline bạn sẽ thấy 1 đường kẻ màu đỏ đánh dấu vị trí lỗi
• Click vào tab “Source” để xem chính xác dòng code gây lỗi

Console

• Filter console log theo action: Double click vào 1 action trong sidebar “Actions” để filter console log, chỉ để hiển thị log của action đó. Click vào Show all để hiển thị tất cả console log
• Filter console log theo timeline: Sử dụng timeline để lọc các action bằng cách click vào điểm bắt đầu và kéo đến điểm kết thúc. Tab console cũng sẽ được filter để chỉ hiển thị các log được tạo trong các action đã chọn

Network

• Hiển thị tất cả các network requests được thực hiện trong quá trình test
• Bạn có thể sắp xếp theo type của request, status code, method, request, content type, duration and size.
• Chúng ta cũng sẽ filter theo action và timeline giống với console

Metadata

• Tab Metadata cung cấp thông tin chi tiết về test bao gồm trình duyệt được sử dụng, viewport size, test duration và nhiều thông tin khác

Attachments

• Hiển thị attachments: Tab “Attachments” cho phép bạn xem xét các attachments bao gồm screenshot, log,…
• So sánh screenshot: Nếu bạn đang thực hiện visual regression testing, bạn có thể so sánh các screenshot bằng cách kiểm tra sự khác biệt giữa image, image actual và expected image
• Sử dụng slider: Khi click vào expected image, bạn có thể sử dụng slider để trượt 2 image lên nhau để dễ dàng so sánh sự khác biệt

Recording a trace locally

• Để record lại trace của Playwright trong quá trình phát triển, hãy sử dụng flag –trace khi run test

npx playwright test --trace on

• Bạn cũng có thể dùng UI Mode để có trải nghiệm phát triển tốt hơn
• Khi chạy test, bạn có thể mở HTML report và nhấp vào icon trace để mở trace

npx playwright show-report

Recording a trace on CI

• Khi chạy test trên hệ thống CI (Continuous Integration), nên ghi lại trace khi test failed đầu tiên bằng cách setting trace: ‘on-first-retry’ trong file config

// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});

• Action này sẽ tạo ra file trace.zip cho mỗi test bị failed lần đầu
• Các option khác để ghi lại trace
  • ‘on-first-retry’: Ghi trace chỉ khi test bị failed lần đầu.
  • ‘on-all-retries’: Ghi trace cho tất cả các lần test bị failed.
  • ‘off’: Không ghi trace.
  • ‘on’: Ghi trace cho mỗi test (không khuyến khích vì tốn tài nguyên).
  • ‘retain-on-failure’: Ghi trace cho mỗi test, nhưng xóa trace của các test thành công.
• Bạn cũng có thể sử dụng trace: ‘retain-on-failure’ nếu không muốn chạy lại test, nhưng vẫn muốn có trace cho các test bị failed.
• Xem thêm các option khác tại: https://playwright.dev/docs/api/class-testoptions#test-options-trace
• Nếu bạn không sử dụng Playwright làm Test Runner, hãy sử dụng API browserContext.tracing thay thế

Opening the trace

• Bạn có thể mở trace đã lưu bằng cách sử dụng Playwright CLI hoặc trên browser tại trace.playwright.dev. Hãy nhớ thêm đường dẫn đầy đủ đến file trace.zip của bạn

npx playwright show-trace path/to/trace.zip

Using trace.playwright.dev

• trace.playwright.dev là một phiên bản tĩnh của Trace Viewer, cho phép bạn tải lên các file trace bằng cách kéo và thả.

Viewing remote traces

• Bạn có thể mở trace từ xa bằng cách sử dụng URL của nó. Trace có thể được tạo ra trên hệ thống CI, giúp bạn dễ dàng xem trace mà không cần tải file thủ công

npx playwright show-trace https://example.com/trace.zip

• Bạn cũng có thể truyền URL của trace đã tải lên (vd: trên CI) từ 1 kho lưu trữ có thể truy cập làm tham số. Lưu ý, quy tắc CORS (Cross-Origin Resource Sharing) có thể được áp dụng

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip