Học Playwright tiếng Việt, Cộng đồng Playwright cho người Việt

Vọc Vạch Playwright

[Vọc Playwright] Chạy và debug tests

Giới thiệu

  • Playwright cho phép bạn chạy 1 tập hợp, hoặc toàn bộ test.
  • Test có thể được run bằng 1 browser hay nhiều browser sử dụng --project flag.
  • Mặc định thì các test sẽ run song song, headless (tức là không có browser thật hiển thị lên).
  • Bạn thích nhìn nhì có thể thêm flag --headed vào, hoặc chạy ở UI mode --ui.
  • Trong bài này, bạn sẽ học được:
  • Cách chạy test bằng command line.
  • Cách debug 1 test.
  • Cách mở HTML Report.

Chạy tests

Trên command line

  • dùng lệnh sau để chạy toàn bộ test
npx playwright test
Run test

UI mode

  • Chạy lệnh sau để hiển thị UI mode lên
npx playwright test --ui
Run test

Chạy test ở headed (có trình duyệt) mode

npx playwright test --headed

Chạy test ở nhiều browser khác nhau

  • Ví dụ chạy web ở webkit engine (safari dùng cái này)
npx playwright test --project webkit
  • Có thể cho chạy ở nhiều engine bằng cách thêm nhiều flag --project
npx playwright test --project webkit --project firefox

Chạy 1 test cụ thể

  • Điền tên file bạn muốn chạy vào cuối
npx playwright test landing-page.spec.ts
  • Hoặc chạy test ở nhiều thư mục khác nhau: điền đường dẫn các thư mục, cách nhau ra
npx playwright test tests/todo-page/ tests/landing-page/
  • Hoặc chạy các test có từ khoá landinglogin ở file name
npx playwright test landing login
  • Hoặc chạy các test có chứa từ khoá add a todo item ở tên của test (chú ý khúc này là tên của test nha):
npx playwright test -g "add a todo item"

Run test trong VSCode

  • Click button run test

Debug test

  • Playwright dùng nodejs nên bạn hoàn toàn có thể debug bằng cách dùng console.log hoặc VS Code để debug đều được.
  • Ngoài ra Playwright có thể debug bằng UI mode, debug khá dễ.
    Run test
  • Về cơ bản thì bạn có thể nhìn được quá trình test chạy như nào, network load ra sao, mấy giây thì tải xong trang.
  • Bạn có thể dùng Pick locator để select element trên trang. Bạn cũng sửa được locator trên Playground để quan sát phần tử nào được chọn.
  • Muốn rõ hơn thì bạn xem video ở cuối bài nhé 😉
    UI mode locator

Debug test sử dụng Playwright inspector

  • Bạn thêm flag --debug vào phía sau
npx playwright test --debug
  • Sau khi chạy command này lên, Playwright sẽ mở lên 1 browser và 1 inspector.
    Playwright inspector
  • Để debug một file cụ thể thì bạn thêm tên file vào sau:
npx playwright test example.spec.ts --debug
  • Để debug một test cụ thể thì bạn thêm số dòng vào sau tên file, lưu ý là số dòng là dòng định nghĩa test test(... thì mới được nha. Ví dụ
npx playwright test example.spec.ts:10 --debug
  • Khi debug thì bạn có thể dùng button Pick locator để chọn phần tử trên trang. Bạn có thể edit locator ở ô locator, phần tử trên trang nếu khớp sẽ sáng lên.

Test report

  • Mặc định Playwright sẽ sinh ra một cái gọi là HTML report, hay là một trang web chứa thông tin test bạn chạy. Để show report lên thì bạn chạy lệnh
npx playwright show-report
  • Khi mở lên trông như này:
    Playwright test report
  • Khi click vào 1 test thì trông chi tiết thế này:
    Playwright test report detail

Video

Trả lời