Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Kiểm thử giao diện người dùng tự động bằng Antigravity (AGY) CLI, BrowserMCP, Playwright và Tác nhân trình duyệt

1. Giới thiệu

Cuộc cách mạng về AI dựa trên tác nhân đang thay đổi cách chúng ta xây dựng phần mềm, khiến toàn bộ quy trình trở nên vô cùng thú vị, hấp dẫn và dễ tiếp cận. Những nhiệm vụ và dự án mà trước đây nhà phát triển phải mất nhiều tháng để hoàn thành, giờ đây có thể hoàn thành trong một phiên duy nhất bằng các công cụ dựa trên tác nhân.

Một lĩnh vực phù hợp với quá trình chuyển đổi dựa trên tác nhân này là kiểm thử ứng dụng web. Theo truyền thống, việc kiểm thử ứng dụng web là một việc vất vả và là cuộc chiến liên tục chống lại sự mong manh. Nhưng nếu bạn có thể hoàn toàn bỏ qua sự phức tạp đó thì sao? Điều gì sẽ xảy ra nếu bạn chỉ cần nói với một tác nhân về những gì cần kiểm thử bằng ngôn ngữ tự nhiên, và để tác nhân suy luận về cách thực hiện?

Trong lớp học lập trình này, chúng ta sẽ khám phá cách sử dụng Antigravity CLI cùng với các kỹ năng của tác nhân và các công cụ MCP đa phương thức như BrowserMCP. Bạn sẽ thấy cách tạo và chạy các kiểm thử giao diện người dùng tự động bằng ngôn ngữ tự nhiên, cho thấy cách các công cụ dựa trên tác nhân có thể xử lý các tác vụ phức tạp và mang lại cho bạn những khả năng vượt trội khi là một nhà phát triển.

Điều quan trọng là mặc dù lớp học lập trình này tập trung vào các trường hợp sử dụng cụ thể của tính năng tự động hoá giao diện người dùng và điều khiển từ xa trình duyệt, nhưng các nguyên tắc cơ bản và vô vàn khả năng mà các nguyên tắc này mang lại mới thực sự quan trọng. Bằng cách hướng dẫn các tác nhân sử dụng CLI cục bộ và máy chủ MCP, chúng ta có thể uỷ quyền các quy trình làm việc phức tạp mà chúng ta không có thời gian hoặc chuyên môn để tự xử lý.

Kiến thức bạn sẽ học được

Antigravity CLI là gì và vai trò của công cụ này trong hệ sinh thái Antigravity.
Giao thức ngữ cảnh mô hình (MCP) là gì và tại sao đây là một bước đột phá.
Cách BrowserMCP cho phép các tác nhân AI kiểm soát trình duyệt web.
Cách chạy kiểm thử giao diện người dùng tự động bằng Antigravity CLI.
Tìm hiểu về các kỹ năng của nhân viên hỗ trợ và lợi ích của các kỹ năng đó.
Hướng dẫn tác nhân sử dụng Playwright bằng một kỹ năng.
Tìm hiểu về tác nhân trình duyệt tích hợp của Antigravity.
Các trường hợp sử dụng khác cho chế độ kiểm soát trình duyệt.

Những việc bạn sẽ làm

Lớp học lập trình này sử dụng Antigravity CLI, các công cụ MCP, kỹ năng của tác nhân và một ứng dụng minh hoạ React.

Bạn sẽ:

Thiết lập môi trường phát triển.
Khám phá một ứng dụng minh hoạ cần được kiểm thử.
Sử dụng Antigravity CLI để tương tác với ứng dụng thông qua BrowserMCP.
Dạy tác nhân cách sử dụng Playwright bằng kỹ năng của tác nhân.

2. Hệ sinh thái Antigravity

Vào tháng 5 năm 2026, Google đã ra mắt bộ ứng dụng Antigravity mới. Đây là một đợt cải tiến lớn đối với Antigravity và được chia thành 4 sản phẩm sau:

