Tự động hoá quy trình kiểm thử giao diện người dùng bằng Gemini CLI, BrowserMCP và Playwright

1. Giới thiệu

Việc kiểm thử các ứng dụng web có thể là một việc nhàm chán. Việc kiểm thử giao diện người dùng theo cách truyền thống thường giống như một cuộc chiến không ngừng chống lại sự mong manh. Bạn nhận thấy mình đang viết các tập lệnh phức tạp, quản lý các bộ chọn CSS và XPath dễ bị lỗi, cũng như phải vượt qua nhiều khó khăn chỉ để xác minh một quy trình đơn giản của người dùng.

Nhưng 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 đó chỉ cần... thực hiện thì sao?

Trong lớp học lập trình này, chúng ta sẽ khám phá cách sử dụng Gemini CLI và các công cụ đ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. Xin lưu ý rằng lớp học lập trình này không yêu cầu bạn phải có kiến thức trước đó về các khung và công cụ kiểm thử giao diện người dùng.

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

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 Gemini 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 đó.
Dạy một tác nhân cách sử dụng Playwright bằng một kỹ năng.
Xem nhanh Antigravity Browser Subagent.
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

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 Gemini CLI để tương tác với ứng dụng thông qua BrowserMCP.
Dạy cho tác nhân cách sử dụng Playwright bằng một kỹ năng của tác nhân.

2. Đ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.

Lớp học lập trình này sử dụng Gemini 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.

Công cụ

Phần thực hành này giả định rằng bạn đã có:

Trình duyệt Chrome
Gemini CLI (bản thân Gemini CLI phụ thuộc vào nodejs)
Git

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ì nó sẽ chỉ kết nối với một trình duyệt cục bộ đang chạy trên cùng một máy.)

Tạo một dự án trên Google Cloud

Nếu đã có khoá API Gemini, bạn có thể sử dụng khoá đó và bỏ qua bước này.

Nếu không, bạn sẽ cần có một dự án trên Google Cloud để tiếp tục. Chúng tôi sẽ không triển khai bất kỳ dịch vụ nào của Google Cloud, nhưng bạn cần dự án này để liên kết khoá API Gemini. (Bạn cần có khoá để sử dụng Gemini.)

Nếu quen thuộc với Google Cloud, bạn có thể tạo một dự án mới tại đây. Ngoài ra, bạn có thể tạo một dự án trên đám mây ngay trong Google AI Studio.

Tạo khoá Gemini API miễn phí

Giờ đây, bạn sẽ tạo khoá Gemini API trong Google AI Studio. Nhấp vào "Lấy khoá API".

Bạn sẽ thấy nội dung như sau:

Đây là nơi liệt kê các khoá hiện có của bạn (nếu có). Hoặc để tạo khoá mới, hãy nhấp vào "Tạo khoá API".

Tại đây, bạn có thể chọn một dự án Google Cloud hiện có hoặc tiếp tục tạo một dự án mới. Ở đây, tôi đã tạo một dự án mới có tên là agentic-ui-demo:

Đến đây, chúng ta đã có một dự án và khoá Gemini API được liên kết. Chúng tôi chưa bật tính năng thanh toán nên chỉ được sử dụng hạn mức miễn phí hào phóng. Tuy nhiên, nếu muốn có thêm hạn mức, bạn có thể tiếp tục và bật tính năng thanh toán bằng cách nhấp vào "Thiết lập thông tin thanh toán".

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

Tiếp theo, hãy tạo bản sao của tệp .env.template mẫu, có tên là .env. Bạn có thể thực hiện việc này trong trình chỉnh sửa hoặc chỉ cần chạy lệnh sau:

cp .env.template .env

Cập nhật tệp .env này bằng khoá API của riêng bạn. (Lưu ý: đừng bao giờ kiểm tra tệp .env của bạn bằng những thông tin như khoá API!) Cách dễ nhất để thực hiện việc này là mở tệp đó trong trình chỉnh sửa.

Bây giờ, hãy tải biến môi trường:

source .env

Tôi đã tạo một Makefile để giúp bạn dễ dàng thiết lập môi trường khởi 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

3. Ứ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 mang đậm chất 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, video này được tạo ra theo cảm hứng!)

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

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. Bạn 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.

4. 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:

Kiểm thử "Không ổn định": Các kiểm thử vượt qua trong một phút và không vượt qua trong phút tiếp theo do vấn đề về thời gian, điều kiện xung đột hoặc tài sản tải chậm.
Bộ chọn dễ bị hỏng: Dựa vào các cấu trúc DOM cụ thể (chẳng hạn như div > div > button) sẽ bị hỏng khi có một chút thay đổi về giao diện người dùng, dẫn đến việc phải liên tục bảo trì tập lệnh.
Đường cong học tập cao: Yêu cầu nhà phát triển nắm vững các ngôn ngữ dành riêng cho miền phức tạp và các đặc điểm riêng theo khung (Cypress, Selenium, Playwright) chỉ để tự động hoá một thao tác nhấp cơ bản.
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.

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.

5. 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 những công cụ mà nó 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 nhân lên gánh nặng bảo trì. Giao thức bối 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 động 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 chung (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 có sẵn trên quy mô lớn. Nhà phát triển có thể tạo máy chủ MCP một lần và mọi máy chủ AI tương thích với MCP đều có thể kết nối ngay với máy chủ đó, giúp loại bỏ vấn đề tích hợp M x N. Bạn không còn phải xây dựng các 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 của 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 chúng trực tiếp 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ác 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.

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

BrowserMCP là gì?

Đây là công cụ đầu tiên mà chúng ta sẽ sử dụng 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.
Nó 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ục bộ.

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 cho tác nhân của bạn.

Để 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ẻ mà ứng dụng minh hoạ đang chạy!)

