Playwright 1.64: kiểm thử WebMCP tool cho AI agent bên cạnh UI
Playwright 1.64 bổ sung page.webmcp và frame.webmcp, cho phép QA liệt kê và gọi các tool website đăng ký qua WebMCP. Đây là điểm móc mới để kiểm thử chức năng mà AI agent có thể sử dụng trực tiếp.
Một luồng tìm kiếm có thể hoạt động tốt khi người dùng nhập từ khóa, bấm nút và xem kết quả. Nhưng nếu website mở thêm tool cho AI agent gọi trực tiếp, UI test thôi chưa cho biết agent có nhìn thấy đúng tool, hiểu đúng mô tả và nhận được kết quả cần thiết hay không.
Playwright 1.64 bổ sung điểm kiểm thử cho tình huống này: QA có thể liệt kê và gọi trực tiếp các tool mà trang đăng ký qua WebMCP, thay vì chỉ kiểm tra bằng thao tác click trên giao diện.
WebMCP mở thêm một bề mặt cần kiểm thử
WebMCP là API trình duyệt đang ở trạng thái thử nghiệm. API này cho phép website đăng ký các hàm để AI agent có thể gọi trực tiếp, thay vì phải lần lượt tìm trường nhập liệu và thao tác trên UI.
Trong Playwright 1.64 có hai API mới:
page.webmcp: truy cập các tool được trang đăng ký.
frame.webmcp: truy cập tool trong frame.
Với đội QA, đây có thể xem là một bề mặt chức năng mới của ứng dụng. UI vẫn cần được kiểm thử, nhưng tool dành cho agent cũng cần có coverage riêng.
Hai lớp test bổ sung cho nhau:
UI test: kiểm tra nội dung hiển thị, thao tác người dùng và phản hồi trên giao diện.
Tool test: kiểm tra tool agent có thể phát hiện, gọi và nhận kết quả.
Gọi tool trực tiếp không thay thế được test nút bấm hay luồng hiển thị. Ngược lại, một UI test xanh cũng chưa chắc xác nhận được agent sử dụng tool thành công.
Thử WebMCP với Playwright 1.64
Theo ví dụ trong bản phát hành, WebMCP được bật trên Chromium bằng feature flag WebMCP. Sau đó, test có thể mở trang, lấy danh sách tool và gọi một tool cụ thể.
ts
const browser = await chromium.launch({
args: ['--enable-features=WebMCP'],
});
const page = await browser.newPage();
await page.goto('https://example.com');
for (const tool of await page.webmcp.tools())
console.log(tool.name, tool.description);
const result = await page.webmcp.callTool('add', { a: 2, b: 40 });
console.log(result.content[0].text); // "42"
Một walkthrough tối thiểu cho QA:
Khởi động Chromium với WebMCP được bật. Nếu thiếu feature flag, không nên vội kết luận trang không đăng ký tool.
Mở môi trường kiểm thử của ứng dụng.
Liệt kê tool với page.webmcp.tools() và đối chiếu tên, mô tả với yêu cầu sản phẩm.
Gọi tool bằng page.webmcp.callTool() với dữ liệu test phù hợp.
Xác minh kết quả theo đặc tả của tính năng, thay vì chỉ kiểm tra có dữ liệu trả về.
Playwright CLI cũng có lệnh để liệt kê và gọi WebMCP tool:
bash
playwright-cli webmcp-list
bash
playwright-cli webmcp-call searchcatalog --params {"query":"cats"}
Từ feature spec đến test case cho tool
Giả sử sản phẩm có tool searchcatalog để agent tìm kiếm sản phẩm. Đừng chỉ dừng ở happy path “gọi được tool và có kết quả”.
QA có thể xây dựng test case theo các nhóm sau:
Tool có xuất hiện sau khi trang tải không?
Tên tool có đúng với đặc tả không?
Description có đủ rõ để phân biệt với các chức năng khác không?
Tool xử lý input hợp lệ như thế nào?
Input thiếu, rỗng hoặc sai định dạng được xử lý ra sao?
Tool có còn sẵn sàng sau các thay đổi trạng thái mà sản phẩm hỗ trợ không?
Kết quả có phù hợp với trạng thái đăng nhập và quyền truy cập theo yêu cầu sản phẩm không?
Nếu tool nằm trong iframe, test có đang dùng đúng frame.webmcp không?
Expected result cần bám vào feature spec. Với dữ liệu hoặc quyền truy cập, không nên suy diễn từ UI: hãy kiểm tra trực tiếp nội dung tool trả về nếu đó là yêu cầu cần xác nhận.
Dùng AI để phác thảo test case, nhưng không thay thế đặc tả
AI có thể hỗ trợ QA tạo khung test case nhanh hơn. Tuy nhiên, prompt cần dựa trên thông tin đã được team xác nhận và không yêu cầu AI tự điền các field, mã lỗi hoặc quy tắc chưa có.
text
Bạn là QA automation engineer.
Hãy tạo test cases cho WebMCP tool sau:
Tool name: <toolname>
Description mong muốn: <description>
Input hợp lệ: <inputschema>
Quy tắc nghiệp vụ: <businessrules>
Kết quả mong muốn: <expectedoutput>
Quy tắc phân quyền: <authorizationrules>
Yêu cầu đầu ra:
Chia nhóm: discovery, happy path, validation, authorization, lifecycle.
Mỗi test case có precondition, input, expected result.
Nêu rõ giả định nào chưa có trong đặc tả.
Không tự bịa API, field hoặc mã lỗi.
Trước khi đưa case vào suite, QA nên rà lại:
Tên tool có khớp với dữ liệu từ tools() không?
Test discovery và test gọi tool đã được tách riêng chưa?
Assertion có kiểm tra giá trị nghiệp vụ hay chỉ kiểm tra result tồn tại?
Expected result có căn cứ từ đặc tả không?
UI test và tool test có được duy trì độc lập không?
Playwright MCP hỗ trợ WebMCP mặc định
Bản phát hành cho biết Playwright MCP hỗ trợ WebMCP theo mặc định. Các tool do trang định nghĩa sẽ được cung cấp cho agent với tiền tố webmcp.
Nếu cần tắt cơ chế này, Playwright MCP có tùy chọn:
bash
--no-webmcp
Điều này hữu ích khi team muốn tách riêng việc kiểm tra agent sử dụng tool của trang và việc kiểm tra các luồng thao tác qua UI.
Bản phát hành không nêu tiêu chí để agent luôn ưu tiên WebMCP hay UI trong mọi tình huống. Vì vậy, QA nên xác định rõ mục tiêu của từng kịch bản trước khi đánh giá kết quả.
Ghi nhận môi trường để tái hiện lỗi
Vì WebMCP là API thử nghiệm và ví dụ yêu cầu feature flag trên Chromium, bug report nên ghi rõ môi trường chạy test.
Các thông tin nên có gồm:
Browser và feature flag đã dùng, như --enable-features=WebMCP.
Tên và description của tool quan sát được.
Input test đã loại bỏ dữ liệu nhạy cảm.
Kết quả thực tế và expected result theo đặc tả.
Tool nằm ở trang chính hay trong frame.
Các bước tái hiện tối thiểu.
Khi chia sẻ log hoặc dùng AI hỗ trợ tạo test case, nên sử dụng dữ liệu test và tránh đưa token, cookie hoặc dữ liệu khách hàng vào nội dung công khai.
Playwright 1.64 không biến việc kiểm thử agent thành một bước tự động đơn giản. Nhưng page.webmcp và frame.webmcp cung cấp điểm móc rõ ràng để QA kiểm tra chính những tool mà AI agent có thể nhìn thấy và gọi — bên cạnh coverage UI vốn đã quen thuộc.