Hướng Dẫn Sử Dụng Playwright: Tự Động Hóa Kiểm Thử Ứng Dụng Web Đơn Giản Và Hiệu Quả
Playwright là thư viện mã nguồn mở của Microsoft dùng để tự động hóa kiểm thử ứng dụng web, hỗ trợ nhiều trình duyệt như Chrome, Firefox và Safari, giúp lập trình viên viết kịch bản kiểm thử hiệu quả.
1. Giới thiệu về Playwright:
Playwright là một thư viện tự động hóa trình duyệt mã nguồn mở do Microsoft phát triển, hỗ trợ kiểm thử ứng dụng web trên nhiều trình duyệt khác nhau như Chromium, Firefox, WebKit và Microsoft Edge. Công cụ này được thiết kế để giúp các nhà phát triển và kiểm thử viên viết các bài kiểm thử tự động với hiệu suất cao và đáng tin cậy.
2. Các tính năng nổi bật:
- Hỗ trợ đa trình duyệt: Chạy trên Chromium, Firefox, WebKit (có thể kiểm thử trên Chrome, Edge, Safari). Hỗ trợ cả chế độ headless (không giao diện) và headed (có giao diện).
- Hỗ trợ đa nền tảng: Chạy được trên Windows, macOS, Linux, kể cả trong Docker.
- Kiểm thử song song: Tăng tốc kiểm thử nhờ khả năng chạy song song trên nhiều trình duyệt/tabs.
- Giả lập môi trường người dùng: Thao tác như người dùng thực tế: nhập liệu, cuộn trang, di chuột, tải tệp... Giả lập mạng chậm, thiết bị di động, vị trí địa lý.
3. Khi nào nên dùng Playwright:
- Khi bạn muốn kiểm thử giao diện web tự động với hiệu suất cao và độ tin cậy cao.
- Khi cần kiểm thử trên nhiều trình duyệt cùng lúc mà không cần cấu hình phức tạp.
- Khi muốn giả lập môi trường người dùng một cách dễ dàng.
4. Cách cài đặt Playwright và chạy với VS Code:
- Cài đặt Node.js tại https://nodejs.org/en
- Sau khi download và chạy file xong,bạn nên kiểm tra lại phiên bản của node.js, mở Command Prompt (cmd) chạy lệnh sau “node -v”. Nếu thấy kết quả dạng v16.x.x, v18.x.x, v20.x.x thì OK để dùng Playwright. Phiên bản dưới v16 quá cũ thì nên cập nhật lại phiên bản mới hơn.
- Tạo thư mục: Mở Terminal trên VS Code hoặc cmd để chạy lệnh “npm init playwright@latest my-project” tạo project có tên my-project.
· npx: Chạy gói create-playwright mà không cần cài đặt trước.
· create-playwright my-project: Lệnh này sẽ tạo thư mục my-project và thiết lập cấu trúc thư mục cần thiết.
· Tiếp theo sẽ hỏi bạn muốn sử dụng TypeScript hoặc JavaScript: TypeScript mã sẽ có hỗ trợ kiểu dữ liệu (.ts) và JavaScript là .spec.js . Chọn JavaScript làm ngôn ngữ lập trình cho các test case.
· Mặc định, Playwright sẽ tạo thư mục e2e/ để chứa các file test.
· Thêm quy trình làm việc GitHub Actions: Nếu chọn true, Playwright sẽ tạo một workflow CI/CD cho GitHub Actions. Chọn false, tức là không thêm file .github/workflows/playwright.yml.
· Tải Playwright xuống browsers: Chọn true thì tự động cài đặt các trình duyệt Playwright cần thiết (Chromium, Firefox, WebKit).
- Mở VS Code và Open folder tới my-project lúc nãy tạo.
· node_modules/ → Chứa thư viện cần thiết.
· playwright-report/ → Lưu báo cáo test.
· test-results/ → Lưu kết quả test (logs, ảnh chụp màn hình).
· .gitignore → Bỏ qua file không cần commit.
· package.json → Quản lý dependencies & script chạy test.
· package-lock.json → Đảm bảo phiên bản dependencies cố định.
· playwright.config.js → Cấu hình test (trình duyệt, thời gian chờ, báo cáo, v.v.).
Các file này giúp cài đặt, quản lý, chạy và lưu kết quả test tự động
Ta có các file như sau: Trong thư mục test chính là các testcase để tạo mới nhớ file có đuôi .spec.js
Kiểm tra điều hướng khi nhấn vào 'Liên Hệ' trên trang web http://xaydungphamem.com/
Để chạy testcase ta thực hiện như sau:
Nhấn vào nút ba chấm -> Nhấn Terminal -> New Terminal
Tại bên dưới ta chạy lệnh npx playwright test tests/test.spec.js -> xpx playwright show- report.
Chạy xong hiển thị như sau: đây là báo cáo kết quả test của Playwright, chạy qua 3 trình duyệt chromium, firefox, webkit đều Passed chứng tỏ là chạy thành công. Với Playwright giúp ta kiểm thử tự động bằng cách viết code để kiểm tra tính tương thích của ứng dụng trên nhiều nền tảng. Báo cáo hiển thị rõ ràng, dễ dàng đánh giá kết quả. Chạy nhiều test cùng lúc mà không cần kiểm thử thủ công từng trình duyệt. Phát hiện lỗi sớm giúp giảm chi phí sửa lỗi sau này.
Uyển Nhi
XƯỞNG THỰC TẬP PLT SOLUTIONS
www.youtube.com/@pltsolutions3010