Antigravity 2.0 hiện là môi trường "trình tạo" dành riêng cho tác nhân trên máy tính của bạn. Điều đáng chú ý là môi trường này không bao gồm một IDE. Thay vào đó, giờ đây, chúng ta chỉ tương tác với trình quản lý tác nhân. Nền tảng này hướng đến việc mở ra kỷ nguyên "ý tưởng thành sản phẩm" bằng cách sử dụng các tác nhân mà không cần lo lắng về mã. Nhiều nhà phát triển không có kiến thức về lập trình sẽ yêu thích môi trường này.
Antigravity IDE, mang đến cho chúng ta môi trường lập trình quen thuộc hơn giống như VS Code, được hỗ trợ bởi khung vận hành tác nhân Antigravity. Ở đây, chúng ta có thể phát triển với sự trợ giúp của tác nhân và luôn thấy được mã. Các lập trình viên sẽ cảm thấy thoải mái khi sử dụng công cụ này.
Antigravity SDK cung cấp cho bạn bộ công cụ và các công cụ hỗ trợ Antigravity, nhưng được hiển thị dưới dạng SDK tác nhân Python. Bằng cách nhập từ google.antigravity, chúng ta có thể tận dụng các chức năng của Antigravity theo cách lập trình.
Antigravity CLI, là phiên bản tiếp theo của Gemini CLI cực kỳ hữu ích. Đây vẫn là môi trường ưu tiên thiết bị đầu cuối để tương tác với các mô hình Gemini. Nhưng Antigravity CLI mới được xây dựng bằng Go và bạn có thể nhận thấy điều này; Antigravity CLI hoạt động nhanh hơn nhiều so với Gemini CLI, cả trong quá trình khởi động và sử dụng chung. Công cụ này tận dụng cùng một "harness" tác nhân như Antigravity 2.0 và IDE, đồng thời cho phép các chế độ cài đặt và cấu hình chung trên bộ Antigravity.

Mặc dù phòng thí nghiệm này tập trung vào việc sử dụng Antigravity CLI, nhưng bạn cũng có thể thực hiện mọi việc trong phòng thí nghiệm này bằng Agy IDE hoặc Agy 2.0.

3. Điều kiện tiên quyết

Trước khi bắt đầu tìm hiểu những nội dung thú vị, hãy đảm bảo bạn có mọi thứ cần thiết.

Công cụ

Phòng thí nghiệm này giả định rằng bạn đã có:

Trình duyệt Chrome
Node.js
Antigravity CLI
Git

Để sử dụng Antigravity CLI, bạn cần xác thực bằng Google. Khi bạn khởi chạy agy lần đầu tiên, ứng dụng này sẽ tự động nhắc bạn đăng nhập bằng Google thông qua trình duyệt web mặc định. Tuỳ chọn này có hạn mức sử dụng Gemini miễn phí khá lớn và không yêu cầu bạn phải có dự án trên Google Cloud. Nếu có khoá Gemini API hoặc dự án trên đám mây của Google Cloud, bạn cũng có thể tự do định cấu hình.

Hướng dẫn này giả định rằng bạn đang làm việc trong môi trường Linux (hoặc WSL) hoặc macOS. Nếu đang dùng Windows (như tôi), bạn có thể làm theo hướng dẫn bằng cách sử dụng WSL.

(Xin lưu ý rằng BrowserMCP sẽ không hoạt động trong Google Cloud Shell vì chỉ kết nối với trình duyệt cục bộ đang chạy trên cùng một máy.)

Thiết lập môi trường phát triển

Tôi đã tạo một kho lưu trữ minh hoạ trên GitHub. Nó bao gồm một ứng dụng mẫu mà chúng ta có thể dùng cho kiểm thử giao diện người dùng. Hãy sao chép bằng cách chạy lệnh này từ thiết bị đầu cuối cục bộ:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

Có một Makefile giúp bạn dễ dàng thiết lập môi trường để chạy ứng dụng minh hoạ. Hãy chạy Makefile này để khởi tạo môi trường của chúng ta:

make install

# Or if you don't have make
npm install --prefix demo-app

4. Ứng dụng minh hoạ của chúng tôi

Ứng dụng mà chúng ta sẽ thử nghiệm hôm nay là The Dazbo Omni-Dash – một trang tổng quan theo phong cách tương lai, có giao diện tối để quản lý dữ liệu đo từ xa về bảo mật. (Đúng vậy, ứng dụng này được tạo ra theo phong cách của Dazbo!)

Tại sao lại là ứng dụng này?

Công cụ này được tạo ra để cung cấp một nền tảng kiểm thử thực tế với:

Xác thực mô phỏng: Quy trình đăng nhập yêu cầu thông tin đăng nhập cụ thể.
Nội dung động: Thẻ đo từ xa và nhật ký bảo mật mô phỏng dữ liệu theo thời gian thực.
Trạng thái tương tác: Trình đơn điều hướng và dữ liệu đầu vào của biểu mẫu thay đổi dựa trên hành động của người dùng.
Công nghệ hiện đại: Được xây dựng bằng React và Vite để mang lại trải nghiệm nhanh chóng và thích ứng.

Khởi chạy ứng dụng

Để bắt đầu ứng dụng, bạn chỉ cần chạy:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

