Chào mọi người. Trong quá trình làm việc, một trong những khâu mình thấy tốn thời gian nhất nhưng lại ít được đầu tư đúng mức chính là verify trên trình duyệt sau khi hoàn thành một chức năng. Code chạy pass unit test không có nghĩa là luồng thao tác thực tế trên UI hoạt động đúng. Bài viết này là một hướng dẫn hands-on: mình sẽ đi qua cách setup Claude Code kết hợp Playwright MCP, rồi biến nó thành một trợ lý có thể tự mở trình duyệt, thao tác như người dùng thật và báo cáo lại kết quả. Toàn bộ lệnh và prompt trong bài đều có thể copy chạy ngay.

Mình sẽ giữ mọi thứ ở mức thực dụng: không lý thuyết dài dòng, tập trung vào thứ bạn gõ vào terminal và thứ bạn nhận lại.

Vấn đề: verify thủ công là nút thắt cổ chai

Hãy hình dung một quy trình quen thuộc. Bạn code xong một form đăng ký. Bạn chạy test backend, tất cả xanh. Nhưng để chắc chắn, bạn vẫn phải:

1. Khởi động dev server.

2. Mở trình duyệt, điều hướng tới đúng trang.

3. Điền form với vài bộ dữ liệu khác nhau (hợp lệ, thiếu field, email sai định dạng).

4. Kiểm tra thông báo lỗi, kiểm tra redirect, kiểm tra state sau khi submit.

5. Lặp lại khi phát hiện bug và sửa xong.

Mỗi vòng lặp tốn vài phút, và nó lặp lại hàng chục lần mỗi ngày. Vấn đề không nằm ở độ khó, mà ở chỗ nó ngắt mạch tập trung: bạn phải rời khỏi editor, chuyển context sang thao tác chuột, rồi quay lại. Đó là kiểu công việc lặp đi lặp lại mà một agent hoàn toàn có thể gánh phần lớn.

Câu hỏi đặt ra: làm sao để agent không chỉ sinh code, mà còn tự mình mở trình duyệt, thao tác trên chính ứng dụng đang chạy, và xác nhận rằng chức năng thật sự hoạt động? Đây chính là chỗ Playwright MCP xuất hiện.

Các khái niệm cốt lõi

Trước khi gõ lệnh, cần nắm ba mảnh ghép.

Claude Code là agent lập trình chạy trực tiếp trong terminal của Anthropic. Vì nó là công cụ dòng lệnh nên bạn có thể script nó, đưa output sang công cụ khác, và chạy nó trong CI mà không cần giao diện đồ họa nào.

MCP (Model Context Protocol) là giao thức mở cho phép agent kết nối tới các "server" cung cấp công cụ và dữ liệu bên ngoài. Bạn có thể hình dung MCP như một cổng cắm chuẩn: thay vì mỗi công cụ tự chế một cách tích hợp riêng, tất cả nói chung một ngôn ngữ để agent gọi được.

Playwright MCP là server MCP chính thức của Microsoft, đóng gói dưới tên @playwright/mcp. Nó cấp cho agent quyền điều khiển một trình duyệt thật (Chromium, Firefox hoặc WebKit) thông qua hơn 30 công cụ như browser_navigate, browser_click, browser_type, browser_snapshot. Điểm quan trọng nhất về mặt kỹ thuật: Playwright MCP không dựa vào ảnh chụp màn hình để hiểu trang. Nó đọc cây accessibility của trang và trả về một snapshot dạng văn bản có cấu trúc.

Chi tiết này đáng để dừng lại. Một snapshot accessibility chỉ tốn khoảng 200 tới 400 token, trong khi truyền cả DOM thô hoặc ảnh chụp màn hình cho model tốn tới hàng nghìn token. Hệ quả là thao tác nhanh hơn, rẻ hơn, và quan trọng là mang tính xác định: agent click vào một phần tử được tham chiếu (ref) từ cây accessibility, chứ không phải đoán tọa độ pixel. Locator sinh ra vì thế ổn định và mang ngữ nghĩa.

Hands-on: kết nối Playwright MCP vào Claude Code

Bài viết giả định bạn đã dùng Claude Code hằng ngày, nên mình bỏ qua phần cài đặt agent và đi thẳng vào việc gắn Playwright MCP. Chỉ có hai tiền đề nhỏ đáng lưu ý và đều thuộc về Playwright chứ không phải Claude Code: server yêu cầu Node.js phiên bản 18 trở lên, và bộ binary trình duyệt chiếm khoảng 700 MB sau khi cài, nên hãy chắc chắn còn đủ chỗ trống.

Bước 1: Đăng ký Playwright MCP với Claude Code

