s17: Tự động hóa trình duyệt

s00 > s01 > s02 > s03 > s04 > s05 > s06 > s07 > s08 > s09 > s10 > s11 > s12 > s13 > s14 > s15 > s16 > [ s17 ] > s18 > s19 > s20 > s21 > s22 > s23 > s24 > s25 > s26 > s27

terminal cho phép agent vận hành hệ thống tập tin; trình duyệt cho phép agent vận hành các trang web. Những gì agent nhìn thấy không phải là HTML mà là một cây ngữ nghĩa mô tả "những gì trên trang có thể được nhấp vào."

Chương này giải quyết vấn đề gì

agent có thể chạy lệnh thông qua terminal và đọc tệp bằng read_file. Nhưng nếu bạn yêu cầu nó "gửi sự cố lên GitHub", tất cả những gì nó có thể làm là gọi một API.

Vấn đề là: nhiều trang web không có API. Hoặc API yêu cầu xác thực phức tạp. Hoặc bạn chỉ cần người đại diện hành động như một con người -- "mở một trang -> nhấp vào nút -> điền vào biểu mẫu -> gửi."

Đây là những gì công cụ trình duyệt giải quyết: cho phép agent vận hành các trang web giống như con người.

Đề xuất đọc

• s02-tool-system.md -- các công cụ trình duyệt được đăng ký trong cùng một sổ đăng ký
• s14-terminal-backends.md -- terminal vận hành hệ thống tập tin, trình duyệt vận hành web; họ bổ sung cho nhau

Thuật ngữ chính

Cây tiếp cận là gì

Một cây ngữ nghĩa được trình duyệt duy trì nội bộ để mô tả "các thành phần tương tác trên trang". Nó được thiết kế cho trình đọc màn hình nhưng cũng phù hợp với các tổng đài viên -- vì nó trả lời chính xác câu hỏi mà tổng đài viên quan tâm: nội dung nào trên trang này có thể được nhấp vào, điền hoặc đọc.

Sự khác biệt so với HTML DOM: DOM mô tả cấu trúc trang (div được lồng bên trong div), trong khi cây khả năng truy cập mô tả ngữ nghĩa trang ("đây là hộp tìm kiếm", "đây là nút gửi").

Tham chiếu phần tử là gì (@ref)

Mỗi phần tử tương tác trong cây khả năng tiếp cận đều có một số, chẳng hạn như @e1, @e2. Khi agent muốn nhấp vào một nút, nó không cần phải viết bộ chọn CSS -- nó chỉ nói browser_click(ref="e3").

Các số được tạo lại mỗi khi chụp ảnh nhanh trang. Nếu DOM thay đổi (ví dụ: hộp thoại bật lên), bạn cần chụp ảnh nhanh mới và các số cũ sẽ không hợp lệ.

Trình duyệt agent là gì

Công cụ bên ngoài mà Hermes Agent sử dụng để điều khiển trình duyệt. Đó là CLI của Node.js sử dụng Playwright để điều khiển Chrome. Hermes gọi nó thông qua quy trình con và không tương tác trực tiếp với trình duyệt.

Bắt đầu với việc thực hiện đơn giản nhất

Ý tưởng đơn giản nhất để yêu cầu agent vận hành các trang web: sử dụng requests thư viện để tìm nạp HTML.

def browser_navigate(args, **kwargs):
    import requests
    resp = requests.get(args["url"])
    return resp.text[:5000]  # Return the first 5000 characters of HTML

Ba vấn đề:

Vấn đề 1: HTML không dành cho việc đọc

Trả về 5000 ký tự của <div class="css-1a2b3c"><span aria-label="..."> -- mô hình phải sàng lọc các thẻ này để tìm "hộp tìm kiếm ở đâu" và "nút gửi ở đâu". Đắt tiền, chậm và dễ mắc lỗi.

Vấn đề 2: Không có tính tương tác

requests.get chỉ có thể đọc trang; nó không thể nhấp vào nút, điền biểu mẫu hoặc chờ tải trang. Và các trang web hiện đại chủ yếu dựa vào kết xuất JavaScript -- HTML bạn tìm nạp có thể trống.

Vấn đề 3: Không có trạng thái

Mỗi yêu cầu là độc lập. Bạn đăng nhập vào một trang web nhưng yêu cầu tiếp theo sẽ không có cookie. Bạn gõ từ khóa vào ô tìm kiếm nhưng không thấy kết quả tìm kiếm ở bước tiếp theo.

Bạn cần một trình duyệt thực sự -- một trình duyệt có thể hiển thị JavaScript, tương tác với các phần tử và duy trì trạng thái. Nhưng mô hình không cần "xem" hiển thị hình ảnh đầy đủ của một trang web; những gì nó cần là biểu diễn có cấu trúc mô tả "nội dung trên trang."

Đó là lúc cây khả năng tiếp cận phát huy tác dụng.

Mô hình tinh thần tối thiểu