Máy chủ phát triển sẽ khởi động rất nhanh và ứng dụng sẽ có tại http://localhost:5173.

Chúng ta chỉ cần nhấp vào đường liên kết để mở ứng dụng trong trình duyệt. Chỉ cần để quy trình này chạy trong thiết bị đầu cuối. Chúng ta sẽ thực hiện các lệnh dòng lệnh tiếp theo trong một phiên dòng lệnh riêng.

5. Thử thách kiểm thử giao diện người dùng

Kiểm thử giao diện người dùng truyền thống vốn rất khó thực hiện đúng cách và thậm chí còn khó duy trì hơn. Các vấn đề thường gặp bao gồm:

Đường cong học tập cao: Yêu cầu nhà phát triển đầu tư rất nhiều thời gian để nắm vững các ngôn ngữ phức tạp dành riêng cho miền và các điểm đặc biệt dành riêng cho khung (chẳng hạn như Selenium hoặc Playwright) chỉ để tự động hoá một hoạt động tương tác cơ bản.
Bộ chọn và quy trình tự động hoá dễ bị lỗi: Các tập lệnh truyền thống dựa vào cấu trúc DOM cố định (chẳng hạn như div > div > button) hoặc nhãn văn bản cụ thể. Điều gì sẽ xảy ra nếu bạn đổi tên nút "đăng xuất" thành "đăng xuất"? Hoặc di chuyển một nút đến một trình đơn hoàn toàn khác? Hoặc thay đổi cấu trúc HTML? Các công cụ kiểm thử truyền thống sẽ bị hỏng khi bạn thực hiện những việc đó, dẫn đến việc phải liên tục bảo trì tập lệnh.
Kiểm thử "Tính không ổn định": Các kiểm thử vượt qua một phút và thất bại ở phút tiếp theo do vấn đề về thời gian, điều kiện xung đột hoặc thành phần tải chậm.
Tính tương đồng của môi trường: Khó khăn trong việc sao chép các trạng thái ứng dụng và chi phí phát sinh khi dọn dẹp dữ liệu thử nghiệm.

Ý định so với việc triển khai

Để giải quyết những vấn đề này, chúng ta cần một cách kiểm thử tập trung vào ý định thay vì việc triển khai.

Bằng cách tận dụng các công cụ AI tác nhân, chúng ta có thể tạo ra quy trình tự động hoá có thể lặp lại và hoàn toàn tách biệt với những tinh chỉnh nhỏ về giao diện người dùng cũng như các thay đổi về cấu trúc. Thay vì mã hoá cứng tên, nhãn hoặc hệ thống phân cấp chính xác của các đối tượng, tác nhân sẽ thực hiện các hành động dựa trên ý định bằng ngôn ngữ tự nhiên của người dùng. Nếu một nút di chuyển hoặc nhãn của nút thay đổi một chút, thì các chức năng đa phương thức của tác nhân sẽ cho phép tác nhân xác định vị trí của phần tử và hoàn thành thành công nhiệm vụ.

6. MCP góp sức

Giao thức ngữ cảnh mô hình (MCP) là một tiêu chuẩn mở cho phép các mô hình và tác nhân AI tương tác với các công cụ, API và dữ liệu bên ngoài. Hãy coi đây là bộ chuyển đổi đa năng cho phép các mô hình và tác nhân tìm và thực thi các công cụ mà chúng có quyền truy cập.

Theo truyền thống, việc tích hợp Mô hình ngôn ngữ lớn (LLM) với dữ liệu và công cụ bên ngoài đòi hỏi nhà phát triển phải viết các kết nối API tuỳ chỉnh, được mã hoá cứng cho mọi nguồn dữ liệu mới, tạo ra vấn đề tích hợp "M x N" không bền vững, trong đó mọi mô hình và công cụ mới đều làm tăng gánh nặng bảo trì. Giao thức ngữ cảnh mô hình (MCP) giải quyết vấn đề này bằng cách loại bỏ nhu cầu viết mã cụ thể để điều phối các chức năng này. Thay vì mã hoá rõ ràng các quy trình thực thi phức tạp, nhà phát triển có thể dựa vào LLM để diễn giải các yêu cầu bằng ngôn ngữ tự nhiên của người dùng và suy luận một cách linh hoạt về những công cụ cần sử dụng ngay lập tức.