Đây là lệnh trọng tâm của cả bài. Chỉ một dòng:

claude mcp add playwright pnpm dlx @playwright/mcp@latest

Lệnh này ghi cấu hình để mỗi lần chạy claude, server Playwright sẵn sàng được gọi.

Về phạm vi (scope), bạn nên cân nhắc dùng cờ --scope:

# Dùng cho cá nhân, áp dụng trên mọi project
claude mcp add --scope user playwright pnpm dlx @playwright/mcp@latest

# Dùng chung cho cả team, ghi vào .mcp.json để commit vào version control
claude mcp add --scope project playwright pnpm dlx @playwright/mcp@latest

Với --scope project, cấu hình được lưu vào file .mcp.json ở gốc repo, nghĩa là cả team clone về là dùng được ngay, không ai phải setup lại. Đây là cách mình khuyến nghị cho môi trường làm việc nhóm.

Một mẹo thực tế cho CI hoặc cấu hình dùng chung: thay vì ghim @latest, hãy ghim một phiên bản cụ thể (ví dụ @playwright/mcp@0.x.y). Bản @latest đôi khi kéo về bản beta khiến một vài tool thất thường, và trong pipeline thì tính ổn định quan trọng hơn tính mới.

Bước 2: Cài binary trình duyệt

Nếu đây là lần đầu dùng Playwright trên máy, cài binary:

pnpm dlx playwright install

Trên Linux hoặc trong Docker, bạn cần thêm các thư viện hệ thống mà trình duyệt phụ thuộc:

pnpm dlx playwright install-deps

Nếu bỏ qua bước này trên Linux, phần lớn lỗi setup sẽ xuất phát từ đây, hoặc từ việc pnpm dlx không tìm thấy đúng bản Node, hoặc do proxy công ty chặn CDN của Playwright.

Bước 3: Xác minh kết nối

Khởi động Claude Code trong thư mục project:

claude

Trong phiên làm việc, gõ lệnh sau để xem danh sách công cụ Playwright đã nạp:

/mcp

Chọn playwright để duyệt toàn bộ tool khả dụng. Sau đó thử một câu lệnh tự nhiên:

Dùng playwright mcp mở trình duyệt tới https://demo.playwright.dev/todomvc và thêm vài mục todo

Một cửa sổ Chrome sẽ hiện ra trước mắt bạn (mặc định Playwright MCP chạy ở chế độ headed để bạn nhìn thấy mọi thao tác) và Claude sẽ tự điều khiển. Một lưu ý nhỏ từ kinh nghiệm cộng đồng: lần đầu nên nói rõ cụm "playwright mcp" trong prompt, nếu không agent đôi khi lại cố chạy Playwright bằng Bash thay vì gọi server MCP.

Case study: Verify một form đăng nhập ngay sau khi code xong

Giờ mình sẽ đi qua tình huống thực tế mà bài viết này hướng tới: bạn vừa code xong màn hình đăng nhập và muốn xác nhận nó hoạt động trước khi tạo pull request.

Giả sử dev server đang chạy ở http://localhost:3000. Trong phiên Claude Code, bạn có thể mô tả kịch bản bằng tiếng Việt tự nhiên:

Dùng playwright mcp verify màn hình đăng nhập ở http://localhost:3000. Hãy kiểm tra ba trường hợp:
1. Đăng nhập với email và mật khẩu hợp lệ, xác nhận màn hình hiển thị "Đăng nhập thành công" với email đúng với thông tin đã nhập. Xem thông tin đăng nhập tại README.md
2. Đăng nhập với mật khẩu sai, xác nhận hiển thị đúng thông báo lỗi.
3. Bỏ trống email rồi submit, xác nhận có validation phía client.
Chụp snapshot ở mỗi bước và báo cáo lại kết quả từng trường hợp.

Đằng sau hậu trường, chuỗi công cụ được gọi sẽ đại khái như sau. Agent dùng browser_navigate để mở trang, dùng browser_snapshot để đọc cấu trúc và tìm ra ô input theo ngữ nghĩa (không phải theo tọa độ), dùng browser_type để điền dữ liệu, browser_click để bấm nút submit, và browser_wait_for để chờ trạng thái mới xuất hiện. Với mỗi trường hợp, nó đối chiếu kết quả thực tế với kỳ vọng bạn đã nêu.

Điểm mấu chốt về giá trị: vì agent verify trực tiếp trên trang sống, khi bạn yêu cầu nó sinh luôn file test Playwright, các test đó thường pass ngay lần chạy đầu, bởi locator đã được kiểm chứng trên DOM thật thay vì đoán mò. Bạn có thể nối tiếp:

Kịch bản trên chạy đúng rồi. Hãy sinh file test Playwright end-to-end
tương ứng, dùng locator theo accessibility role, và lưu vào thư mục e2e/.

