[Playwright tip] Sử dụng công cụ “Copy as Playwright” trong trace viewer

Phong Do · 21/02/2025 · 3 phút đọc

Từ phiên bản 1.50, Playwright đã thêm một công cụ cực kì xịn sò: “Copy as Playwright” trong trace viewer, giúp việc làm các test API trở nên đơn giản và nhanh chóng hơn. Có thể hiểu đơn giản: công cụ này sẽ biến một request bất kì trong trace viewer thành code Playwright trong “một nốt nhạc”.

Trong bài này, hãy cùng Better Bytes Academy tìm hiểu về công cụ này nhé.

Tóm tắt

Dành cho các bạn lười đọc:

Bật config trace viewer lên (trong file playwright.config.ts)
- report: html
- trace: ‘on’
Chạy test
- npx playwright test
View report, chọn một Network request muốn copy
- npx playwright show-report

Chi tiết

Bước 1: Sửa config để bật report html và trace

export default defineConfig({
  ...
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on',
  },
....

Giải thích:

Report html là để playwright capture lại quá trình chạy test, lưu ra dạng file html
Trace on: để Playwright luôn luôn ghi lại file report này.
- Nếu để giá trị mặc định: on-first-retry thì sẽ chỉ chạy vào lần retry đầu tiên.

Bước 2: Chạy test

npx playwright test

Bước 3: Show report

Gõ lệnh show report tại terminal

npx playwright show-report

Sau khi mở report lên, bạn chọn một network request bất kì, click vào “Copy as Playwright”

Lúc này, trong clipboard của bạn sẽ có code như bên dưới:

await page.request.get('https://material.playwrightvn.com/', {
    headers: {
      ':authority': 'material.playwrightvn.com',
      ':method': 'GET',
      ':path': '/',
      ':scheme': 'https',
      accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
      'accept-encoding': 'gzip, deflate, br, zstd',
      'accept-language': 'en-US',
      priority: 'u=0, i',
      'sec-ch-ua': '"Not(A:Brand";v="99", "HeadlessChrome";v="133", "Chromium";v="133"',
      'sec-ch-ua-mobile': '?0',
      'sec-ch-ua-platform': '"Windows"',
      'sec-fetch-dest': 'document',
      'sec-fetch-mode': 'navigate',
      'sec-fetch-site': 'none',
      'sec-fetch-user': '?1',
      'upgrade-insecure-requests': '1',
      'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.6943.16 Safari/537.36'
    }
  });