Chào các bạn QA, đặc biệt là những bạn đang trên hành trình khám phá Lộ trình Kỹ sư QA (Tester) 2025!
Chúng ta đã cùng nhau đi qua nhiều khái niệm quan trọng, từ việc hiểu Đảm bảo Chất lượng là gì, rèn luyện tư duy kiểm thử, tìm hiểu về các loại kiểm thử như Black Box, White Box, Gray Box, hay vai trò của QA trong các mô hình SDLC và phương pháp Agile. Chúng ta cũng đã chạm ngõ thế giới tự động hóa khi nói về tổng quan các công cụ Frontend.
Trong bài viết này, chúng ta sẽ lặn sâu hơn vào một khía cạnh cực kỳ mạnh mẽ của tự động hóa kiểm thử giao diện người dùng (UI) và trình duyệt: **Kiểm thử trình duyệt Headless**. Đặc biệt, chúng ta sẽ tập trung vào hai công cụ đang làm mưa làm gió trong lĩnh vực này: **Playwright** và **Puppeteer**. Nếu bạn đã đọc bài viết trước về Kiểm thử Headless Là Gì?, đây sẽ là bước tiếp theo để bạn thực hành với các công cụ cụ thể.
Mục lục
Kiểm thử Headless là gì và tại sao nó quan trọng?
Nhắc lại nhanh một chút về khái niệm headless testing. Khi chúng ta chạy tự động hóa trình duyệt ở chế độ “có đầu” (headed), bạn sẽ thấy cửa sổ trình duyệt mở ra và thực hiện các thao tác như con người. Ngược lại, khi chạy ở chế độ “không đầu” (headless), trình duyệt chạy ngầm trong bộ nhớ mà không hiển thị giao diện người dùng.
Tại sao chế độ headless lại quan trọng, đặc biệt đối với QA?
- Tốc độ: Loại bỏ việc render giao diện giúp các script chạy nhanh hơn đáng kể. Điều này cực kỳ hữu ích khi bạn cần chạy hàng trăm, thậm chí hàng nghìn trường hợp kiểm thử.
- Hiệu quả tài nguyên: Chế độ headless thường tiêu thụ ít tài nguyên CPU và RAM hơn, cho phép bạn chạy nhiều script song song trên một máy hoặc trong môi trường tích hợp liên tục (CI/CD). Tự động hóa Kiểm thử trong CI/CD là một điểm đến quan trọng trên lộ trình của chúng ta, và headless testing là mảnh ghép không thể thiếu ở đó.
- Đơn giản hóa môi trường CI/CD: Trên các máy chủ CI/CD, việc chạy trình duyệt có giao diện có thể phức tạp hoặc không khả thi. Headless testing giải quyết vấn đề này một cách triệt để.
- Lý tưởng cho các tác vụ tự động hóa khác: Ngoài kiểm thử, headless browser còn được dùng để cạo dữ liệu (web scraping), tạo PDF từ trang web, hoặc thực hiện các tác vụ tự động lặp đi lặp lại.
Playwright và Puppeteer là hai thư viện Node.js hàng đầu cho phép chúng ta điều khiển trình duyệt (hoặc nhiều trình duyệt) theo cả hai chế độ headed và headless. Chúng cung cấp API mạnh mẽ để tương tác với trang web, lấy thông tin, chụp ảnh màn hình, và nhiều hơn nữa.
Puppeteer: Người Tiên Phong từ Google Chrome
Puppeteer là một thư viện Node.js cung cấp API cấp cao để điều khiển Chrome hoặc Chromium qua DevTools Protocol. Nó được phát triển bởi đội ngũ Google Chrome và ban đầu tập trung mạnh vào việc tự động hóa trình duyệt Chrome/Chromium.
Tính năng nổi bật của Puppeteer:
- Kiểm soát mạnh mẽ Chrome/Chromium.
- Tạo PDF và ảnh chụp màn hình của các trang web.
- Cào dữ liệu (web scraping).
- Tự động hóa gửi form, kiểm thử UI, lấy thông tin.
- Mô phỏng môi trường di động (mobile emulation).
- Đọc DevTools Protocol trực tiếp.
Puppeteer rất mạnh mẽ nếu bạn chỉ cần tự động hóa trên nền tảng Chrome/Chromium và cần truy cập sâu vào DevTools Protocol.
Bắt đầu với Puppeteer
Để bắt đầu, bạn cần Node.js và npm/yarn. Cài đặt Puppeteer rất đơn giản:
npm install puppeteer # hoặc yarn add puppeteer
Khi cài đặt, Puppeteer sẽ tự động tải về một phiên bản Chromium tương thích để sử dụng.
Ví dụ code cơ bản với Puppeteer (Chụp ảnh màn hình một trang web)
Đây là một script Node.js đơn giản sử dụng Puppeteer để mở một trang web ở chế độ headless và chụp ảnh màn hình:
const puppeteer = require('puppeteer');
(async () => {
// Khởi chạy trình duyệt Chromium ở chế độ headless (mặc định là true)
// Nếu muốn chạy có giao diện, dùng { headless: false }
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
// Đi đến trang web
console.log('Đang đi đến trang evotek.vn...');
await page.goto('https://tuyendung.evotek.vn/', { waitUntil: 'networkidle2' }); // Chờ mạng ổn định
// Chụp ảnh màn hình
console.log('Đang chụp ảnh màn hình...');
await page.screenshot({ path: 'evotek_homepage.png' });
console.log('Đã chụp ảnh màn hình thành công: evotek_homepage.png');
} catch (error) {
console.error('Đã xảy ra lỗi:', error);
} finally {
// Đóng trình duyệt
await browser.close();
console.log('Trình duyệt đã đóng.');
}
})();
Lưu đoạn code trên vào một file `.js` (ví dụ: `capture.js`) và chạy bằng `node capture.js`. Bạn sẽ thấy file `evotek_homepage.png` được tạo ra.
Ví dụ này cho thấy cách thiết lập cơ bản: khởi chạy browser, tạo một trang mới (`page`), điều hướng đến URL, thực hiện một hành động (`screenshot`), và cuối cùng là đóng browser.
Playwright: Kẻ Thách Thức Đa Nền Tảng từ Microsoft
Playwright cũng là một thư viện Node.js để tự động hóa trình duyệt, nhưng nó được phát triển bởi một số cựu thành viên của nhóm Puppeteer tại Microsoft. Playwright ra đời với mục tiêu khắc phục một số hạn chế của Puppeteer và cung cấp một giải pháp tự động hóa mạnh mẽ, đáng tin cậy và hỗ trợ đa trình duyệt ngay từ đầu.
Tính năng nổi bật của Playwright:
- Hỗ trợ đa trình duyệt: Chromium, Firefox, và WebKit (engine của Safari). Điều này cho phép bạn chạy kiểm thử trên cả 3 engine trình duyệt chính chỉ với một API duy nhất.
- Tự động chờ (Auto-waiting): Playwright tự động chờ các phần tử hiển thị, khả năng tương tác (enabled), hoặc các điều kiện khác trước khi thực hiện hành động. Điều này giúp giảm đáng kể độ “flakey” (không ổn định) của các bài kiểm thử tự động.
- Chạy song song: Hỗ trợ chạy kiểm thử song song theo mặc định, tận dụng tối đa tài nguyên máy tính để giảm thời gian chạy toàn bộ bộ kiểm thử.
- Codegen: Công cụ ghi lại hành động của người dùng và tự động tạo code kiểm thử. Rất hữu ích cho việc bắt đầu nhanh hoặc khám phá các bộ chọn (selectors).
- Tracing: Cung cấp khả năng ghi lại toàn bộ quá trình thực thi test, bao gồm ảnh chụp màn hình, log hành động, snapshot DOM và video, giúp debug cực kỳ hiệu quả khi test fail.
- Hỗ trợ đa ngôn ngữ (Node.js, Python, Java, .NET).
Playwright được thiết kế đặc biệt cho mục đích kiểm thử tự động đầu cuối (end-to-end testing) và mang lại nhiều lợi thế vượt trội so với Puppeteer, đặc biệt là khả năng chạy trên nhiều trình duyệt và tính năng tự động chờ thông minh.
Bắt đầu với Playwright
Tương tự Puppeteer, bạn cần Node.js và npm/yarn. Playwright cũng tải về các binaries trình duyệt cần thiết khi cài đặt:
npm install playwright # hoặc yarn add playwright
Hoặc bạn có thể cài đặt cho từng trình duyệt cụ thể:
npm install @playwright/test # Bộ kiểm thử chính npx playwright install # Tải về tất cả các trình duyệt (Chromium, Firefox, WebKit)
Ví dụ code cơ bản với Playwright (Điền form và chụp ảnh màn hình)
Ví dụ này sử dụng Playwright để mở trang tìm kiếm của Google, gõ một từ khóa, và chụp ảnh kết quả. Playwright test runner (`@playwright/test`) cung cấp một cú pháp rất thân thiện cho việc viết kiểm thử.
// Sử dụng Playwright test runner
const { test, expect } = require('@playwright/test');
test('Tìm kiếm trên Google và chụp ảnh kết quả', async ({ page }) => {
// Đi đến trang Google
console.log('Đang đi đến trang Google...');
await page.goto('https://www.google.com');
// Tìm kiếm input field bằng tên (hoặc selector khác) và gõ từ khóa
console.log('Đang nhập từ khóa "Playwright"...');
await page.fill('[name="q"]', 'Playwright'); // Sử dụng selector CSS
// Nhấn Enter (hoặc click vào nút tìm kiếm)
console.log('Đang nhấn Enter để tìm kiếm...');
await page.press('[name="q"]', 'Enter');
// Chờ trang kết quả tải xong (Playwright có auto-wait, nhưng chờ một selector xuất hiện là tốt)
console.log('Đang chờ kết quả tìm kiếm...');
await page.waitForSelector('#searchform'); // Chờ form tìm kiếm xuất hiện lại trên trang kết quả
// Chụp ảnh màn hình của kết quả
console.log('Đang chụp ảnh màn hình kết quả...');
await page.screenshot({ path: 'google_search_results.png' });
console.log('Đã chụp ảnh màn hình thành công: google_search_results.png');
// Có thể thêm các assertion để kiểm tra kết quả
// Ví dụ: expect(await page.title()).toContain('Playwright');
});
Lưu code này vào một file `.js` hoặc `.test.js` (ví dụ: `google.test.js`) và chạy bằng lệnh `npx playwright test`. Playwright test runner sẽ tự động phát hiện và chạy test này.
Ví dụ này minh họa API thân thiện với test của Playwright, khả năng điền văn bản và tương tác bằng bàn phím, cùng với tính năng tự động chờ (mặc dù chúng ta vẫn dùng `waitForSelector` để đảm bảo trang kết quả đã render).
So sánh Playwright và Puppeteer: Chọn công cụ nào?
Đây là câu hỏi mà nhiều bạn junior QA sẽ băn khoăn. Cả hai công cụ đều xuất sắc trong việc tự động hóa trình duyệt headless, nhưng có những khác biệt quan trọng cần xem xét. Dưới đây là bảng so sánh giúp bạn đưa ra quyết định phù hợp với nhu cầu của mình:
| Tính năng | Puppeteer | Playwright |
|---|---|---|
| Nguồn gốc | Google Chrome team | Microsoft (một số cựu thành viên Puppeteer) |
| Hỗ trợ Trình duyệt | Chủ yếu Chrome/Chromium. Có thể chạy Firefox Nightly và WebKit Experimental với cấu hình bổ sung và API hạn chế hơn. |
Hỗ trợ chính thức và mạnh mẽ: – Chromium (bao gồm Chrome, Edge) – Firefox – WebKit (engine của Safari) |
| Hỗ trợ Ngôn ngữ | Chủ yếu Node.js. Có các port không chính thức cho ngôn ngữ khác. |
Node.js, Python, Java, .NET (C#). API nhất quán trên các ngôn ngữ. |
| Tự động chờ (Auto-waiting) | Hạn chế, thường cần thêm logic chờ thủ công (`page.waitForSelector`, `page.waitForTimeout`, v.v.) làm tăng độ flakey. | Mạnh mẽ và mặc định: Tự động chờ các phần tử hiển thị, khả năng tương tác (enabled, editable), hoặc các điều kiện khác trước khi thực hiện hành động. Giảm đáng kể độ flakey của test. |
| Chạy Song song | Không hỗ trợ tích hợp. Cần sử dụng các framework test runner bên ngoài (như Jest, Mocha) để quản lý chạy song song. |
Hỗ trợ tích hợp và hiệu quả thông qua Playwright test runner. Được thiết kế để chạy song song từ đầu. |
| Công cụ Hỗ trợ Test | Cần kết hợp với các test runner và thư viện assertion bên ngoài. | Đi kèm với bộ công cụ test mạnh mẽ: – Test Runner – Codegen (ghi lại test) – Tracing (debug) – Viewer (xem báo cáo HTML) |
| Tích hợp CI/CD | Tốt, nhưng cần cấu hình môi trường và test runner phù hợp. | Rất tốt, được thiết kế để hoạt động hiệu quả trong môi trường CI/CD, với báo cáo và debug hỗ trợ sẵn. Liên quan chặt chẽ đến việc tự động hóa trong CI/CD. |
| Mục đích Ban đầu | Tự động hóa Chrome (bao gồm web scraping, PDF, test). | Tự động hóa và kiểm thử đầu cuối đa trình duyệt đáng tin cậy. |
Khi nào dùng Puppeteer?
- Khi bạn chỉ cần tự động hóa hoặc kiểm thử trên Chrome/Chromium.
- Khi bạn cần truy cập sâu vào DevTools Protocol cho các tác vụ chuyên biệt (ví dụ: mô phỏng network conditions rất chi tiết, theo dõi hiệu năng cụ thể).
- Khi bạn đã có sẵn một dự án sử dụng Puppeteer và không có nhu cầu lớn về kiểm thử đa trình duyệt hoặc các tính năng nâng cao khác của Playwright.
Khi nào dùng Playwright?
- Khi bạn cần chạy kiểm thử trên nhiều trình duyệt (Chromium, Firefox, WebKit). Đây là lợi thế cạnh tranh lớn nhất của Playwright.
- Khi bạn ưu tiên sự ổn định của test (giảm flakey test) nhờ tính năng tự động chờ mạnh mẽ.
- Khi bạn muốn tận dụng các công cụ tích hợp sẵn hỗ trợ việc viết, chạy và debug test như Codegen, Tracing, và Test Runner tích hợp cho chạy song song và báo cáo.
- Khi bạn đang bắt đầu một dự án tự động hóa kiểm thử mới và muốn sử dụng công cụ hiện đại, được hỗ trợ tốt cho kiểm thử đầu cuối.
- Khi team của bạn làm việc với nhiều ngôn ngữ lập trình khác nhau (ví dụ: dev dùng C#/.NET, QA dùng Node.js/Python).
Nhìn chung, đối với đa số các dự án tự động hóa kiểm thử giao diện người dùng hiện đại, **Playwright thường là lựa chọn ưu tiên** nhờ khả năng hỗ trợ đa trình duyệt mạnh mẽ, tính năng tự động chờ thông minh, và bộ công cụ hỗ trợ test tích hợp.
Lời khuyên thực tế cho QA Juniors
- Bắt đầu với một công cụ: Đừng cố gắng học cả hai cùng lúc. Nếu dự án hiện tại của bạn đang dùng Puppeteer, hãy học Puppeteer. Nếu bạn đang bắt đầu một dự án mới hoặc có quyền lựa chọn, Playwright là một điểm khởi đầu tuyệt vời trên Lộ trình QA của bạn.
- Hiểu rõ Selector: Dù dùng công cụ nào, việc xác định các bộ chọn (CSS Selectors, XPath, Text Selectors, v.v.) là kỹ năng cốt lõi. Hãy dành thời gian luyện tập cách tìm và tạo ra các selector đáng tin cậy.
- Xử lý chờ (Waiting): Mặc dù Playwright có auto-wait, bạn vẫn cần hiểu các chiến lược chờ khác nhau (`waitForSelector`, `waitForURL`, `waitForFunction`, v.v.) để xử lý các tình huống phức tạp. Với Puppeteer, việc quản lý các lệnh chờ này là kỹ năng bắt buộc để tránh test fail ngẫu nhiên.
- Debug là bạn: Khi test fail, đừng ngại ngần bật chế độ “có đầu” (`headless: false` trong Puppeteer, hoặc chế độ debug/`–headed` trong Playwright) để xem điều gì đang xảy ra trên trình duyệt. Sử dụng các công cụ như tracing trong Playwright để xem lại toàn bộ quá trình.
- Tích hợp vào workflow: Mục tiêu cuối cùng của tự động hóa là tích hợp vào quy trình phát triển, đặc biệt là CI/CD. Sau khi làm quen với Playwright hoặc Puppeteer, hãy tìm hiểu cách chạy chúng trong pipeline CI/CD của bạn (đọc thêm về CI/CD ở đây).
- Kết hợp với các loại kiểm thử khác: Headless browser testing rất tốt cho kiểm thử UI đầu cuối và kiểm thử chức năng. Tuy nhiên, đừng quên các lớp kiểm thử khác như kiểm thử API (ví dụ với Postman/Newman) hoặc kiểm thử hiệu năng (ví dụ với JMeter/K6). Một bộ kiểm thử hiệu quả là sự kết hợp của nhiều phương pháp.
Kết luận
Playwright và Puppeteer là hai công cụ cực kỳ mạnh mẽ và linh hoạt cho phép chúng ta tự động hóa tương tác với trình duyệt, đặc biệt là ở chế độ headless. Khả năng này không chỉ giúp tăng tốc độ và hiệu quả của các bài kiểm thử UI mà còn mở ra nhiều cánh cửa cho các tác vụ tự động hóa khác.
Puppeteer là lựa chọn tuyệt vời nếu bạn làm việc chủ yếu với Chrome và cần kiểm soát sâu. Playwright, với khả năng đa trình duyệt, tự động chờ thông minh và bộ công cụ tích hợp phong phú, đang trở thành tiêu chuẩn mới cho kiểm thử tự động đầu cuối hiện đại.
Việc làm chủ một trong hai công cụ này, hoặc ít nhất là hiểu về chúng, là một kỹ năng vô giá trên lộ trình phát triển của Kỹ sư QA. Nó giúp bạn tự tin hơn trong việc xây dựng và duy trì các giải pháp tự động hóa hiệu quả, đóng góp vào việc đảm bảo chất lượng phần mềm một cách bền vững.
Hãy bắt tay vào thực hành, cài đặt, và thử nghiệm với các đoạn code mẫu. Cách tốt nhất để học là làm!
Hẹn gặp lại các bạn ở các bài viết tiếp theo trong series “QA Engineer (Tester) Roadmap”! Chúng ta sẽ cùng nhau khám phá thêm nhiều khía cạnh thú vị khác của nghề QA hiện đại.