Khi người dùng đưa ra một lệnh bằng ngôn ngữ tự nhiên (chẳng hạn như "Chuyển đến localhost:5173, đăng nhập với tư cách là "quản trị viên" rồi nhấp vào nút Gửi"), LLM sẽ khám phá các chức năng hiện có và tạo một yêu cầu có cấu trúc để gọi một công cụ cụ thể. Ứng dụng MCP đóng vai trò là một trình dịch, định tuyến yêu cầu này đến máy chủ MCP được chỉ định. Máy chủ này sẽ thực thi hành động hoặc tìm nạp dữ liệu và trả về ngữ cảnh cho mô hình. Điều này cho phép AI hoạt động độc lập mà nhà phát triển không cần phải mã hoá cứng đường dẫn thực thi cụ thể.

Vì MCP tạo ra một tiêu chuẩn phổ quát (thường được mô tả là "USB-C cho các ứng dụng AI"), nên tiêu chuẩn này mở ra khả năng tái sử dụng rộng rãi. Nhà phát triển có thể tạo máy chủ MCP một lần và mọi máy chủ lưu trữ AI tương thích với MCP đều có thể kết nối ngay lập tức với máy chủ đó, loại bỏ vấn đề tích hợp M x N. Bạn không còn phải tạo cầu nối API tuỳ chỉnh cho mọi nền tảng nữa; thay vào đó, bạn có thể tận dụng hệ sinh thái gồm các máy chủ MCP nguồn mở được tạo sẵn cho các dịch vụ phổ biến như GitHub, Slack, cơ sở dữ liệu, v.v.; cắm trực tiếp các máy chủ đó vào quy trình làm việc dựa trên tác nhân của bạn. Cấu trúc mô-đun, cắm và chạy này đảm bảo rằng nếu bạn chuyển đổi nhà cung cấp LLM hoặc nâng cấp công cụ sau này, cơ sở hạ tầng tích hợp cốt lõi của bạn vẫn hoàn toàn không thay đổi.

7. Tự động hoá bằng BrowserMCP

BrowserMCP là gì?

Đây là công cụ đầu tiên chúng ta sẽ dùng thử hôm nay. BrowserMCP là một máy chủ MCP cung cấp cho các tác nhân AI "mắt" và "tay" cần thiết để tương tác với trình duyệt web. Nói tóm lại, công cụ này mô phỏng hoạt động tương tác của con người với trình duyệt. Đây là một dự án nguồn mở và bạn có thể xem kho lưu trữ GitHub tại đây. Xem tài liệu chính về BrowserMCP tại đây.

Sau đây là một số chức năng của công cụ này:

Ứng dụng này có thể chuyển đến các URL.
Công cụ này có thể kiểm tra DOM.
Công cụ này có thể nhấp vào các nút và nhập văn bản vào biểu mẫu.
Bạn có thể kéo và thả.
Công cụ này có thể đọc nhật ký bảng điều khiển của trình duyệt.
Nhanh chóng: quy trình tự động hoá diễn ra trên máy của bạn.

Cài đặt MCP trình duyệt

Để sử dụng BrowserMCP, bạn cần làm hai việc:

Cài đặt tiện ích BrowserMCP vào Chrome (hoặc bất kỳ trình duyệt nào dựa trên Chromium).
Định cấu hình máy chủ MCP theo cách thủ công trong cấu hình Antigravity.

Để cài đặt tiện ích này, bạn chỉ cần làm theo hướng dẫn tại đây. Quá trình này chỉ mất vài giây. Sau khi cài đặt, bạn nhấp vào "Kết nối" trong tiện ích để cho phép nhân viên hỗ trợ điều khiển thẻ hiện tại. (Tất nhiên, bạn muốn thẻ hiện tại là thẻ đang chạy ứng dụng minh hoạ!)

Tiếp theo, chúng ta sẽ định cấu hình máy chủ MCP thực tế trong Antigravity. Chúng ta thực hiện việc này bằng cách thêm định nghĩa máy chủ browsermcp vào tệp mcp_config.json chung.

Tạo hoặc chỉnh sửa tệp ~/.gemini/config/mcp_config.json rồi thêm cấu hình sau:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

Để xem hướng dẫn chi tiết về cách thiết lập máy chủ và kỹ năng MCP trong hệ sinh thái Antigravity, hãy xem các tài nguyên sau:

Kiểm thử bằng BrowserMCP

Bây giờ là phần thú vị. Trước tiên, hãy chạy Antigravity CLI (bằng cách chạy agy) trong một phiên thiết bị đầu cuối mới. (Nhớ lại rằng ứng dụng minh hoạ đang chạy trong phiên thiết bị đầu cuối ban đầu của chúng ta.) Bên trong TUI tương tác, hãy nhập /mcp để xác minh danh sách các công cụ đang hoạt động và đảm bảo browsermcp có sẵn.