The agent calls browser_navigate("https://github.com")
    |
    v
Browser tool (Python)
    |  subprocess call
    v
agent-browser CLI (Node.js)
    |  Playwright -> CDP
    v
Chromium browser (headless)
    |  Renders the page
    v
agent-browser extracts the accessibility tree
    |
    v
Returns a text snapshot:
    navigation "GitHub"
      link "Sign in" [ref=e1]
      link "Sign up" [ref=e2]
      search "Search GitHub" [ref=e3]
      heading "Let's build from here" [level=1]
    |
    v
The agent reads the snapshot and decides: browser_click(ref="e3") <- click the search box

Những gì nhân viên nhìn thấy không phải là ảnh chụp màn hình, không phải HTML mà là cây ngữ nghĩa -- "đây là liên kết có tên Đăng nhập, được đánh số là e1", "đây là hộp tìm kiếm, được đánh số là e3."

Tại sao nên sử dụng cây trợ năng thay vì HTML hoặc ảnh chụp màn hình

agent Hermes mặc định sử dụng cây khả năng tiếp cận (nhanh, rẻ, thân thiện với LLM) và chỉ sử dụng ảnh chụp màn hình khi cần hiểu rõ bằng hình ảnh.

Những hành động nào agent có thể thực hiện

Công cụ trình duyệt cung cấp tổng cộng 9 hành động:

Hướng dẫn tương tác hoàn chỉnh

agent giúp bạn tìm kiếm "agent hermes" trên GitHub:

1. browser_navigate("https://github.com")
   -> Returns snapshot: ... search "Search GitHub" [ref=e3] ...

2. browser_click(ref="e3")
   -> The search box gains focus

3. browser_type(ref="e3", text="hermes agent")
   -> Text is entered in the search box

4. browser_press(key="Enter")
   -> The search is submitted

5. browser_snapshot()
   -> Returns a snapshot of the search results page:
     link "NousResearch/hermes-agent" [ref=e5]
     text "Self-improving AI agent..."
     link "NousResearch/hermes-agent-ui" [ref=e6]
     ...

6. The agent reads the snapshot and summarizes the search results for the user

Trong toàn bộ quá trình, không có bộ chọn CSS nào được viết, không có phân tích cú pháp HTML và không có tọa độ nào được sử dụng để nhắm mục tiêu. agent đã hoàn thành mọi thứ thông qua các tham chiếu phần tử (@ref) và mô tả ngữ nghĩa.

Ảnh chụp màn hình + phân tích trực quan: khi cây trợ năng không đủ

Một số tình huống trong đó cây khả năng tiếp cận bị thiếu:

• Bố cục trang và kiểu dáng trực quan ("Nút này nằm ở đâu trên trang?")
• CAPTCHA và nội dung hình ảnh
• Trực quan hóa phức tạp (biểu đồ, bản đồ)

Trong những trường hợp này, hãy sử dụng browser_vision:

The agent calls browser_vision(question="Is there a CAPTCHA on the page?")
    |
    v
The browser tool takes a screenshot -> saves screenshot.png
    |
    v
Sends the screenshot to a vision model (Gemini / Claude Vision)
    |  "Look at this screenshot and answer: Is there a CAPTCHA on the page?"
    v
The vision model returns a text description
    |
    v
The agent receives the description and decides on the next action

Mặc định cho cây khả năng truy cập (nhanh, rẻ); chỉ sử dụng ảnh chụp màn hình khi bạn cần "xem."

Phiên trình duyệt: trạng thái vẫn tồn tại trong các cuộc gọi

Tương tự như phần phụ trợ của terminal trong s14, trình duyệt cũng cần duy trì trạng thái trên các cuộc gọi -- cookie, trạng thái đăng nhập, nội dung đã được nhập vào biểu mẫu.

Nhưng trình duyệt không cần cơ chế chụp nhanh. Tại sao? Bởi vì bản thân trình duyệt là một quá trình chạy lâu dài (không giống như mô hình sinh sản cho mỗi cuộc gọi của terminal). Hermes khởi động một phiên bản Chrome duy nhất và tất cả các thao tác đều thực thi trong cùng một trình duyệt. Cookie và localStorage vẫn tồn tại một cách tự nhiên.

browser_navigate("https://example.com/login")
browser_type(ref="e1", text="username")
browser_type(ref="e2", text="password")
browser_click(ref="e3")                      <- Click login
# Login succeeds, the browser remembers the cookie

browser_navigate("https://example.com/dashboard")
# You see the logged-in dashboard directly, no need to log in again

Mỗi task_id có phiên trình duyệt độc lập của riêng mình. agent chính và agent phụ (s10) đều có trình duyệt riêng.

Cách nó cắm vào vòng lặp chính

Giống như tất cả các công cụ, công cụ trình duyệt được đăng ký trong sổ đăng ký của s02. Vòng lặp cốt lõi không yêu cầu thay đổi.

Core loop
  |  tool_call: browser_navigate(url="https://github.com")
  v