Tiếp theo, chúng ta cần thêm cấu hình MCP vào ứng dụng:

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

Bạn định cấu hình chế độ này ở đâu? Điều này còn tuỳ thuộc vào người đại diện của bạn. Ví dụ: trong Gemini CLI: ~/.gemini/settings.json. Nội dung sẽ giống như thế này:

Kiểm thử bằng BrowserMCP

Giờ thì đến phần kỳ diệu. Trước tiên, hãy chạy Gemini CLI (bằng cách chạy gemini) 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 đầu tiên của thiết bị đầu cuối.) Trong Gemini CLI, hãy chạy /mcp để kiểm tra xem Gemini CLI đã được cài đặt đúng cách hay chưa. Bạn sẽ thấy một danh sách các công cụ, chẳng hạn như:

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

Chúng ta 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ể dùng Gemini CLI để chạy một bài kiểm thử. Sao chép và dán câu lệnh này vào Gemini 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, Gemini CLI có thể kiểm tra xem ứng dụng minh hoạ có đang chạy trên cổng được chỉ định hay không. 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 Gemini 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.

7. 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ụ: ứng dụng 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 hàm không xác định. Thao tác 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ư 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 quy trình CI/CD mà không có cửa sổ trình duyệt thực.

Playwright

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

Nền tảng này phù hợp hơn nhiều để 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 trong thời gian 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 mất nhiều thời gian hơn để học cách sử dụng.

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 nhân viên hỗ trợ là gì? Hãy coi đây là một gói kiến thức chuyên môn về miề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 này cần làm một việc cụ thể. Tài liệu này chứa hướng dẫn, các phương pháp hay nhất và đôi khi còn có cả các tập lệnh trợ giúp được điều chỉnh cho một tác 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. Nó giúp ngữ cảnh cơ sở tinh gọn và hiệu quả, đồng thời tìm nạp thông tin chi tiết về "cách thực hiện" ngay khi cần. Và tất nhiên, một kỹ năng hoàn toàn 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 lại 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 và đượ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 nó.

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 của mình kiến thức cần thiết để sử dụng công cụ này. Để tránh nhầm lẫn: Tôi không cài đặt bất kỳ máy chủ MCP Playwright 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 làm, hãy thoát Gemini CLI bằng cách nhập /quit``. Sau đó, trong thiết bị đầu cuối, hãy làm như sau:

# 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

Bây giờ, hãy thêm kỹ năng. Lệnh này sẽ tải thư mục con về 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ế độ "có giao diện người dùng", tức là có giao diện người dùng hiển thị. Nhưng 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 các 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 Gemini CLI, rồi chạy:

/mcp disable browsermcp

Bây giờ, chúng ta sẽ yêu cầu Gemini 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 sau vào Gemini 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ệ, Gemini CLI sẽ yêu cầu bạn 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 output.

Xin lưu ý rằng bạn sẽ thấy các lệnh gọi công cụ thực thi trong Gemini CLI, nhưng bạn sẽ không thấy giao diện người dùng của trình duyệt. Đó là do 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 present them back to me in a markdown table.

Trong thời gian ngắn, đầu ra của Gemini CLI sẽ có dạng như sau:

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

8. Bạn có thể làm việc này trong Antigravity Out of the Box!

Google Antigravity có Browser Subagent (Tác nhân phụ của trình duyệt) cung cấp các chức năng tương tự như Playwright CLI. Khi bạn yêu cầu Gemini trong Antigravity tạo một URL theo cách tương tác, Gemini sẽ tự động tạo tác nhân phụ này.

Tác nhân phụ này sẽ lấy mục tiêu cấp cao của bạn (ví dụ: "Kiểm tra xem biểu mẫu đăng nhập có hoạt động hay không"), phân tích bố cục trang một cách trực quan thông qua ảnh chụp màn hình và DOM, đồng thời tự tìm ra các lượt nhấp và tổ hợp phím. Về cơ bản, Gemini là một AI đa phương thức, có khả năng thị giác và có thể điều hướng trên web giống như con người. Và phần thú vị nhất? Công cụ này tự động ghi lại video và chụp ảnh màn hình mọi thao tác, đồng thời lưu những nội dung đó ngay vào không gian làm việc cục bộ của bạn dưới dạng bằng chứng trực quan về những gì công cụ đã thực hiện. Antigravity gọi bằng chứng trực quan này là Artifacts (Hiện vật).

Lưu ý cho người dùng WSL: Việc thiết lập để Browser Agent hoạt động trong Antigravity khá phức tạp. Tôi đã làm cho nó hoạt động, nhưng tôi thấy tác nhân phụ không nhất quán và không đáng tin cậy trong môi trường này. Đó là một trong những lý do khiến tôi yêu thích Playwright CLI!

9. 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 của bạn 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 của 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 hướng dẫn tác nhân đến một URL cụ thể và yêu cầu tác nhân 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 đó – 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à cầu nối 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ủa bạn có thể tự động mở URL 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 người dùng có thể thực hiện thao tác đó trong trình duyệt, thì tác nhân của bạn cũng có thể.

10. 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:

Kiểm thử giao diện người dùng không nhất thiết phải khó khăn: Bằng cách tập trung vào mục đích 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 về kiểm thử tự động hoá có thể lặp lại và xác định được — tất cả đều dựa trên tính năng tiết lộ từng bước.
Trình duyệt phụ 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 hiện vật ngay khi xuất xưởng.

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

Đườ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

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

Các khái niệm và kỹ năng tác nhân

Khác

Làm việc với Google Antigravity trong WSL