Nếu bạn chưa chạy ứng dụng minh hoạ trước đó, hãy chạy ứng dụng này ngay bây giờ:

make dev

Nếu chưa làm, bạn cần mở ứng dụng trong trình duyệt Chrome và kết nối tiện ích BrowserMCP trong thẻ đó. Làm theo đường liên kết từ lệnh run. Sau đó, hãy nhấp vào biểu tượng tiện ích BrowserMCP rồi nhấp vào "Kết nối".

Giờ đây, chúng ta có thể sử dụng Agy CLI để chạy một bài kiểm thử. Sao chép và dán câu lệnh này vào CLI:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Trước tiên, CLI có thể kiểm tra để đảm bảo ứng dụng minh hoạ đang chạy trên cổng được chỉ định. Sau đó, công cụ sẽ nhắc bạn xác nhận những hành động mà công cụ dự định thực hiện.

Cho phép CLI chạy tất cả các công cụ BrowserMCP cho phiên này. Sau đó, hãy quay lại trình duyệt và xem các hoạt động tương tác tự động diễn ra!

Một số điều cần lưu ý về câu lệnh ở trên:

Chúng ta bắt đầu bằng cách yêu cầu tác nhân đăng xuất nếu ứng dụng đã đăng nhập. Xin lưu ý rằng chúng ta không cần yêu cầu nhân viên hỗ trợ nhấp vào văn bản cụ thể như "Thoát khỏi cổng". Công cụ này đủ thông minh để biết cần nhấp vào đâu.
Sau khi đăng nhập và hiển thị trang chính, tác nhân sẽ thu thập thông tin đo từ xa. Một lần nữa, chúng ta không cần yêu cầu tác nhân tìm kiếm trong các ô cụ thể hoặc khớp các từ cụ thể. Vì vậy, nếu sau này chúng tôi mở rộng hoặc thay đổi thông tin xuất hiện trên trang này, thì câu lệnh này vẫn sẽ hoạt động và đầu ra vẫn sẽ được ghi lại trong bảng đánh dấu của chúng tôi.

Ngầu đúng không?

Chúng ta đã hoàn tất việc sử dụng BrowserMCP, vì vậy hãy ngắt kết nối BrowserMCP trong trình duyệt.

8. Tự động hoá bằng Skills và Playwright

Các hạn chế của BrowserMCP

BrowserMCP là một công cụ tuyệt vời, nhưng có một số hạn chế. Ví dụ:

Bạn cần có một phiên trình duyệt hiện tại, có kết nối với tiện ích BrowserMCP. (Thao tác này không tạo ra các phiên mới.)
Trình duyệt này không hỗ trợ các trình duyệt không phải Chromium.
Bạn cần chạy một quy trình trình duyệt riêng trên cùng một máy mà máy chủ MCP đang chạy.
Ứng dụng này không thể hoạt động với hệ thống tệp cục bộ. Ví dụ: tiện ích này không thể tạo tệp cục bộ để làm bằng chứng cho ảnh chụp màn hình, hoặc tải xuống và lưu trữ tệp từ ứng dụng web, chẳng hạn như tệp PDF có thể tải xuống.
Đây là một quy trình không xác định. Quy trình này sẽ cố gắng thực hiện những hành động mà bạn yêu cầu, nhưng trạng thái cục bộ (chẳng hạn như một cửa sổ bật lên không mong muốn) có thể làm gián đoạn hoạt động tương tác.
Công cụ này không hỗ trợ hoạt động "không có giao diện người dùng", tức là không thể chạy trong pipeline CI/CD mà không có cửa sổ trình duyệt thực.

Playwright

Playwright là một công cụ tinh vi hơn nhiều. Đây là một khung kiểm thử và tự động hoá trình duyệt mã nguồn mở đã được thiết lập. Công cụ này có thể làm nhiều việc mà BrowserMCP không thể, bao gồm tất cả những điểm tôi đã đề cập ở trên.

Điều này phù hợp hơn nhiều với việc chạy các tình huống kiểm thử phức tạp, đáng tin cậy và có thể lặp lại. Và nó đặc biệt phù hợp để làm việc với các phiên hoạt động kéo dài hoặc thực sự chạy song song nhiều phiên độc lập.

Nhưng khi có thêm chức năng như vậy, bạn sẽ phải trải qua một quá trình học tập khó khăn hơn nhiều.

Kỹ năng

Rất may là chúng ta không cần phải tìm hiểu cách sử dụng Playwright một cách trực tiếp. Thay vào đó, chúng ta có thể sử dụng một kỹ năng của nhân viên hỗ trợ.

