Xin chào, xin chào!

Chúng mình là Playwright Việt Nam đây.

Đây là bài viết đầu tiên trong series "Vọc vạch Playwright" của chúng mình. Trong bài viết này, mình sẽ cùng với các bạn tìm hiểu về Playwright, cài đặt và chạy test đầu tiên nha ^^.

Kiến thức cơ bản

• Playwright là gì?
  • Là framework mã nguồn mở
  • Tiền thân là Puppeteer. Được Microsoft cải tiến lên và maintain cho tới giờ.
  • Hỗ trợ nhiều ngôn ngữ: JavaScript, TypeScript, Python, Java, C#
  • Hỗ trợ các trình duyệt phổ biến: Chromium (Google Chrome, Microsoft Edge), Firefox và WebKit (Safari).
• Playwright khác biệt gì so với các framework test khác (ví dụ: Selenium, Cypress)?
  • Hỗ trợ đa trình duyệt thực thụ: Viết code Playwright một lần duy nhất để làm việc với tất cả các engine trình duyệt lớn (Chromium, Firefox, WebKit) mà không cần các driver riêng lẻ phức tạp như Selenium.
  • Tự động chờ (Auto-waits): Playwright có cơ chế auto-wait thông minh, tự động chờ các phần tử sẵn sàng trước khi thực hiện hành động, giúp giảm thiểu lỗi flaky test.
  • Kiến trúc Out-of-Process: Playwright chạy ngoài tiến trình của trình duyệt, mang lại sự ổn định và khả năng kiểm soát tốt hơn so với một số framework chạy trong trình duyệt (in-browser) – Cái này hơi phức tạp. Tui sẽ lên một bài riêng.
  • Tốc độ và hiệu năng: Thường nhanh hơn do kiến trúc và cách giao tiếp tối ưu với trình duyệt.
  • Tính năng phong phú: Hỗ trợ sẵn nhiều tính năng nâng cao như network interception, mô phỏng thiết bị, geolocation, tải và upload file, tạo PDF, chụp ảnh màn hình, quay video…
  • Browser Contexts: Cho phép tạo nhiều phiên duyệt web độc lập trong một kịch bản test duy nhất, rất hữu ích cho việc kiểm thử các kịch bản đa người dùng.
  • Công cụ mạnh mẽ: Đi kèm với các công cụ như Playwright Inspector (để debug), Playwright Codegen (tự động tạo code test), và Trace Viewer (phân tích chi tiết quá trình chạy test).

Có thể nói ngắn gọn: Playwright là một framework hoàn chỉnh, đa năng cho end-to-end/ API test.

Cài đặt

Để bắt đầu với Playwright, chúng ta cần chuẩn bị môi trường phát triển.

• Cài đặt NVM (Node Version Manager)
  NVM giúp bạn quản lý nhiều phiên bản Node.js khác nhau trên máy. Xem hướng dẫn cài đặt NVM tại repo github
• Cài đặt Node.js v22.9.0 (hoặc phiên bản LTS mới nhất)
  Playwright yêu cầu Node.js. Chúng ta sẽ dùng NVM để cài đặt.

nvm install 22.9.0 nvm use 22.9.0 nvm alias default 22.9.0 # Đặt phiên bản này làm mặc định

• Kiểm tra cài đặt: node -v (sẽ thấy v22.9.0) và npm -v

• Cài đặt Visual Studio Code (VS Code)
  VS Code là một trình soạn thảo mã nguồn phổ biến và có hỗ trợ tốt cho Playwright.
  • Tải về từ: https://code.visualstudio.com/
  • Cài đặt theo hướng dẫn.
• Cài đặt extension Playwright cho VS Code
  Extension này giúp việc viết và chạy test Playwright trong VS Code dễ dàng hơn.
  1. Mở VS Code.
  2. Vào mục Extensions (biểu tượng ô vuông ở thanh bên trái, hoặc Ctrl+Shift+X).
  3. Tìm kiếm “Playwright Test for VSCode”.
  4. Chọn extension của Microsoft và nhấn “Install”.