registry.dispatch("browser_navigate", args)
  |
  v
Browser tool handler
  |  subprocess: agent-browser navigate "https://github.com"
  v
agent-browser CLI -> Playwright -> Chromium
  |  Renders page -> extracts accessibility tree
  v
Returns snapshot text -> registry -> core loop

Những lỗi thường gặp của người mới bắt đầu

1. Chụp ảnh màn hình và sử dụng mô hình tầm nhìn cho mọi hành động

Ảnh chụp màn hình + phân tích hình ảnh mất 2-5 giây cho mỗi cuộc gọi và sử dụng token mô hình tầm nhìn. Cây khả năng truy cập là đủ cho hầu hết các hoạt động.

Khắc phục: Mặc định là browser_snapshot; chỉ sử dụng browser_vision khi thực sự cần sự hiểu biết trực quan.

2. Sử dụng giá trị @ref cũ trên trang đã thay đổi

Bạn đã nhấp vào một liên kết và trang được điều hướng. Số @ref cũ hiện không hợp lệ nhưng agent vẫn cố nhấp vào e3.

Khắc phục: Sau khi thay đổi trang, hãy gọi browser_snapshot một lần nữa để có được số tham chiếu mới. browser_navigate tự động trả về một ảnh chụp nhanh mới.

3. Không thể tìm thấy phần tử trong cây khả năng truy cập

Một số trang web có chú thích về khả năng truy cập kém và thành phần bạn muốn tương tác không xuất hiện trong cây khả năng truy cập.

Khắc phục: Sử dụng browser_console(expression="document.querySelector('...')") để thao tác trực tiếp với DOM hoặc sử dụng browser_vision để chụp ảnh màn hình và định vị phần tử một cách trực quan.

4. Thao tác trước khi tải trang xong

Sau browser_navigate trả về, trang có thể vẫn đang tải nội dung JavaScript. Nếu bạn gọi ngay browser_snapshot, bạn sẽ có một trang được tải một nửa.

Khắc phục: trình duyệt agent đợi trang ổn định trước khi quay lại. Nếu nội dung được tải từng phần qua AJAX, hãy gọi browser_snapshot để kiểm tra xem nội dung đã đầy đủ chưa; nếu không, hãy đợi một lát và thử lại.

Phạm vi của chương này

Chương này chỉ đề cập đến cách agent vận hành trình duyệt thông qua các công cụ.

Nó bao gồm ba điều:

1. Cách nhân viên "nhìn thấy" các trang web -- cây khả năng truy cập, không phải HTML hoặc ảnh chụp màn hình
2. Cách agent vận hành các trang web -- 9 hành động, nhắm mục tiêu thông qua tham chiếu phần tử
3. Cách duy trì trạng thái trình duyệt -- một quy trình Chrome chạy lâu dài với khả năng duy trì cookie tự nhiên

Không được bảo hiểm:

• Triển khai nội bộ CLI trình duyệt agent -> Node.js + Nhà viết kịch; không ảnh hưởng đến lớp công cụ của agent
• Chống phát hiện (Camofox, proxy) -> cải tiến ở cấp độ sản xuất
• Trình duyệt đám mây (Browserbase) -> một chương trình phụ trợ thay thế có cùng kiểu sử dụng như cục bộ
• Lựa chọn và điều chỉnh mô hình tầm nhìn -> được đề cập đến khả năng tầm nhìn của s18

Chương này liên quan đến những chương khác như thế nào

• s02 đã đăng ký các công cụ trình duyệt -> chúng cùng tồn tại với các công cụ tích hợp và công cụ MCP trong cùng một sổ đăng ký
• s14's terminal backend vận hành hệ thống tập tin -> các công cụ trình duyệt vận hành web; cả hai bổ sung cho nhau
• s18 bao gồm khả năng nhìn và giọng nói -> browser_vision phụ thuộc vào mô hình tầm nhìn, làm cho s18 trở thành sản phẩm tiếp theo
• Các agent phụ của s10 có thể có phiên trình duyệt riêng -> bị cô lập thông qua task_id

Sau khi kết thúc chương này, bạn sẽ có thể trả lời

• agent thấy gì sau khi gọi browser_navigate? HTML? Một ảnh chụp màn hình? Hay cái gì khác?
• Tham chiếu phần tử như @e1 và @e2 là gì? Tại sao không sử dụng bộ chọn CSS?
• Khi nào bạn sẽ sử dụng browser_snapshot so với browser_vision?
• Cookie trình duyệt và trạng thái đăng nhập có tồn tại qua nhiều cuộc gọi không? Tại sao?
• Mối quan hệ giữa các công cụ trình duyệt và công cụ đầu cuối là gì?

---

Một câu cần nhớ: agent "nhìn thấy" các trang web thông qua cây khả năng truy cập và vận hành chúng thông qua các tham chiếu phần tử -- không cần bộ chọn CSS hoặc phân tích cú pháp HTML.