Skip to main content

Tut001: Hướng dẫn cài đặt Playwright và chạy test đầu tiên

Hướng dẫn chi tiết cách thiết lập môi trường, cài đặt Playwright và thực thi kiểm thử tự động. Bài viết bao gồm cách xử lý lỗi thường gặp và các câu lệnh thực tế.

1. Yêu cầu hệ thống (System Requirements)​

Trước khi bắt đầu, hãy đảm bảo máy tính của bạn đáp ứng các tiêu chuẩn sau:

  • Node.js: Phiên bản LTS mới nhất (20.x, 22.x hoặc 24.x).
  • Hệ điều hành:
    • Windows: Windows 11+, Windows Server 2019+ hoặc WSL.
    • macOS: 14 (Sonoma) trở lên.
    • Linux: Debian 12/13, Ubuntu 22.04/24.04 (x86-64 hoặc arm64).
    • IDE: Khuyến khích sử dụng Visual Studio Code (VS Code).

2. Hướng dẫn cài đặt Node.js qua NVM​

Sử dụng NVM (Node Version Manager) giúp bạn quản lý nhiều phiên bản Node.js mà không gây xung đột hệ thống.

Bước 2.1: Cài đặt NVM​

Ví dụ: (số version sẽ thay đổi tuỳ theo phiên bản)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Bước 2.2: Cài đặt Node.js bằng NVM​

Sau khi cài NVM, mở Terminal/Command Prompt và chạy các lệnh sau:

  1. Cài đặt phiên bản LTS mới nhất:
nvm install --lts
  1. Sử dụng phiên bản vừa cài:
nvm use --lts
  1. Kiểm tra lại phiên bản:
node -v
npm -v

3. Cài đặt Playwright​

Để bắt đầu một dự án mới với Playwright, hãy tạo một thư mục dự án và thực hiện lệnh khởi tạo:

  1. Tạo thư mục dự án:
mkdir my-playwright-project
cd my-playwright-project
  1. Khởi tạo Playwright:
npm init playwright@latest

Trong quá trình cài đặt, terminal sẽ hỏi một số tùy chọn (TypeScript/JavaScript, thư mục test, thêm GitHub Actions...). Bạn có thể nhấn Enter để chọn mặc định.

4. Chạy Test đầu tiên​

Sau khi cài đặt xong, Playwright sẽ tạo sẵn một file ví dụ tests/example.spec.ts. Bạn có thể chạy test bằng các cách sau:

  • Chạy tất cả các test (Chế độ Headless - không hiện trình duyệt):
npx playwright test
  • Chạy test và hiển thị trình duyệt (Headed mode):
npx playwright test --headed
  • Chạy test với trace viewer (UI Mode):
npx playwright test --ui

5. Cách mở file HTML report​

Sau khi hoàn tất việc chạy các bài kiểm thử (tests), Playwright sẽ tự động tạo ra một báo cáo chi tiết dưới dạng HTML. Để xem báo cáo này, bạn có thể thực hiện như sau:

  1. Tự động mở: Báo cáo HTML thường sẽ tự động hiển thị trên trình duyệt nếu có bất kỳ bài kiểm thử nào bị thất bại.

Report auto open on failure

  1. Mở thủ công: Nếu bạn muốn xem lại báo cáo của lần chạy gần nhất vào bất cứ lúc nào, hãy sử dụng câu lệnh sau trong terminal:
npx playwright show-report
  1. Tính năng: Báo cáo này cho phép bạn lọc kết quả theo trình duyệt, trạng thái (đạt, lỗi, bỏ qua) và nhấp vào từng bài kiểm thử để xem chi tiết các bước thực hiện, lỗi cụ thể hoặc các tệp đính kèm (như ảnh chụp màn hình hoặc video).

Lưu ý: Báo cáo mặc định được lưu trong thư mục playwright-report trong dự án của bạn.

6. Những lỗi thường gặp và cách khắc phục​

LỗiNguyên nhânCách khắc phục
Playwright browsers of version [...] are not installed.Chưa tải các trình duyệt đi kèm (Chromium, Firefox, Webkit).Chạy lệnh: npx playwright install
Permission Denied (Linux/macOS)Thiếu quyền thực thi file.Thêm sudo trước lệnh hoặc kiểm tra quyền thư mục.
Node.js version not supportedPhiên bản Node quá cũ.Dùng NVM để nâng cấp: nvm install 22
Lỗi thiếu Dependencies (Linux)Hệ thống thiếu thư viện bổ trợ cho trình duyệt.Chạy lệnh: npx playwright install-deps

Mẹo nhỏ: Để viết code và debug nhanh hơn, hãy cài đặt Extension "Playwright Test for VSCode" từ Microsoft trên VS Code Marketplace.