• Cài đặt Playwright vào dự án của bạn
  Cách tốt nhất để bắt đầu một dự án Playwright là sử dụng trình khởi tạo của nó.

  1. Mở terminal (hoặc terminal tích hợp trong VS Code: `Ctrl+“).

  2. Tạo một thư mục mới cho dự án và di chuyển vào đó:

  3. Khởi tạo dự án Playwright : `npm init playwright@latest`

  4. Trình cài đặt sẽ hỏi bạn một vài câu:

     • Choose between TypeScript or JavaScript: Chọn TypeScript.
     • Name of your test folder: Mặc định là tests (nhấn Enter).
     • Add a GitHub Actions workflow: Chọn true hoặc false tùy nhu cầu.
     • Install Playwright browsers: Chọn true (để cài đặt các trình duyệt cần thiết).

  5. Sau khi quá trình hoàn tất, Playwright và các trình duyệt liên quan (Chromium, Firefox, WebKit) sẽ được cài đặt. Cấu trúc thư mục cơ bản và một file test mẫu (tests/example.spec.ts) cũng sẽ được tạo.

     Nếu bạn bỏ qua bước cài đặt trình duyệt ở trên, hoặc muốn cài đặt lại/thêm trình duyệt, bạn có thể chạy:
     npx playwright install

Chạy Playwright test

Sau khi cài đặt, Playwright sẽ tạo một file test ví dụ (thường là tests/example.spec.ts). Chúng ta sẽ chạy file test này.

• Chạy test thông qua nút run của extension (trong file test)
  1. Mở VS Code và mở thư mục dự án my-playwright-project.
  2. Mở file tests/example.spec.ts (hoặc .js).
  3. Bạn sẽ thấy các biểu tượng “Play” (hình tam giác màu xanh lá) bên cạnh mỗi test block hoặc describe block.
  4. Nhấn vào biểu tượng “Play” này để chạy test case hoặc test suite tương ứng. Kết quả sẽ hiển thị trong terminal tích hợp của VS Code và dấu tick xanh (pass) hoặc dấu X đỏ (fail) sẽ hiện bên cạnh test.

• Chạy test thông qua Test Explorer của VS Code
  1. Trong VS Code, tìm biểu tượng “Testing” (thường là hình cái bình thí nghiệm) trên thanh Activity Bar bên trái. Nhấn vào đó để mở Test Explorer.
  2. Test Explorer sẽ liệt kê tất cả các test cases trong dự án của bạn.
  3. Bạn có thể:
     • Nhấn nút “Play” ở trên cùng của Test Explorer để chạy tất cả các test.
     • Mở rộng các test suites và nhấn nút “Play” bên cạnh từng test case hoặc test file cụ thể để chạy riêng lẻ.
     • Xem kết quả và log chi tiết trực tiếp trong Test Explorer.

• (Bonus) Chạy test bằng dòng lệnh (Command Line Interface – CLI)
  Đây là cách phổ biến và linh hoạt nhất.
  1. Mở terminal trong thư mục gốc của dự án.
  2. Chạy tất cả các test:
     bash npx playwright test
  3. Chạy một file test cụ thể:
     bash npx playwright test tests/example.spec.ts
  4. Chạy test ở chế độ headed (hiển thị trình duyệt):
     bash npx playwright test --headed
  5. Sau khi chạy xong, Playwright sẽ tự động tạo một báo cáo HTML. Bạn có thể mở nó bằng lệnh:
     bash npx playwright show-report

Chúc mừng! Bạn đã cài đặt thành công Playwright và chạy được test đầu tiên. Hẹn gặp lại bạn trong bài sau nha.

À, có cả video hướng dẫn đâyyy: https://www.youtube.com/watch?v=JxNOUzASLVI