Playwright: Kiểm Thử Web và Tự Động Hoá Trình Duyệt

Playwright Là Gì

Playwright là framework tự động hoá và kiểm thử web do Microsoft xây dựng. Nó điều khiển Chromium, Firefox, và WebKit qua một API duy nhất, và có năm lối vào: Playwright Test cho bộ kiểm thử end-to-end, một CLI và MCP server cho coding agent và AI agent, một Library trần cho script, và một extension VS Code. Cùng một engine vận hành cả test, script, lẫn việc điều khiển trình duyệt của một agent.

Năng Lực Kiểm Thử Cốt Lõi

• ✓Playwright Test chạy cùng một bộ kiểm thử trên Chromium, Firefox, và WebKit song song, mỗi test được cấp một browser context cô lập, mới hoàn toàn, theo mặc định.
• ✓Auto-wait và assertion kiểu web-first loại bỏ timeout thủ công: Playwright chờ đến khi phần tử có thể thao tác được, và assertion tự động thử lại đến khi điều kiện đúng.
• ✓Các locator như getByRole, getByLabel, getByPlaceholder, và getByTestId nhắm vào phần tử theo cách người dùng thật sự nhìn thấy trang, thay vì dựa vào CSS selector dễ vỡ.
• ✓Tracing ghi lại screenshot, video, DOM snapshot, network request, và console output cho từng hành động, xem lại sau đó trong Trace Viewer.
• ✓Cô lập test chạy mỗi test trong một browser context riêng — README ví nó như một browser profile hoàn toàn mới — với trạng thái đăng nhập có thể lưu lại và tái sử dụng giữa các test qua storageState.
• ✓Extension VS Code thêm khả năng chạy và debug test chỉ với một cú click, trình ghi CodeGen tự viết code test khi bạn click qua ứng dụng, và một công cụ chọn locator.

Ngoài Kiểm Thử: AI Agent và Viết Script

• •Các coding agent như Claude Code hay Copilot có thể điều khiển trình duyệt qua Playwright CLI, được README mô tả là tiết kiệm token hơn MCP vì các lệnh không cần nạp tool schema lớn hay accessibility tree vào ngữ cảnh của model.
• •AI agent có toàn quyền điều khiển trình duyệt qua Playwright MCP server, đọc accessibility snapshot có cấu trúc và tham chiếu phần tử bằng ref ID như e5 hay e10 thay vì phân tích screenshot.
• •Library trần cho phép bạn viết script cho các tác vụ trình duyệt ngoài một test runner: chụp screenshot, xuất PDF từ một trang, hay giả lập thiết bị di động với preset devices.
• •Chặn network qua page.route() có thể giả lập response hoặc chặn request — hữu ích cho luồng thu thập dữ liệu web hoặc kiểm thử hành vi trang khi thiếu một số tài nguyên.

Bắt Đầu Với Playwright

Cách cài đặt phụ thuộc vào bạn muốn dùng lối vào nào trong năm lối vào. Để kiểm thử end-to-end, chạy `npm init playwright@latest`, hoặc thêm thủ công bằng `npm i -D @playwright/test` rồi `npx playwright install` để tải các browser binary. Để dùng cho coding agent AI, `npm i -g @playwright/cli@latest` cài CLI; chạy `playwright-cli install --skills` để thêm skill tuỳ chọn cho tích hợp agent sâu hơn. Để dùng cho AI agent qua MCP, `npx @playwright/mcp@latest` khởi động MCP server, hoặc bạn có thể đăng ký trực tiếp bằng `claude mcp add playwright npx @playwright/mcp@latest` cho Claude Code. Để viết script tự động hoá thuần tuý, `npm i playwright` cài Library. Extension VS Code cài từ Marketplace với tên ms-playwright.playwright.

Viết và Debug Test

Một test import `test` và `expect` từ `@playwright/test`, gọi `page.goto()` để mở một URL, rồi assert bằng thứ gì đó như `expect(page).toHaveTitle(/Playwright/)`. Chạy bộ test bằng `npx playwright test`. Nó chạy song song trên các browser được liệt kê trong config, mặc định ở chế độ headless. Khi một test fail, đặt `trace: 'on-first-retry'` trong playwright.config.ts rồi mở lại bằng `npx playwright show-trace trace.zip` để xem từng hành động, DOM snapshot, và network request dẫn đến lỗi. Extension VS Code phủ cùng luồng làm việc đó theo cách trực quan: đặt breakpoint, xem trình duyệt chạy trực tiếp trong lúc test chạy, và dùng CodeGen để sinh code locator bằng cách tự click qua trang.

So Sánh Playwright Với Các Công Cụ Khác

Ai Được Lợi Từ Playwright

Các team cần một bộ kiểm thử chạy trên cả Chromium, Firefox, và WebKit mà không cần driver riêng cho từng trình duyệt sẽ tận dụng được auto-wait và mô hình cô lập của Playwright Test. Nhà phát triển xây coding agent hay luồng làm việc AI agent có ba lối vào riêng để chọn: CLI cho lệnh agent tiết kiệm token, MCP server để LLM điều khiển trình duyệt qua accessibility snapshot, và Library trần cho tự động hoá bằng script như scraping hay xuất PDF. Nếu bạn chỉ kiểm thử trên một trình duyệt và không đụng đến agent tooling, một công cụ hẹp hơn có thể đỡ tốn công cài đặt hơn.

Câu Hỏi Thường Gặp

Vấn Đề Playwright Giải Quyết

Kiểm thử một ứng dụng web trên nhiều engine trình duyệt thường có nghĩa là phải ghép nhiều driver riêng và chiến lược chọn phần tử riêng cho từng trình duyệt, rồi viết lại logic chờ bằng tay mỗi khi một bản cập nhật giao diện làm lệch thời gian layout. README của Playwright đóng khung lý do tồn tại của dự án quanh khoảng trống đó: một API điều khiển Chromium, Firefox, và WebKit, với auto-wait và assertion kiểu web-first được tích hợp sẵn trong test runner thay vì để mỗi người viết test tự xử lý, và cùng bộ driver đó giờ còn đóng vai trò điều khiển trình duyệt cho AI agent thay vì cần một stack tự động hoá thứ hai cho luồng làm việc do LLM dẫn dắt.

Repo liên quan