Vậy kỹ năng của tác nhân AI là gì? Hãy coi đó là một gói kiến thức chuyên môn được đóng gói chặt chẽ mà bạn có thể giao cho tác nhân AI khi tác nhân AI cần làm một việc cụ thể. Kỹ năng này chứa các hướng dẫn, phương pháp hay và đôi khi thậm chí cả các tập lệnh trợ giúp được điều chỉnh cho phù hợp với một nhiệm vụ cụ thể.

Đây là phần thực sự thông minh: tiết lộ từng bước. Thay vì đưa mọi tài liệu API và quy tắc khung kiểm thử có thể hình dung vào lời nhắc hệ thống ban đầu của LLM (điều này sẽ tiêu tốn cửa sổ ngữ cảnh và đốt cháy mã thông báo một cách vô ích), tác nhân chỉ đọc kỹ năng khi thực sự cần. Thao tác này giúp giữ cho bối cảnh cơ sở tinh gọn và hiệu quả, đồng thời tìm nạp "cách thực hiện" chi tiết ngay khi cần. Và chắc chắn là một kỹ năng có thể bao gồm hướng dẫn về cách tận dụng các máy chủ MCP cụ thể để hoàn thành công việc.

Hãy nghĩ đến cảnh trong phim Ma trận: Đặc vụ nhìn vào một vấn đề, nhận ra rằng cần phải biết Playwright, tải kỹ năng xuống và đột nhiên: "Tôi biết kung fu". Micrô cần dài. Chuyên gia tức thì.

Nếu bạn muốn tìm hiểu thêm về kỹ năng, hãy xem các thông tin sau:

Vì sao Skills phù hợp với Playwright

Sử dụng kỹ năng ở đây là một lựa chọn tuyệt vời. Playwright là một công cụ cực kỳ mạnh mẽ, nhưng cú pháp của nó có thể hơi khó hiểu. Bằng cách cung cấp cho tác nhân một kỹ năng Playwright, chúng ta không phải lo lắng về việc LLM tạo ra cú pháp lỗi thời hoặc viết các bộ chọn dễ bị lỗi. Chúng tôi sẽ cung cấp cho bạn một hướng dẫn chính thức, được tuyển chọn về cách sử dụng Playwright đúng cách.

Tôi sẽ sử dụng Playwright CLI và kỹ năng liên quan của công cụ này.

Với phương pháp này, chúng ta sẽ cài đặt Playwright CLI cục bộ, sau đó cung cấp cho tác nhân kiến thức cần thiết để sử dụng. Để tránh nhầm lẫn, tôi sẽ không cài đặt bất kỳ máy chủ Playwright MCP nào.

Cài đặt

Trước tiên, hãy cài đặt giao diện dòng lệnh Microsoft Playwright mã nguồn mở. Nếu bạn chưa thực hiện, hãy thoát khỏi CLI tương tác bằng cách nhập /quit``. Sau đó, trong thiết bị đầu cuối:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Giờ hãy thêm kỹ năng. Lệnh này sẽ tải thư mục con của kỹ năng xuống trực tiếp từ GitHub vào thư mục kỹ năng của Gemini:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Giờ đây, chúng ta có thể kiểm thử.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Thao tác này sẽ tạo ra một phiên trình duyệt, mở ra URL được chỉ định.

Tôi cũng muốn Gemini có thể sử dụng Playwright ở chế độ "headed" (tức là có giao diện người dùng hiển thị). Tuy nhiên, kỹ năng này không cho Gemini biết cách thực hiện việc đó. Vì vậy, tôi đã thêm những dòng này vào ~/.gemini/skills/playwright-cli/SKILL.md trong phần Core:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Kiểm thử bằng Playwright

Như trước đây, chúng ta cần khởi chạy ứng dụng (nếu ứng dụng chưa chạy). Thực hiện việc này trong phiên thiết bị đầu cuối ban đầu:

make dev

Sau đó, trong phiên thiết bị đầu cuối khác, hãy tạm thời tắt BrowserMCP để tác nhân không bị nhầm lẫn về những công cụ cần sử dụng. Khởi chạy lại Antigravity CLI (agy). Chúng ta có thể tạm thời tắt máy chủ browsermcp ngay thông qua TUI:

Nhập /mcp vào ô nhập câu lệnh để mở bảng điều khiển quản lý MCP.
Dùng các phím mũi tên (lên/xuống) để chọn browsermcp rồi nhấn phím Enter/Return.
Di chuyển sang phải để chọn mục Tắt rồi nhấn Enter để tắt.

