Chuyển tới nội dung chính

Hướng dẫn cài đặt

Dưới đây là hướng dẫn đầy đủ để cài đặt môi trường và chạy test với Playwright (Node.js).

1. Cài đặt Node.js​

Playwright chạy trên Node.js, nên cần cài trước:

Có thể kiểm tra đã cài NodeJS chưa bằng cách mở Terminal và gõ lệnh:

node -v

image.png

image.png

Nếu chưa có:

image.png

Kiểm tra sau khi cài:

node -v
npm -v

2. Cài VS Code​

Nếu bạn chưa có editor, hãy tải Visual Studio Code: https://code.visualstudio.com/

image.png

image.png

3. Cài hosts​

Sửa hosts trên Windows​

Bước 1: Mở Notepad bằng quyền Admin​

  • Search Notepad
  • Right click → Run as administrator

Bước 2: Mở file hosts​

Đi tới:

C:\Windows\System32\drivers\etc\hosts

👉 Nhớ chọn: File type: All Files (.)

image.png

Bước 3: Thêm domain​

192.168.1.234 gitlab-bh.sfb-cloud.local

Bước 4: Lưu file​

Sửa hosts trên macOS​

Bước 1: Mở Terminal​

Dùng Terminal

Bước 2: Edit file hosts​

sudo nano /etc/hosts

👉 Nhập password máy

Bước 3: Thêm domain​

192.168.1.234 gitlab-bh.sfb-cloud.local

Bước 4: Lưu file​

  • Nhấn: Ctrl + O → Enter
  • Thoát: Ctrl + X

4. Tải Project về​

Chạy lệnh sau trên terminal để GitLab không kiểm tra SSL:

git config --global http.sslVerify false

Sau đó truy cập Gitlab: https://gitlab-bh.sfb-cloud.local/bh/v2/bh1.0-test

image.png

Lựa chọn thư mục lưu project.

image.png

Nhập tài khoản Gitlab của bạn khi được yêu cầu.

image.png​

5. Setup môi trường​

Mở project, cài đặt thư viện và môi trường Playwright:

npm install
npx playwright install

6. Hướng dẫn chạy​

Chạy qua Web Dashboard (Khuyến nghị)​

Dự án tích hợp sẵn một Dashboard trực quan giúp bạn dễ dàng chạy và theo dõi test.

  1. Khởi động Dashboard bằng lệnh:
node .\server.js
  1. Mở trình duyệt và truy cập: http://localhost:3000
  2. Tại đây, bạn có thể sử dụng các tính năng và nút chức năng sau:

🖥️ Tab: Vận hành Test​

Vận hành Test

  • Thanh cấu hình chung (Config Bar):
    • URL Domain hệ thống chung: Ghi đè đường dẫn URL của hệ thống cần test.
    • Số Workers (Song song): Định cấu hình số luồng chạy test đồng thời.
  • Danh mục Kịch bản (Cột trái):
    • ➕ Chọn: Đưa thư mục hoặc file Excel vào danh sách hàng đợi để chạy.
    • ⚙️ User: Đặt tài khoản đăng nhập (user/pass) riêng biệt cho kịch bản/thư mục đó.
    • 🐞 Debug: Bật công cụ Playwright Debug UI trực tiếp cho kịch bản để dễ dàng tìm lỗi (chỉ mở 1 luồng).
    • 📂 Mở: Mở file Excel kịch bản bằng phần mềm mặc định trên máy (như MS Excel).
  • Hàng đợi thực thi:
    • ✕ Xóa: Xóa kịch bản tương ứng khỏi hàng đợi.
    • Dropdown Chế độ: Chọn chế độ "Console (Headless)" (chạy ngầm) hoặc "Headed" (hiển thị UI trình duyệt).
    • 🚀 Chạy hàng đợi: Bắt đầu thực thi các kịch bản đang có trong hàng đợi.
    • 🗑 Xóa hàng đợi: Xóa trắng danh sách chờ.

📊 Tab: Thống kê & Biểu đồ​

Thống kê & Biểu đồ

  • 🔄 Làm mới Report: Cập nhật lại biểu đồ tỷ lệ (Thành công/Thất bại/Bỏ qua) và bảng chi tiết nguyên nhân lỗi từ lần chạy test gần nhất.

📜 Tab: Lịch sử chi tiết​

Lịch sử chi tiết

  • Lọc ngày: Xem lịch sử test theo ngày.
  • 🔄 Đặt lại: Bỏ lọc ngày.
  • 🔄 Tải lại lịch sử: Làm mới danh sách nhật ký thực thi.
  • 🗑️ Xóa sạch lịch sử: Xóa vĩnh viễn toàn bộ file lịch sử (Cẩn thận khi dùng).

📊 Tab: Playwright Report​

Playwright Report

  • 🔄 Làm mới Báo cáo: Xem trực tiếp báo cáo HTML chi tiết sinh ra bởi framework Playwright.

Chạy trực tiếp qua Command Line (CLI)​

Chạy toàn bộ test:

npx playwright test runner --headed

Chạy 1 file theo target (ví dụ data/pkt_nntt1.xlsx):

npx playwright test runner pkt_nntt1 --headed

7. Cài tiện ích mở rộng​

Install from Chrome Web Store

  • Click icon extension hoặc nhấn Alt + L để bật/tắt
  • Hover vào element để xem locator ngay
  • Click vào element để mở modal và copy locator
  • Nhấn ESC để đóng modal hoặc tắt inspector