Ở bài viết: Tự học automation test cho người mới bắt đầu mình đã giới thiệu qua về các lộ trình tự học automation. Về phần Học một tool Automation Test phổ biến, mình sẽ giới thiệu cụ thể về lộ trình học để code được Playwright sử dụng Javascript cho người mới bắt đầu Vì sao mình lại chọn Playwright sử dụng Javascript, vì nó dễ tiếp cận, dễ học, cồng động phát triển nhanh, ít lỗi, dễ tích hợp CI/CD. Nếu bạn muốn học Playwright với Javascript từ đầu, dưới đây là hướng dẫn cụ thể gồm:
- Cách cài đặt & setup project
- Viết test case đầu tiên
- Chạy test tự động
- Quản lý cấu trúc thư mục và báo cáo
Để có thể học code được playwright bạn cần phải tự học về Javascript cơ bản, các khái niệm và cách dùng biến, mảng, các toán tử (gán, số học, logic, nối chuỗi, type of), câu điều kiện (if, if...else, switch case), vòng lặp (for, forEach, for...in, for...of), hàm, class, OOP,... Bạn có thể tham khảo một số nguồn để học như sau: freeCodeCamp, w3schools, youtube, udemy,... Ví dụ một nguồn học mình thấy khá chi tiết là w3schools: https://www.w3schools.com/js/
1. Cách cài đặt & setup project
BƯỚC 1: Cài đặt môi trường Node.js: tải tại https://nodejs.org VS Code: code editor miễn phí
Kiểm tra đã cài node chưa:
node -v
npm -v
BƯỚC 2: Tạo project Playwright với TypeScript
- Tạo thư mục & khởi tạo project
mkdir playwright-demo
cd playwright-demo
npm init -y
- Cài Playwright + TypeScript
npm install -D @playwright/test typescript ts-node
npx playwright install
- Cấu hình Playwright
npx playwright test init
Thao tác này sẽ tạo:
- playwright.config.ts – file cấu hình chính
- /tests/example.spec.ts – test mẫu
- .vscode – auto config cho VS Code
- .gitignore, package.json, v.v.
BƯỚC 3: Cấu trúc thư mục nên có
playwright-demo/
│
├── tests/
│ ├── example.spec.ts # test case mẫu
│ └── login.spec.ts # (bạn tạo)
│
├── tests-data/ # dữ liệu test tách riêng (nếu có)
├── playwright.config.ts # cấu hình
├── package.json
└── tsconfig.json # cấu hình TypeScript
2. Viết test case đầu tiên
Mục tiêu của case này để tạo 1 case test login thành công trên trang OrangeHRM Link trang: https://opensource-demo.orangehrmlive.com/ Các bước của test case:
- Truy cập trang login của trang
- Kiểm tra tiêu đề đúng để verify đến đúng trang
- ĐIền username/password
- Nhấn nút đăng nhập
- Kiểm tra URL đúng sau login Tạo file tests/login.spec.ts
import { test, expect } from '@playwright/test'; test('Login page has correct title', async ({ page }) => { await page.goto('https://opensource-demo.orangehrmlive.com/'); await expect(page).toHaveTitle(/OrangeHRM/); await page.fill('input[name="username"]', 'Admin'); await page.fill('input[name="password"]', 'admin123'); await page.click('button[type="submit"]'); await expect(page).toHaveURL(/dashboard/);
});
Về câu lệnh đầu tiên:
import { test, expect } from '@playwright/test';
- test: dùng để viết các test case. Mỗi test() là 1 kịch bản kiểm thử.
- expect: dùng để kiểm tra kết quả (assertion), giống như so sánh đầu ra/thực tế với mong đợi.
test('Login page has correct title', async ({ page }) => {
'Login page has correct title': tên của test case – nên đặt dễ hiểu. async ({ page }) => { ... }: test chạy bất đồng bộ, page là đối tượng đại diện cho trình duyệt (giống tab Chrome).
await page.goto('https://opensource-demo.orangehrmlive.com/');
goto(url): truy cập vào trang web. Dùng await vì đây là hàm bất đồng bộ (phải chờ trang load xong).
await expect(page).toHaveTitle(/OrangeHRM/);
Kiểm tra tiêu đề trang chứa từ "OrangeHRM".
Dùng /.../ là regex (biểu thức chính quy) để kiểm tra 1 phần tiêu đề
await page.fill('input[name="username"]', 'Admin'); await page.fill('input[name="password"]', 'admin123');
fill(selector, text): điền dữ liệu vào ô input. Ở đây, điền username và password đúng để login. input[name="username"] là CSS Selector – dùng để xác định vị trí phần tử trên trang web.
await page.click('button[type="submit"]');
click(selector): hành động click chuột. Ở đây là nhấn nút “Login”.
await expect(page).toHaveURL(/dashboard/);
Sau khi đăng nhập thành công, URL sẽ chứa "dashboard".
toHaveURL() là cách để kiểm tra trang đã chuyển đúng sau hành động.
3. Chạy test tự động
Để chạy test tự động ta dùng lệnh trên command:
npx playwright test
Với lệnh này playwright sẽ: Tự chạy test trong chế độ headless, hiển thị kết quả rõ ràng trong terminal
Để chạy test case cụ thể, cần dùng lệnh:
npx playwright test tests/login.spec.ts
Để chạy ở chế độ debug, ta dùng lệnh
npx playwright test --debug
Lệnh này sẽ giúp mở giao diện debug, xem browser chạy từng bước
4. Tạo báo cáo test
Để tạo báo cáo test ta dùng lệnh
npx playwright show-report
Lệnh này sẽ mở tự động báo cáo test HTML
Trên đây mình mới giới thiệu qua về cách chạy 1 case đơn giản test login thành công, tự dựa vào đấy bạn có thể tự tạo các test case khác, ví dụ: Test login thất bại Test logout
Để tự học thêm về playwright, hiểu thêm về các cách sử dụng, các tính năng tuyệt vời của playwright bạn cần đọc thêm tại Playwright docs: https://playwright.dev/docs/intro Chúc bạn sớm thành công, comment nếu có bất cứ câu hỏi nào cần mình giải đáp nhé ^^