Giờ đây, chúng ta sẽ yêu cầu tác nhân chuyển đến ứng dụng của mình bằng Playwright. Nhưng không giống như BrowserMCP, chúng ta không cần khởi động trình duyệt trước. Playwright sẽ thực hiện việc đó cho chúng ta bằng một quy trình cục bộ.

Nhập câu lệnh này vào Agy CLI:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Như thường lệ, CLI sẽ yêu cầu cấp quyền trước khi chạy bất kỳ công cụ nào.)

Điểm khác biệt ở đây là gì?

Chúng ta không cần khởi động trình duyệt trước.
Chúng ta không cần khởi động và kết nối một tiện ích trình duyệt.
Chúng ta không cần yêu cầu nhân viên hỗ trợ đăng xuất trước. Thử nghiệm này sẽ khởi tạo từ một phiên "sạch".
Chúng tôi có thể chụp ảnh màn hình và lưu ảnh đó dưới dạng tệp trên thiết bị.

Sau đó, bạn sẽ thấy tệp dashboard.png trong thư mục đầu ra.

Xin lưu ý rằng bạn sẽ thấy các lệnh gọi công cụ thực thi trong Agy CLI, nhưng sẽ không thấy giao diện người dùng trình duyệt. Đó là vì Playwright chạy ở "chế độ không có giao diện người dùng" theo mặc định.

Nhưng nếu chạy lại với câu lệnh đã sửa đổi này, bạn cũng sẽ thấy giao diện người dùng:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Đầu ra của Agy CLI sẽ có dạng như sau:

Thật tuyệt vời phải không?

9. Tác nhân trình duyệt tích hợp của Antigravity

Google Antigravity được trang bị tác nhân trình duyệt tích hợp sẵn ( Tác nhân phụ trình duyệt) giúp tự động hoá trình duyệt mà không cần bạn cài đặt một công cụ riêng biệt như Playwright CLI.

Cách hoạt động

Để kiểm soát trình duyệt, tác nhân trình duyệt tích hợp sẽ hoạt động trực tiếp thông qua Giao thức Chrome DevTools (CDP), giúp loại bỏ nhu cầu sử dụng mọi tiện ích trình duyệt hoặc trình bổ trợ trung gian trong Antigravity 2.0 và IDE.

Khi khởi chạy, Antigravity sẽ kết nối với phiên bản Chrome của bạn thông qua một cổng gỡ lỗi cục bộ qua kết nối WebSocket. Các chỉ dẫn cấp cao của tác nhân được dịch trực tiếp thành các lệnh CDP cấp thấp:

Thao tác với DOM trang (chẳng hạn như nhấp vào các phần tử hoặc nhập văn bản).
Kiểm soát trạng thái trình duyệt và kích hoạt hoạt động điều hướng.
Ghi lại các khung hình và dữ liệu hình ảnh theo thời gian thực.

Bằng cách kết hợp chế độ kiểm soát CDP trực tiếp với phân tích trực quan, đa phương thức, tác nhân phụ sẽ lấy mục tiêu cấp cao của bạn (ví dụ: "xác minh rằng trang tổng quan hiển thị các giá trị đo từ xa chính xác"), phân tích trang một cách trực quan để tìm ra những hành động cần thiết và tự thực hiện các hành động đó. Tác nhân phụ cũng tự động ghi lại video và chụp ảnh màn hình các hành động của mình, lưu trực tiếp vào không gian làm việc của bạn dưới dạng Cấu phần phần mềm để làm bằng chứng trực quan về phiên chạy thử nghiệm.

Phạm vi cung cấp công cụ

Tác nhân trình duyệt tích hợp hiện chưa được hỗ trợ trong Antigravity CLI (Agy CLI) ưu tiên thiết bị đầu cuối. Tuy nhiên, bạn có thể sử dụng tác nhân này ngay trong Antigravity IDE và Antigravity 2.0. Hy vọng rằng tác nhân trình duyệt sẽ được hỗ trợ trong Agy CLI ở một bản phát hành trong tương lai!

Lưu ý cho người dùng WSL: Giờ đây, việc thiết lập để Browser Agent hoạt động trong Antigravity trên WSL dễ dàng hơn nhiều so với trước đây. Thay vì phải xử lý việc định tuyến mạng và chuyển tiếp cổng phức tạp, bạn chỉ cần bật chế độ mạng "được phản chiếu" trong cấu hình WSL. Để xem hướng dẫn đầy đủ từng bước, hãy xem hướng dẫn Giải quyết vấn đề về WSL bằng Google Antigravity: Agy 2.0 và Agy IDE Edition.