Ứng dụng cho công việc hằng ngày

Ngoài verify sau feature, cùng bộ công cụ này giải quyết nhiều việc lặt vặt hằng ngày mà không cần viết script:

Kiểm tra nhanh một luồng regression trước khi deploy, bằng cách mô tả các bước bằng lời. Trích xuất dữ liệu từ một trang render động (thứ mà curl không lấy được vì nội dung do JavaScript sinh ra). Tái hiện một bug flaky khó bắt, bằng cách yêu cầu agent lặp lại luồng nhiều lần trong trình duyệt thật và ghi lại console log cùng network request. Kiểm tra một tác vụ cần phiên đăng nhập, vì Playwright MCP giữ trạng thái đăng nhập và cookie giữa các bước trong cùng phiên.

Với các phiên cần đăng nhập lặp lại, bạn có thể trỏ tới một thư mục hồ sơ trình duyệt riêng để giữ session:

claude mcp add playwright pnpm dlx @playwright/mcp@latest --user-data-dir=./playwright-profile

Còn khi chạy trong CI, hãy bật chế độ headless để không cần màn hình:

pnpm dlx @playwright/mcp@latest --headless

Đánh đổi và giới hạn

Không có công cụ nào miễn phí về mặt đánh đổi, và phần này quan trọng ngang phần setup.

Chi phí token. Dù snapshot accessibility rẻ hơn ảnh chụp màn hình nhiều lần, một phiên verify dài với nhiều bước vẫn cộng dồn token. Cách kiểm soát là viết prompt cụ thể, hạn chế chụp screenshot khi không cần, và đặt điều kiện dừng rõ ràng để agent không lang thang.

Rủi ro bảo mật với công cụ thực thi code. Playwright MCP có tool browser_run_code_unsafe cho phép chạy JavaScript Playwright tùy ý trong tiến trình server. Nó mạnh nhưng tương đương với thực thi mã từ xa (RCE), nên chỉ bật cho client mà bạn hoàn toàn tin tưởng. Với luồng verify thông thường bạn không cần tới nó.

Bot detection và session hết hạn. Một số trang production có cơ chế chống bot có thể chặn trình duyệt tự động. Session đăng nhập cũng có thể hết hạn giữa chừng. Đây là các vấn đề đã biết và có cách xử lý, nhưng bạn cần lường trước khi verify trên môi trường thật thay vì local.

Không thay thế test có chủ đích. Agent verify rất tốt cho vòng lặp nhanh và khám phá, nhưng nó không thay thế một bộ test được thiết kế cẩn thận với các edge case mà con người đã suy nghĩ kỹ. Hãy xem nó là công cụ tăng tốc, không phải là toàn bộ chiến lược kiểm thử.

Khi nào nên dùng và khi nào nên tránh

Để chốt lại một cách thực dụng.

Nên dùng khi: bạn muốn rút ngắn vòng lặp "code xong rồi kiểm tra tay" sau mỗi feature; bạn cần khám phá hành vi UI bằng ngôn ngữ tự nhiên mà chưa muốn viết test formal; bạn cần trích xuất dữ liệu từ trang render động; hoặc bạn muốn agent tự sinh test Playwright đã được kiểm chứng trên trang thật.

Nên cân nhắc kỹ hoặc tránh khi: bạn cần một bộ test edge case then chốt đòi hỏi tư duy con người; bạn làm việc trên môi trường có cơ chế chống bot mạnh; hoặc luồng của bạn phụ thuộc vào độ chính xác pixel tuyệt đối mà cách tiếp cận theo accessibility tree không mô tả hết. Trong những trường hợp này, agent vẫn có ích ở khâu khám phá, nhưng quyết định cuối cùng nên thuộc về test được viết có chủ đích.

Kết

Giá trị lớn nhất của việc ghép Claude Code với Playwright MCP không nằm ở chỗ nó thay thế bạn, mà ở chỗ nó xóa đi khoảng ngắt mạch giữa "viết xong code" và "biết chắc code chạy đúng trên trình duyệt". Bạn mô tả kịch bản bằng lời, agent thao tác trên ứng dụng thật, và bạn nhận lại một báo cáo cùng bộ test có thể commit. Setup chỉ mất khoảng mười phút, phần lớn thời gian còn lại là để bạn học cách viết prompt cho gọn và cụ thể.

Nếu bạn đang thấy khâu verify thủ công là nút thắt trong ngày làm việc của mình, hãy thử chạy đúng lệnh ở Bước 1 và verify chức năng gần nhất bạn vừa hoàn thành. Đó là cách nhanh nhất để cảm nhận sự khác biệt.