Bạn đang tìm một công cụ giúp viết test E2E bằng ngôn ngữ tự nhiên mà không cần nhiều kỹ năng lập trình? Hãy thử ngay Playwright MCP – một công cụ từ Microsoft giúp bạn chạy test tự động dễ dàng hơn bao giờ hết.
Trong bài viết này, tôi sẽ hướng dẫn bạn trải nghiệm Playwright MCP trong VS Code, từ khâu cài đặt đến viết test và chạy test thực tế với một ứng dụng mẫu đơn giản.
Playwright MCP là gì?
Playwright MCP là một dự án mã nguồn mở của Microsoft, cho phép bạn mô tả các kịch bản kiểm thử bằng ngôn ngữ tự nhiên (tiếng Anh, tiếng Việt, tiếng Nhật, v.v.) và tự động chuyển đổi thành test case chạy được bằng Playwright. Công cụ này giúp giảm thời gian viết test thủ công, đồng thời dễ dàng trao đổi test plan giữa dev, QA và non-tech team.
Điểm nổi bật:
-
Viết test bằng ngôn ngữ tự nhiên
-
Không cần lập trình nhiều
-
Hỗ trợ đa ngôn ngữ
-
Phù hợp cho QA, PM, hoặc Non-dev
Yêu cầu hệ thống:
Để sử dụng Playwright MCP với VS Code, bạn cần chuẩn bị:
-
Visual Studio Code (Tải tại đây)
-
Node.js ≥ 18 (Tải tại đây)
-
Trình duyệt (Chrome, Edge, Firefox – do Playwright hỗ trợ)
Bước 1: Chuẩn bị ứng dụng test đơn giản
Trong bài viết này tôi sẽ sử dụng trang mẫu của WebScraper.io để test:
Link website test: https://webscraper.io/test-sites/e-commerce/allinone
Bước 2: Viết test case bằng ngôn ngữ tự nhiên
- Test Case VI: Đi tới trang test e-commerce và bấm vào danh mục ‘Laptops’. Kiểm tra rằng có sản phẩm ‘MacBook’.
- Test Case EN: Go to the e-commerce test site and click on ‘Laptops’ category. Verify that the page contains ‘MacBook’.
- Test Case JP: eコマースのテストサイトにアクセスして、「Laptops」カテゴリをクリックします。「MacBook」という商品が表示されていることを確認します。
Bước 3: Cài đặt Playwright MCP trên VSCode
Tại màn hình VSCode nhấn tổ hợp phím Cmd + Shift + P (trên windows bạn thay Cmd thành Ctrl nhé) và search “MCP Add Server”
Tiếp tục chọn “NPM Package”
Nhập vào “@playwright/mcp” và nhấn Enter
Enter cho đến khi xuất hiện setting.json là bạn đã cài đặt thành công playwright-mcp trên vscode
Bước 4: Cài đặt test trên VSCode
Nhấn tổ hợp phím Cmd + Shift + I để mở giao diện chat với AI, tại bài này tôi dùng Github Copilot, Tại đây bạn hãy chuyển sang chế độ “Agent”
Tiếp theo, chọn tools cho Agent
Vậy là bước setup đã xong. Giờ chúng ta hãy thử một test case bằng ngôn ngữ tự nhiên
Nhập prompt và nhấn enter:
Hãy mở website https://webscraper.io/test-sites/e-commerce/allinone và bấm vào danh mục ‘Laptops’. Kiểm tra rằng có sản phẩm ‘MacBook’.
Tóm tắt các bước:
-
Mở trang web: https://webscraper.io/test-sites/e-commerce/allinone
-
Điều hướng đến danh mục Computers
-
Sau đó nhấp vào danh mục con Laptops
-
Xác minh rằng có nhiều sản phẩm MacBook, bao gồm cả MacBook Air và MacBook Pro
Như các bạn thấy nó có độ chính xác rất cao, cụ thể như sau
- An “Apple MacBook Air 13.3” product with Core i5 1.8GHz, 8GB, 128GB SSD, Intel HD 4000
- This item is listed with a price of $1101.83
- It has 4 reviews
There are also a couple of other MacBook models on the page:
- “Apple MacBook Air 13″ with i5 1.8GHz, 8GB, 256GB SSD, Intel HD 6000” priced at $1260.13
- “Apple MacBook Pro 13″ Space Gray” with Core i5 2.3GHz, 8GB, 128GB SSD, Iris Plus 640 priced at $1333
Kết luận
Playwright MCP mang đến một trải nghiệm test tự động mạnh mẽ, dễ tiếp cận và đặc biệt phù hợp với cả người mới bắt đầu lẫn các kỹ sư kiểm thử chuyên nghiệp. Qua việc xây dựng một ứng dụng test đơn giản, chúng ta có thể thấy rõ khả năng tương tác linh hoạt, hỗ trợ đa trình duyệt và khả năng mở rộng của công cụ này. Nếu bạn đang tìm kiếm một giải pháp kiểm thử hiện đại, dễ tích hợp và có cộng đồng hỗ trợ mạnh mẽ, Playwright MCP chắc chắn là một lựa chọn đáng cân nhắc.