10. Các trường hợp sử dụng khác cho tính năng Tự động hoá trình duyệt

Tự động hoá trình duyệt không chỉ là đảm bảo nút đăng nhập hoạt động trước khi triển khai vào chiều thứ Sáu. Khi nhận ra rằng bạn có thể kết nối trực tiếp một LLM với trình duyệt, một thế giới hoàn toàn mới về các dự án tự phát triển, dựa trên tác nhân sẽ mở ra.

Nếu đang tạo các tác nhân AI của riêng mình, bạn có thể sử dụng các công cụ như BrowserMCP hoặc Playwright CLI theo một số cách sau để thực hiện những việc phức tạp:

Trợ lý nghiên cứu cá nhân: Hãy tưởng tượng bạn chỉ định một URL cụ thể cho trợ lý và yêu cầu trợ lý nghiên cứu một chủ đề, nhưng trang web đó yêu cầu bạn đăng nhập và điều hướng qua các trình đơn phức tạp. Thay vì viết một trình trích xuất dữ liệu tuỳ chỉnh trên web sẽ bị hỏng vào tuần tới, bạn chỉ cần yêu cầu tác nhân đăng nhập, chuyển đến dữ liệu và tóm tắt dữ liệu đó cho bạn.
Người tích hợp "ghế xoay": Tất cả chúng ta đều có những hệ thống mạng nội bộ cũ không có API. Bạn biết những hệ thống như vậy – nơi bạn phải sao chép dữ liệu theo cách thủ công từ Hệ thống A rồi dán vào một biểu mẫu trong Hệ thống B. Một tác nhân có tính năng tự động hoá trình duyệt có thể đóng vai trò là chất kết dính phổ biến, đọc màn hình của hệ thống cũ và điền vào biểu mẫu trong hệ thống mới.
Phân loại và khắc phục tự động: Bạn nhận được cảnh báo P1 từ hệ thống giám sát lúc 3 giờ sáng? Tác nhân có thể tự động mở URL của trang tổng quan cụ thể, đọc biểu đồ hoặc nhật ký (bằng cách sử dụng các chức năng thị giác đa phương thức), đồng thời đăng bản tóm tắt trực tiếp vào kênh Slack của bạn, giúp bạn tiết kiệm được những phút quý giá trong một sự cố.

Ưu điểm của phương pháp này là bạn không còn bị giới hạn bởi những API có sẵn. Nếu con người có thể làm việc đó trong trình duyệt, thì tác nhân của bạn cũng có thể.

11. Kết luận

Xin chúc mừng! Bạn vừa tạo và thực thi các quy trình kiểm thử giao diện người dùng tự động, mạnh mẽ chỉ bằng cách nói với một tác nhân AI về những việc bạn muốn tác nhân đó làm bằng tiếng Anh đơn giản. Không có bộ chọn CSS dễ bị lỗi, không có tập lệnh thiết lập phức tạp.

Bạn đã tìm hiểu:

Không cần phải khó khăn khi kiểm thử giao diện người dùng: Bằng cách tập trung vào ý định của kiểm thử thay vì việc triển khai DOM dễ bị lỗi, chúng ta có thể giảm đáng kể chi phí bảo trì.
Giao thức ngữ cảnh mô hình (MCP) giúp các tác nhân của bạn có quyền truy cập phổ biến, tức thì vào các công cụ, dữ liệu và môi trường.
BrowserMCP là một công cụ tuyệt vời để đưa khả năng của tác nhân AI vào các phiên Chrome hiện có trên thiết bị của bạn.
Các kỹ năng và Playwright CLI mở ra một cấp độ mới cho hoạt động kiểm thử tự động có thể lặp lại và xác định được — tất cả đều dựa trên phương pháp tiết lộ dần.
Trợ lý trình duyệt của Antigravity tiến thêm một bước nữa bằng cách giới thiệu tính năng điều hướng đa phương thức, tự động và ghi lại thông tin giả tạo ngay khi bạn mở hộp.

Giờ thì hãy bắt đầu tự động hoá những việc nhàm chán!

12. Đường liên kết hữu ích

Nếu bạn muốn tìm hiểu sâu hơn về các công cụ và khái niệm mà chúng ta đã đề cập hôm nay, hãy tham khảo các tài nguyên sau:

Mã kho lưu trữ

Kho lưu trữ agentic-ui-testing trên GitHub – Vui lòng gắn dấu sao vào kho lưu trữ nếu bạn thấy lớp học lập trình này hữu ích!

Các công cụ và khung hình chính

Các khái niệm và kỹ năng của trợ lý AI

Khác